When you are in the middle of a crisis, you need to be able to find information easily and quickly. If English is not your native language, navigating a website without a translation function could be frustrating or virtually impossible– sending you back to Google in a hurry. Fortunately, creating a quality translation feature is very doable. This post will provide 7 time-saving tips for how to create a English to Spanish translated site in WordPress using the Transposh plugin.

How to translated a wordpress site using TransPosh

Turning Point Pregnancy Resource Center is a Non-Profit in Jackson, Wyoming that provides free and confidential health services. When you walk in the front door on Broadway, you are met with big smiles and warm welcomes. Of the 250+ Non-Profits in our small mountain town, Turning Point is by far my favorite. When they asked if I could help them with a redesign that included a new Spanish translation feature, I was really excited to get started and wanted to find the best solution for their needs.

old website

 

The old website actually looked really nice, in my opinion. It had some friendly stock photos on the front page that directed the visitor to various parts of the website based on their needs. Our main focus in the redesign was to improve simplicity and usability, as the website needed to be easy to navigate for any visitors who are undergoing a crisis. The main goals included providing up-to-date and easy-to-find health information as well as providing a simple way for visitors to make an appointment to visit Turning Point, whether they are English or Spanish speaking.

 

Transposh is a great solution for translating WordPress sites– it is free, maintained regularly, and in my experience, totally bug free. It does, however, take a significant amount of time to set up a large site using Transposh and properly translating all items, so I’m addressing a few different techniques and recommendations in this post. I’m not a Transposh expert, but here is what I learned and some tips and strategies I want to remember when implementing this tool for other sites:

 

 

Tip #1: Start with a professional translation rather than Google translator

Transposh gives you to option to translate all pages using Google translator.

Google translation is better than nothing, but it is NOT a good place to start if you are aiming for a professional quality translation on your site.

It saves so much time to start with hiring someone to translate the text rather than having them correct Google’s attempt. When you fix the initial translation, you fix it in predetermined “snippets” or phrases which may not correspond grammatically to the changes you need to make.

 

 

Tip #2. Use Transposh shortcodes to enter entire sections of translated text

Use Transposh shortcodes to start and end each language section (in this case, an English section followed by a Spanish section). The shortcodes reveal and hide the content based on which language is selected on the dropdown translation menu in the header.

In this example, “en” refers to English and “es” to Spanish. If you are using other languages you will have to lookup the Transposh abbreviation for that language in the Plugin settings. Start the English section with [tp lang=”en” only=”y”]

screenshotadmin1final

And here’s how to close the English section with [/tp] and start the Spanish section with [tp lang=”es” not_in=”en”]:

shortcode2final

 

 

Tip #3: Update all links to point to translated pages of the same language

If the visitor chose “Spanish” and is clicking a link that takes them to another inner page, they will want to read that page in Spanish as well, but the link will not take them there by default. Fix this problem within your shortcoded text sections by adding “/?lang=es” at the end of the link (es stands for “Espanol”, so if you are linking to a different translation replace “es” with Transposh’s abbreviation for your language of choice).

spanishlinkfinal

 

 

Tip #4: In some cases, line breaks must be eliminated between shortcodes, or they will appear in the translation

Test out the page after inserting the shortcode sections to make sure that there isn’t anything weird showing up below the translation. If there is, you may need to move the line breaks from within the shortcode bracketed section to below that section.

I’ve resolved this issue on our site so I don’t have a screenshot of the problem, but you will know it when you see it.

 

 

Tip #5: Use shortcodes to insert translated images if they contain text

If your images contain text, like in these widget titles, you must create a new image containing Spanish text and then insert it into the widget or page using the shortcode method described above.

widget

 

 

Tip #6: Translate the menu and slider items using the “edit translation” as admin feature

You can’t use shortcodes in a menu so you will need to use the edit translation feature when you are signed in as admin by checking the “edit translation” box after selecting the secondary language. Then small colored boxes will appear next to the text areas on your page, including the menu, slider, header, and other theme or plugin specific features. Click the colored box to edit the translation.

screenshotadmin3final

 

 

Tip #7: Insert your logo or tagline text into the header rather than using the WordPress logo upload in your theme

The Turning Point logo included their tagline, “a pregnancy resource center” underneath. They wanted to leave “Turning Point” in English and translate the tagline. Because the logo was uploaded into the theme in an area that cannot be manipulated via shortcode, I added the tagline to the header and styled it with CSS to make it the same color, font, and size as the tagline in the original logo. Then I edited the translation using the edit translation as admin box described above.

 

Have any questions or other recommendations for translated sites? Let me know in the comments!

Meg Farrington
Owner, Web Designer at Meg Farrington Web Design