Using Polylang with Customizr WordPress theme

Note : This snippet applies to Customizr version 3.1.x and below. It may not work with version 3.2+. Use with caution on 3.2+ and check the availability and type of the hooks in the Customizr hooks API.

This guide shows you how to set up a multilingual site with the Polylang plugin and the Customizr theme. It contains some “bridge” code, which makes them work together. Bonus: The code included below also works with Featured Pages Unlimited and Polylang, using any other theme.

Bridge-code updated 22 May 2014: Corrected case where running Customizr and Featured Pages Unlimited, where slider choice was not being picked up; removed stray line-end; removed unnecessary double-checking for FPU in translation panel.

First, a word about language plugins:

 

Customizr and free language plugins

 

qTranslate and mqTranslate

Customizr fully supports qTranslate for multilingual sites. qTranslate is a very popular free plugin that is tightly integrated with the WordPress admin screens. To use qTranslate with Customizr, you use shortcodes to enter the text on the featured pages, sliders, buttons, etc. For each page, qTranslate keeps all the languages together in the page and, when requested, presents the browser with a subset of the text in the right language.

Because of the tight integration with WordPress, qTranslate is very sensitive to WordPress changes. In order to make sure that it doesn’t break with the latest WordPress update, some parts of the plugin disable themselves every time there is a WordPress update. Your site still works fine, but it’s harder to manage your pages until it is updated—which can sometimes take a while. For this reason, some people are switching to the mqTranslate plugin. This is a fork of qTranslate. mqTranslate is not yet supported by Customizr, but in principle it should be possible to add support in the same way.

If you uninstall qTranslate or mqTranslate, they leave your site full of shortcodes to clean up and they leave your pages with two or more languages in each page.

 

Polylang

Polylang is another popular WordPress plugin for multilingual sites. Polylang takes a different approach to qTranslate and mqTranslate. Each language has its own page and, when requested, Polylang presents the browser with the correct page in the right language. In order for Polylang to do this, you define a language for each page and tell Polylang how to link them together. This is a similar approach to the one taken by the paid-for plugin WPML.

One advantage with Polylang is that your pages—and all the text inside the pages—are left entirely intact if you uninstall. Nothing to clean up.

Polylang didn’t work well with Customizr—until now—because it didn’t support Customizr’s front page and sliders. Extra work is needed to make them show correctly. This snippet puts the Customizr text in featured pages and buttons, together with your slider names, into Polylang’s Strings translation panel, so that you can translate the text and substitute the slider names.

Enough background; let’s get down to work.

 

Setting up WordPress + Customizr + Polylang

Don’t be put off by the number of steps to complete below. The steps are very comprehensive and lead you through the process. Depending on the size of your site and your skill level, it doesn’t take much time to have a fully-functional multilingual site with Customizr.

 

Set up WordPress and Customizr

First, read Setting up WordPress multilingual sites with Customizr, which explains the essentials of setting up WordPress for your languages. This will get you to a point where all the phrases like “Post navigation”, “Category archives”, etc. are automatically translated.

 

Create your content

Create the site’s content in your languages. If you currently have two (or more) sites in different languages, you can use WordPress’s export on each site and then use WordPress’s import to get them all into one site.

 

Install Polylang

Install and setup Polylang, using Polylang’s documentation. The documentation is good and covers all the options. The steps are as follows:

  1. Add your languages to Polylang, using Dashboard > Settings > Languages > Languages (see Polylang’s help).
  2. Edit the settings in the Settings tab (see Polylang’s help):
    • If this is the first time you’re using Polylang, it will ask you whether you want to automatically assign all the pages to the default language. Choose this option, as it will save you a lot of work in the next step.
    • Select The language is set from the directory name in pretty permalinks. This option has been fully tested and works well.
    • Change the other settings as you wish. You may choose to set the Activate languages and translations for media option, but this isn’t necessary for the Customizr-Polylang bridge code to work.
  3. In Polylang’s settings, choose the String translations tab and translate your site’s title and tagline.
  4. Next, you need to tell Polylang the language(s) of your other pages. The quickest way to do this is as follows:
    • On the All pages list, select the check box next to all the pages in your second language;Select your pages by language
    • In the Bulk actions dropdown, select Edit and click Apply;
      Change language for several pages at once
    • Change the language to your second language and click Update;
    • Repeat for all other languages (if any);
    • Edit every page in the non-default language and link it to equivalent page in the default language. Tip: Use the Ctrl (Windows) or cmd (OS X) key as you click, opening all the pages that you need to edit in separate browser tabs, then close them after you update each one—it helps you keep track. Remember to click Update on each page.Linking pages with polylang
  5. Repeat step 4 for all your posts (and for all your media if you have different images for each language).
  6. In Posts > Categories, edit each category that isn’t in your default language, change its language, and link it to the equivalent category in the default language.
  7. If you have chosen to show a static page on your front page in WordPress/Customizr (and thus have a blog page called “blog”, for example) then you will to need to create another blog page for each language. (If your front page displays your latest posts, you don’t need to do this.)
  8. In Appearance > Menus, set up a menu for every language. Choose names to help you remember which is which. For example: “main-menu-en“, “main-menu-fr“, and so on. In the Manage locations tab, set each language menu to be the main menu for that language.
  9. With Appearance > Widgets, set up a Polylang language-switcher widget (and customize your other widgets) in one of Customizr’s widget areas, as explained in Polylang’s documentation.

 

