We’re excited to announce the release of WPML GraphQL, a new glue plugin that bridges WPML and WPGraphQL, enabling multilingual support within the GraphQL schema.
Designed for developers using Gatsby, React, Vue, and other popular front-end technologies, WPML GraphQL is the optimal solution for creating headless WordPress websites in multiple languages.
What is Headless WordPress?
In simple terms, “headless WordPress”, refers to a setup where WordPress works behind the scenes while you employ a separate technology for the front-end.
Sometimes, you need to build a completely custom front-end application without the need to follow the WordPress template and URL hierarchy. In other words, you don’t want to be restricted by how WordPress themes work, you want to build your own front-end.
However, you can still use WordPress for all your content creation and editing needs.
Now, all you need is a way to easily deliver data from the WordPress backend to whatever front-end technology you’re using. This is where WPGraphQL comes in. It allows you to selectively retrieve the exact content element you need for each part of your front-end.
Finally, WPML GraphQL is the magic ingredient that lets you get language data and translations from the WPML plugin. This enables you to build a customized, headless WordPress site that is multilingual.
Recommended Development Stack for Building Headless WordPress Sites
Front-end
Gatsby
Front-end framework for building the user-facing application or site
Gatsby Add-on for WordPress
gatsby-source-wordpress add-on allows Gatsby to get data from your WordPress backend
Back-end
WordPress
For all your content management needs, you only use the backend
WPGraphQL plugin for WordPress
Adds GraphQL support to WordPress
WPML GraphQL plugin for WordPress
Enables multilingual features within the GraphQL schema
WPGatsby plugin for WordPress
Optional, but depending on your needs might come in handy
Enhanced Capabilities with WPML GraphQL
WPML GraphQL integrates with WPGraphQL and adds new fields and filters to the GraphQL schema. After installing the plugin, you can navigate to GraphQL → GraphQL IDE and use the Query Composer to query and filter content in multiple languages.
In the screenshot below, you can see how easy it is to use the language field to retrieve a list of all posts on a WordPress site, including their language code, slug, and URI. You can also use the translations field to get similar information for the translations of each post:
This integration between WPML GraphQL and WPGraphQL opens a world of multilingual possibilities:
- Build headless multilingual WordPress sites
- Use new fields (language, language code, translations) to retrieve specific language data and translations from the WPML plugin
- Filter post types, taxonomies, and comments by language
- Get language data for objects and nodes
- Query data based on all installed languages or specific languages
As a bonus, WPML GraphQL plays well with ACF, ACF Multilingual, and WPGraphQL for Advanced Custom Fields. This allows you to easily interact with multilingual data coming from ACF fields.
For more about how multilingual functionality can elevate WPGraphQL, check out the page dedicated to WPML GraphQL.
Download and Install
You can find the WPML GraphQL plugin on the WPML Downloads page.
Or from your site’s admin, you can go to Plugins → Add new and click over to the Commercial tab.
Share Your Thoughts
Are you currently using WPGraphQL for your web development? Do you plan to create a headless WordPress site with multilingual functionality? We’d love to hear your thoughts!
Share your feedback and tell us how you plan to use the WPML GraphQL plugin in the comments below.