I have lately been exploring the WPML multilingual language WordPress plugin with the default theme Twenty Twenty Four and full site editing. I noticed it works a lot better than I thought it would. WPML has really been working on improving the speed and ease of how the plugin works.
I expected a WPML that would heavily impact the speed of the site. I am so happy that I was wrong. Checking the site through Google Page Speed Insight showed a very high score on Mobile and Desktop. This made me very happy!
A video where I go through the process.
The following are steps with screenshots.
How I use WPML to translate content.
Update an existing translation.
WPML in the Site Editor
Syncing a menu
I have added steps and screenshots just below the video.
The video overview of how I went through the process of adding a translation.
How I use the WPML plugin to translate content.
The first thing I had to do.
WPML -> Theme and plugins localization
“Strings in the themes”. Select to translate the theme I am using. So that WPML would know about the different areas of the theme.
I went to Theme and plugins localization so that WPML would able to pick up the various areas inside Twenty Twenty Four theme I am using for the client site.
I selected the theme. Then clicked the “Scan selected themes for strings”.
The result showed 151 strings avaiable.
All pages screen
I have my content in place and I am ready to begin translating the original content into another language. The following screenshot shows two icons. + (plus) and a pencil for most of the pages. This is because I am seeing the Norwegian and English pages. The original Norwegian shows a pencil as in content has been added. The English shows a + (plus) sign because I have not yet added a translation. The gear icon next to Gamle bilder (old pictures) shows that I have looked at translating into English but have not finished it yet.
Gear icon = Needs to finish translation.
+ icon = Need to add a new translation.
Pencil icon = finished translation.
Half circle icon = translation being updated.
Add a translation
After having clicked to add a translation it goes into the Translation screen.
The Translation screen
Update an existing translation
When posts, pages, patterns, templates, template parts, Navigation or a block has been adjusted. One needs to go to the Translation Management screen to update the languages impacted by the adjustment.
Click the checkbox to the left of the item that has been adjusted.
Translation Management
Go to the bottom and make a selection.
I select Translate and Translate myself then click the button Add to Translation Queue.
After having adjusted a translation and having gone through Translation Management the item to translate will be added to the Translations queue
Translations queue
Here I usually click the Translate button for the item needing translation. It will then go into the translation screen so that one can update the current translation.
The Site Editor – add a WMPL Language Switcher block to a Pages template.
On the right side we have the Language Switcher block settings. There in Layout I choose List and under Display I turn off show language name.
I can for instance also adjust the width between the two flags as well as the size among various options. The two flags are not aligning with each other horizontally so I believe I will need to add some CSS to one of the flags to get them to align. The Language Switcher can also be dragged into the Navigation area aligning up with the rest of the Navigation.
Syncing WPML menus
An example from a non Full Site Editing theme.
Go Appearance -> Menus.
1. Menus
Select the menu you want to adjust.
Click “Synchronize menus between languages.” Or go direct to WPML -> WP Menus Sync.
2. WP Menus Sync.
Look through the list of items. Below the overview and click “Sync”
3. WP Menus Sync part 2.
Select which item to “Apply changes” to. It will will automatically be adjusted or you will need to manually adjust by “Untranslated string Search bar The selected strings can now be translated using the screen”. The screen is a link that goes to WPML -> String Translation.
4. String Translation
Click the + beside each item and adjust the translation.
It should now have been adjusted. Check the menu on the frontend.
Here is a video I made showing how I synced a menu.
Troubleshooting when things are not working
Sometimes during a translation the yellow bar on the left side does not turn green so that the translated content does not go up to 100%.
I have refreshed the browser and tried again. I have then been able to get the missing translation in place so that it reaches 100%.
Missing translations.
I have done something to a header, navigation, post, page etc and need to remember to go into Translation management and filter to what I had adjusted. For instance the header. I noticed it needing update and clicked to update. Then hopefully it will be in place. Perhaps even go the bottom and select to translate it myself and then go into the Translations screen and select the element and update it/translate it. This way anything that is missing I went through the process of adjusting and the translation was added.
Missing theme strings/areas.
If the Translation Management does not show any theme specific areas then be sure to first go to Theme and plugins localization to scan the theme you are using for strings/words that will be added to the Translation Management screen.
I will add on to the trouble shooting section when I notice additional things that would be good to add.
Resources used.
https://wpml.org/documentation/getting-started-guide/translating-menus/
