Tutorial: Style a “buttonized” WPML language switcher

This tutorial is for avid WPML users wanting to do style the WPML language switcher like so:

We'll go from this ...

... to this.

First some background about the WMPL plugin for Wordpress in their own words:

“WPML is a WordPress plugin that can turn WordPress and WordPressMU into complete multilingual content management systems. WPML lets you translate your site’s contents and theme. It can also add navigation elements for building full websites, not just blogs.”

After installing this plugin, it’s easy to add a language switcher from within the WPML dashboard. Furthermore the WPML-dashboard also has a built-in form for styling the switcher.

So, why make these buttons? Make no mistake, I totally dig the plugin. This is just an effort to enhance it. I’ll get back to you with the “why” at the end of this tutorial, for now let’s focus on the “how.”

How to make these buttons

First we add this css code to style.css

#custom_switcher{
margin: 0;
display: block;
float: left;
background:#ffffff;
border:0px;
}

#custom_switcher ul{
list-style: none;
}

#custom_switcher ul li a img, #custom_switcher ul li img{

/*Here we style all images (flags) to have green borders, as if selected.*/

border:2px solid #ccc;
border-top: 2px solid #81c877;
border-right: 2px solid #497343;
border-bottom: 2px solid #497343;
border-left: 2px solid #81c877;

padding: 5px 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px; /* future proofing */
-khtml-border-radius: 5px; /* for old Konqueror browsers */

}

#custom_switcher ul li{
display:inline;
padding-right: 10px;
}

#custom_switcher ul li a img, #custom_switcher ul li a:visited img{

/*Here we override the previous border styling, from green to gray, only for links. (e.g. selectable flag)*/

border-top: 2px solid #e1e1e1;
border-right: 2px solid #c8c8c8;
border-bottom: 2px solid #bfbfbf;
border-left: 2px solid #e1e1e1;
background: #ffffff;
}

#custom_switcher ul li a:hover img, #custom_switcher ul li a:active img{

/*You may want to play with these values if the buttons jump too much when you mouse over them. */

margin: -1px -1px -1px 1px; /*<-- Top, right, bottom, left respectively.*/

/*Give images a blue border when hovered over.*/
border: 2px solid #3B92DF;
background: #ffffff;
}

Then we add some php code to functions.php

<?php
function custom_switcher(){
    $languages = icl_get_languages('skip_missing=0');
    if(!empty($languages)){
//Here we set the style
        echo '<div id="custom_switcher"><ul>';
//Here's the loop for searching out the available languages and returning relevant flags
        foreach($languages as $l){
            echo '<li title="'.$l['native_name'].'">';
            if($l['country_flag_url']){
                if(!$l['active']) echo '<a href="'.$l['url'].'" lang="'.$l['language_code'].'">';
                echo '<img src="'.$l['country_flag_url'].'" height="12" alt="'.$l['language_code'].'" width="18" />';
                if(!$l['active']) echo '</a>';
            }
            echo '</li>';
        }
        echo '</ul></div>';
    }
}
//This decides where to place the switcher, in this case within "wp_head.php"
add_action('wp_head', 'custom_switcher');
?>

Within your wordpress installation, for example wordpress/wp-content/themes/classic, you’ll find functions.php. Following the code above will place the switcher above the header.

Simplest alternative is to remove line 21 and insert the line:

custom_switcher();

into either header.php, index.php, sidebar.php or footer.php. Wherever you want to have the buttons show up basically. Those files are located within you active theme’s folder just like functions.php.

Yet another alternative is to change ‘wp_head’ at line 21 for other wordpress actions. (A somewhat advanced procedure)

And you’re done!

Short disclaimer: I am by no means an authority on good code. If you run into any problems just post a comment, and we’ll see what we can do.

Why buttons?

To make my point I’ll ask you to compare both “switchers” with the mind of a first viewer:

What do you read here?

And what do you read here?

• What are the alternative languages?
• What language is currently selected?
• What is this thing anyway?

I set out to make an alternative that could give off more information just by glancing at it. Call me nit picky if you want.

Resources I used

People familiar with wpml styling may recognize the css and php code I’ve used here. I slightly adjusted some php found here on wpml.org, custom language switcher. The css was heavily altered from an example also on wpml.org,
styling the drop down switcher.