How to Add WPML “Flags Only” Language Switcher to Your Navigation

The WordPress Multilingual Plugin (WPML) is a really useful plugin to build multilingual websites, however the default language switcher is not always placed neatly on the layout. After searching on WPML’s website, I ran across the page that explains how to customize the language selector with flags only:

Custom Language Switcher WPML

Now I have another problem because I wanted to place the flag language selector on the right side of my navigation menu using StudioPress Theme and I don’t have quite a good grasp of its framework yet. Luckily, Bill Erickson has a very good tutorial on how to customize/add content to its navigation:

How to Add Content to Your Navigation

From the two tutorials above, here are all the combined steps I took. Essentially, I just needed to modify two files from my Genesis child theme.

1. functions.php file:

add_filter( 'genesis_nav_items' , 'flags_selector' , 10 , 2 );
add_filter( 'wp_nav_menu_items' , 'flags_selector' , 10 , 2 );
function flags_selector($menu, $args){
  $args = (array)$args;
  $flags = '';

  if ( $args['theme_location'] != 'primary' )
    return $menu;

  $lang = icl_get_languages('skip_missing=0&orderby=code');
  if( !empty($lang) ) {
    $flags .= '<div id="flags-selector">';
    foreach( $lang as $l ) {
      $flags .= '<div class="flag-item">';
      if( !$l['active'] )
        $flags .= '<a href="' . $l['url']. '">';
      $flags .= '<img src="'. $l['country_flag_url']
                . '" height="12" alt="' . $l['language_code']
                . '" width="18" title="' . $l['translated_name']
                . '" />';
      if ( !$l['active'] )
        $flags .= '</a>';
      $flags .= '</div>';
    }
    $flags .= '</div>';
  }
  return $menu . $flags;
}

2. The CSS:

/***** Flags Only Language Selector *****/
#flags-selector {
  float: right;
  padding-top: 10px;
  }

.flag-item {
  display: inline;
  padding: 4px;
  }

The final result with the flags placed neatly on the right side of the navigation bar, can be seen on the graphic below (Agency Child Theme from Genesis Framework is used for this demo):