IT Nota

  • Home
  • How To
  • .NET
  • WordPress
  • Contact
You are here: Home / How To / How to Add WPML “Flags Only” Language Switcher to Your Navigation

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):

WPML Flags Only Language Selector on Genesis Agency Child Theme

December 12, 2011 Filed Under: How To, WordPress Tagged With: Genesis Framework

Leave a Reply Cancel reply

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

Categories

  • .NET
  • Coding
  • Cybersecurity
  • Database
  • How To
  • Internet
  • Multimedia
  • Photography
  • Programming
  • Resources
  • Review
  • Tips and Tricks
  • WordPress
  • Writing

Recent Posts

  • Gotcha in Executing SSIS from DTExec Command Line
  • How to Create Kofax TotalAgility (KTA) SDK API in ASP.NET
  • How to Resolve ReferenceManagerPackage Error in Visual Studio 2019
  • F#: Seq, List, Array, Map, Set. Which One to Use?
  • How to Get Table Definition in SQL Server
Web Hosting

Recent Posts

  • Gotcha in Executing SSIS from DTExec Command Line
  • How to Create Kofax TotalAgility (KTA) SDK API in ASP.NET
  • How to Resolve ReferenceManagerPackage Error in Visual Studio 2019
  • F#: Seq, List, Array, Map, Set. Which One to Use?
  • How to Get Table Definition in SQL Server
  • RSS

Tags

.NET Core Access Adobe AdSense Amazon ASP.NET Cdonts Dll Classic ASP Code Editor Connect-It ETL FSharp Genesis Framework Git Google HP Asset Manager HTML HTML5 Hugo IIS Information Security Internet Internet Information Services iOS Linux macOS Microsoft Microsoft SQL Server MVC PHP Simple Mail Transfer Protocol Smtp Server Social Media SQL SQL Server SSIS SSMS SSRS Visual Studio VPN Windows Windows 8 Windows 10 Windows 2012 Windows Server

Copyright © 2011-2021 IT Nota. All rights reserved. Terms of Use | Privacy Policy | Disclosure