Tips for Bilingual WordPress Sites & Plugins for Wedding Sites

TL:DR; How to translate a wordpress plugin or theme. Just read that link because that’s what you need.

“No,  I have time..what problems might I run into when building a bilingual page?”

Thanks! OK, so we’re using wordpress to make a wedding site. I would prefer to GTD it by using a free, ready to roll site but our requirements were:

  • online RSVP, including menu options
  • Fully bilingual
  • hidden from search engines

So self-hosted seemed like the best option. At the time I thought wordpress would be best for being able to switch the content around, update guests on any changes in plans (since most of my people aren’t just outside Spain but outside the continent of Europe as well) and was extendable as needed.

Only it’s a bitch to translate after you have a few plugins involved.

Plugins we are using:

Here was how I thought translation would go:

  1. I download WPML
  2. I create the English content.
  3. my S.O would write the Spanish content.
  4. I’d link the content up in the WMPL plugin.
  5. Voila!

Here’s how it actually went

  1. I download the WPML plugin.
  2. I create English content
  3. I create Spanish content shittily because S.O is ‘too busy’
  4. I translate the navigation bar.
  5. I translate the helpful links section
  6. The language switcher isn’t working and I lose my mind.
  7. It’s not working because I forget about the static homepage in the theme (since we have no blog content yet. Just pages). The language switcher won’t work because the homepage only exists in English.
  8. I create a Spanish version of the static homepage with WMPL. (basically, hit the plus sign and create another empty homepage inside the pages list.) Now the language switcher works.
  9. But the widgets on the homepage are in English.
  10. I download WPML widgets.
  11. I create two versions of every widget on the home page and use the language select option to specify which language they should appear on.
  12. realise that WordPress still counts there being two widgets in each area and the theme formats the one visible widget to occupy half the page width, to the left of the page. Because it’s a dynamically created page, there’s nothing to edit but to remove the widget counting function, and I definitely don’t want to do that because I do want to occasionally use the two widget layout.
  13. I ponder adding jquery to remove the “two-widget” class to select elements. But do I really want to load jquery on a page just for this? Most people will load it in mobile where it renders fine.
  14. I install a static HTML cache (WP super cache) because that at least speeds up page load speed while also rendering a static html page in which I can remove the “two-widgets” div element from.
  15. I edit the static html and everything that should be centred is centred.
  16. S.O is finally available and needs me to edit all the Spanish content.
  17. I delete cache to view the changes and (as expected) my edits are gone.
  18. Repeat step 15
  19. S.O has realised the navigation bar needs edits in Spanish
  20. repeat steps 17 &  15
  21. S.O notices a typo
  22. disable cache until all edits are done and create a trello board for issues.
  23. S.O notices an error in a WordPress translation of the form fields. It’s saying required fields are NOT required, which is just confusing.
  24. I rummage around plugin folder, core WordPress translation files but nothing I do results in changes. This takes forever.
  25. I eventually cheat and use the “Advanced” tab inside ninja forms form editor for that form > “display settings” > “Advanced” > “custom labels” and type in sensible Spanish.
  26. S.O wants the field above the comment section which I’ve changed inside the Comment Guestbook plugin to read “leave a note” to appear in Spanish on the Spanish site. I remove the custom text inside the plugin since it’s not translatable and decide to edit the english text since the spanish text makes sense with defaults on.
  27. Rummage some more inside the core translation. Find ‘comment-template.php’ file and edit “leave a reply” to ‘Leave a Note’,
  28. The Spanish translation now says “Leave a Note” in English.
  29. Open up es_ES.po inside /wp-content/languages/ search and find and replace “Leave a Reply” with “Leave a Note” so the translation has the updated string.
  30. Discover this isn’t enough because the .po file needs to be compiled into that .mo file I keep seeing everywhere.
  31. Download Poedit, which 1) makes finding the string much easier. 2) compiles the texts after editing. Edit and save.
  32. Upload the edited file and generated .mo file to the FTP server.
  33. It works now.

Take homes & tips:

  1. As with professional sites, it’s always down to having content ready for you to put in.
  2. If you do have to go ahead without the dummy text or your own translated efforts without your translator, keep a list of every item you’ve translated so you can go through everything methodically rather than on a “visibility” basis. Just because it’s personal, don’t assume you’ll get it done faster than if it were paid.
  3. If you have a static webpage, make sure you “translate” that too in WPML, even though it’s technically an empty page in the I’m using.
  4. Don’t bother with po/mo editor plugin. It takes ages to load and didn’t save properly. Poedit was way more efficient and easy, but you need to be able to ftp or have access to file manager in Cpanel.
  5. Use browser language, never IP address for presenting translated pages.
  6. Don’t expect people to see the language switch option in the navigation bar- on mobile this is often squished into a “hamburger”. Use system language detection. Although this does rely on javascript, which is limited.
  7. Separate folders or subdomains are best in case the system language detection doesn’t work. In our use case, we can send the /es/ version to his family and friends.

Anyone with tips on multilingual or bilingual pages? I’d love to hear your tips!