[was:] How to translate/switch specific contents on templates

On a discussion at WordPress.org several approaches were proposed to solve the issue mentioned on this post title.

I think it is not needed such complex stuff and tons of code inside your theme; just turn your theme translatable using _e() and __() functions and creating a POT file (and .po/.mo files for each language) 🙂

Check Translate a WordPress Theme in 3 Easy Steps for more instructions on how to do it.

Neverthless, the idea of having a way to change the UI depending on user’s active language is simply great!

How to change UI design on language change?

So, I tought about it and proposed that if someone wants to select different CSS files for each active language he/she should just add something like this in his/her theme’s header.php:

<style type="text/css" media="screen">
<!-- @import url( <?php bloginfo('template_directory'); ?>/styles/<?php get_bloginfo('language'); ?>.css ); -->
</style>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/styles/<?php get_bloginfo('language'); ?>.css" type="text/css" media="screen" />

Of course, you need to have a dir like your_theme/styles and a bunch of CSS files like en-US.css, pt-PT.css and so on.

On your style.css you just keep the common styles that would work for all languages and on the language specific CSS you keep all the rest, for instance <div> positioning, @webfonts, logo and other imagery replacement, etc.

You can, of course, use the same trick but put instead your code on your theme’s functions.php like this:

// Loading mytheme css styles
function mytheme_styles() {
// Set the language CSS URI
$lang_style = get_template_directory_uri().'/styles/'.get_bloginfo('language').'.css";
// Adding your theme's main CSS style.css
wp_register_style('mytheme', get_template_directory_uri().'/style.css',,'all');
// Adding language specific CSS. Add dependency on styles.css
wp_register_style('mytheme_lang', $lang_style, array('mytheme'));
// Enqueue both
wp_enqueue_style('mytheme_lang');
}
// Add it to loop
add_action('wp_head', 'mytheme_styles');

With this the CSS files will be auto inserted in <head> with the wp_head() function call. And it would benefit of any minifying options you have to speed up your site load.

Another option you have, if you use an upgradable theme you don’t control totaly (best option is to make a sub-theme but would loose upgrading) is to create a small plugin called, for instance, Custom Language Styling 🙂

First create an empty file and add the following code in it…

<?php
/* Plugin Name: Custom Language Styling
Description: Set custom styles for specific languages
Version: 0.1
License: GPL
Author: A Great Guy
Author URI: http://www.example.com/
*/
function customlangstyling_styles() {
// Set the language CSS URI
$lang_style = get_template_directory_uri().'/styles/'.get_bloginfo('language').'.css";
// Adding your theme's main CSS style.css
wp_register_style('customlangstyling', get_template_directory_uri().'/style.css',,'all');
// Adding language specific CSS. Add dependency on styles.css
wp_register_style('customlangstyling_lang', $lang_style, array('customlangstyling'));
// Enqueue both
wp_enqueue_style('customlangstyling_lang');
}
// Add it to loop
add_action('wp_head', 'customlangstyling_styles');

… then just follow the steps:

  1. save it as customlangstyling.php
  2. create the directory wp-content/plugins/customlangstyling
  3. upload the .php file there
  4. Activate it on your blog dashboard
  5. That’s it 😉

Hope it helps.

note:
You could use pll_current_language('slug') instead of get_bloginfo('language') when using Polylang.
Check the docs
and search for pll_current_language to see the syntax and adapt the code as needed.

Be Sociable, Share!
  • Twitter
  • Facebook
  • email
  • StumbleUpon
  • Delicious
  • Google Reader
  • LinkedIn
  • BlinkList