Set up the sliders

The Customizr-Polylang bridge code is written to give you full flexibility for your sliders, having different sets of slides for each language. This is helpful if your slides have cultural references or other language references in them.

So you need to set up a slider for each language:

  1. For each language, upload the images to be used in each slider. If you use the same image in two different language’s slides, you need to upload them twice. Tip: Take the opportunity to change their filenames to be descriptive in the languages of your site. It will improve the chances of your images (and pages/posts) being ranked higher in search engines.
  2. If you have selected the Activate languages and translations for media option in Polylang, you must set the language of each slide by editing each one. (If you haven’t selected that option, then you don’t need to do this.)
  3. Create a new slider for each language following the Customizr instructions. If you have many sliders or many languages, try to name them in a way that you will remember later. For example, you could call your front page sliders “main-en-slider”, “main-fr-slider”, etc., and call your page sliders “page-name-en-slider”, “page-name-fr-slider”, etc.
  4. For each slide, fill in the Title, Description, and Button text for each, as you wish, in the relevant language.

At this point, you have a basic Polylang setup. But your Customizr front page will not be showing in all your languages. This is where the Customizr-Polylang bridge code comes in.

 

Install the Customizr-Polylang bridge code

Add this code to your child-theme’s functions.php:

 

Where to copy/paste this code? => in your functions.php file. We strongly recommend you create a child theme. Download a start-up child theme here.

Remember: you shouldn’t edit the theme’s functions.php, nor should you put a copy of it into your child theme.

 

Translate text

Once you have installed the Customizr-Polylang bridge code, Customizr’s featured pages text and buttons will be available for translation in Polylang, together with the slider names. Tip: The featured pages button text will only be available for translation if you have entered some text in the Button text field in Appearance > Customize > Front page > Featured pages options.

In Polylang’s settings (in Settings > Languages), choose the String translations tab:

Translating Customizr front page and slider strings with Polylang

  1. Translate the featured pages button text into each of your languages;
  2. If you have written your own text for the featured pages (which overrides the automatic page excerpts) then the text will appear here and you can translate it for each language. (If you are simply defaulting to the featured pages’ own text, then no text will appear here—the Polylang-Customizr bridge code will tell Customizr which page’s text to use for the excerpt, in the current page’s language.)
  3. Enter the name of the slider for each language. For example, if you called your French slider “main-fr-slider”, enter it here in the Français field.
  4. Remember to click Save. Tip: Every time you change the featured text in Appearance > Customize, and then translate it in Polylang’s String translation settings tab, Polylang stores the new translation. To save confusion later, select Polylang’s Clean strings translation database option when you save your strings.

 

Uninstalling Polylang

If you decide not to use Polylang, simply deactivate it and delete it. One of the beauties of Polylang is that it uninstalls cleanly. That is, you don’t need to re-edit all your pages as you would, for example, with qTranslate. This goes for this Customizr-Polylang bridge too. Simply remove the code from your child theme’s functions.php.

 

Need help?

If you’ve never used a functions.php file, check out this article. If you need more help, post your question on the WordPress Customizr forum.

Credits: Rocco helped significantly in getting this guide together. Thanks Rocco!

 

Other resources for Polylang

 


About ElectricFeet

ElectricFeet started using Wordpress for the first time in the summer of 2013. Customizr is such a great theme, it's hard not to get swept up in the fun of discovering new tricks for modding pages with (and for) others on the Wordpress forums. The fun continues :-)


32 thoughts on “Using Polylang with Customizr WordPress theme

  • Reply
    Magnus

    Brilliant solution. I’ve struggled a lot with the front page and featured pages, slides etc. I just installed this and “poof” – it worked. Thanks! Tusen tack!

  • Reply
    maurizio

    Hi I’have copied the above code to the child theme funcions.php but I can’t see further string translactions in Polylang’s settings (in Settings > Languages) except from the default ones
    moreover I’m not able to switch translactions in featured blocks in the home page when canghing language http://idromeccanica.prdigitale.com

  • Reply
    ElectricFeet Post author

    Hi Maurizio, did you call the file “functions.php” and not “funcions.php” as indicated here?

    • Reply
      maurizio

      sorry it wa s a typo error, of course functions.php, the path is idromeccanica.prdigitale.com/wp-content/themes/customizr-child

  • Reply
    Alan

    I have added the bridge code and can see front slider name in string translation. I changed it to the correct slider but it still shows a blank in the non default language home page. Please help.

    Also for the features pages does that mean although I can change the language text it will still link to a page in the default language?

    Thanks in advance

  • Reply
    Alan

    Found out about the first part where slider does not show. If I set my front page display to: Don’t show any pages or post then the sliders will show up.

    However if I set it to static page then the sliders of second language doesn’t show up since I do not where to assign the front static page for the second language.

    I hope this makes sense

  • Reply
    ElectricFeet Post author

    Hi Alan. When you set up a static front page (e.g. called “home” in English), you will need to set up a second static page for your second language (e.g. called “pagina iniziale” for Italian) and link them with Polylang, just like all your other pages. Let us know if that works.

  • Reply
    Phoenix

    Copied the bridge code to child-theme functions.php and it doesn’t work with my page.
    The whole code appears on the top of the website and also in administrator page. When I want to log-out or save something in admin page, it gives the following warning:

    Warning: Cannot modify header information – headers already sent by (output started at /homepages/6/d525318583/htdocs/phoenixavatar/wp-content/themes/customizr-child/functions.php:78) in /homepages/6/d525318583/htdocs/phoenixavatar/wp-includes/pluggable.php on line 1121

    Glad if anyone can shed some lights on this.

    Thanks,
    Phoenix, Bird of Paradise

    • Reply
      Phoenix, Bird of Paradise

      Hi ElectricFeet,
      my mistake that I ‘Select All’ and replace everything with the code, so I don’t have the <?php.
      Now I don’t see the php code anymore on the website and admin page.
      It was a false alarm.

  • Reply
    sergio

    I would like to place the language selector (drop-down) above the menu bar. Where, by default, the theme shows the site-description. It is the same place where now, on this page, are the Showcase and View Demo buttons.

    Someone can help me?. Thank you.

    • Reply
      ElectricFeet Post author

      Hi sergio. Try adding this code to your child-theme’s functions.php:

  • Reply
    sergio

    Hi ElectricFeet,

    In principle works, language selector located at the desired location. But amending the title of the site that appears on the left. It adds the following features:

    “>

    And when you mouse over the title reads, besides the title,

    <select name =

    Any idea?.
    Thank you for your time.

  • Reply
    sergio

    Hi again,

    On the other hand, does not work. While on the desired location, but does not change the language to select. It does nothing.

  • Reply
    jy

    Hi, I really love this theme! So far it works beautifully! Like Sergio’s question here, I’d like to move the polylang language switcher above the menu, on the left corner… How can I do this? I tried to modify the tag-line to Polylang language switcher… but I couldn’t figure it out yet… hope anyone can help me.

  • Reply
    Jorge

    Thanks a lot for this bridge code, it saved me a lot of time! Great work!
    I have only one question: although the text for the featured pages buttons appears in Polylang Strings translation tab, in the site I always see the buttons with the default language text. Everything else works perfectly!
    Any idea what may be wrong?
    Thanks a ton!
    Cheers

  • Reply
    ElectricFeet Post author

    Hi Jorge.

    I just retested it and it works. However, the featured pages button text will only be available for translation if you have entered some text in the Button text field in Appearance > Customize > Front page > Featured pages options.

    I’ve updated the snippet to make this clear.

    Hope this solves your problem. Let us know if it does.

  • Reply
    Jorge

    Hello there.

    Yes,it worked. But I had some text in the featured pages already. The difference is that instead of “Read More >>” and the related translations, I just entered now “Read More”, without the “>>”. And it worked.

    Thanks a lot for our help.

    Best regards

    Jorge

  • Reply
    Elchin

    Hello, thanks for a great job – i have i question – how i can add additional language if I cannot find it in the Polylangs list?

  • Reply
    Jackson

    Hello!
    I’m using Customizr-Polylang bridge and today, all of a sudden I got this message: Warning: Invalid argument supplied for foreach() in …(path)…\wp-content\themes\customizr-child\functions.php on line 122. Line 122 is foreach ( $pll_tc_areas as $area ) { (line 44 of the code on this page). Now, I don’t know what happened, because I didn’t change anything in the functions.php at all today. Any advice? Thanks in advance! J.

    • Reply
      Jackson

      Well, I fixed it by creating a new child theme and than copied all the custom code from functions.php in the new child’s functions.php. Now everything is back to normal. Still can’t figure out what happened though… J.

Leave a Comment

Your email address will not be published. Required fields are marked *

Do you need to share some code? To display it in a nice looking syntax highlighter, wrap your code between the following tags (css code in this example) : <pre class="lang:css">YOUR CODE</pre> ( possible code language acronyms : css, php, xhtml, javascript, sql)

You may also use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">