WPML | Create a custom dropdown language switcher using foundation and fontawesome

May 4th, 2018

This time i need to create, on website developed with wordpress, foundation and wpml, a Dropdown language switcher.
First of all i find on foundation a component that is right for what i need.
Here you can view the componenet

Dropdown panes are little happy sprites which can be revealed on click or hover.

So, basically, i need to create a dropdown, and, in “dropdown-pane” add the language ( flags or text ) , and in the relative “button” add the “active” language ( flag or text ).

first of all the html for the dropdown

<div id="flags_language_selector" class="left">
   <?php language_selector_flags(); ?>
</div>

“flags_language_selector ” is the wrapper of our dropdown.

Now open your theme’s function.php and let’s create the language_selector_flags() function.

/* language dropdown */

function language_selector_flags(){
  $languages = icl_get_languages('skip_missing=0&orderby=code'); /* retrieve active languages */
  if(!empty($languages)){ /* Check if languages var is'nt empty
    echo'<button class="button" type="button" data-toggle="lang-dropdown">';
    foreach($languages as $l){
        if($l['active']) echo '<img src="'.$l['country_flag_url'].'" height="12" alt="'.$l['language_code'].'" width="18" />'; // Print active language inside dropdown button
    }
    echo'<i class="fal fa-angle-down"></i></button>'; // Add fontawesome " angle down " icon https://fontawesome.com/icons/angle-down?style=solid
    echo'<div class="dropdown-pane" data-position="top" data-alignment="center" id="lang-dropdown" data-dropdown data-hover="true" data-hover-pane="true">'; // Crete the "Dropdown-pane"
      foreach($languages as $l){ // add all languages
        echo '<li>';
          if(!$l['active']) echo '<a class="notactive_lang" href="'.$l['url'].'">'; // add link only to not active languages
          echo '<img src="'.$l['country_flag_url'].'" height="12" alt="'.$l['language_code'].'" width="18" />';
          if(!$l['active']) echo '</a>';
          echo '</li>';
      }
      echo'</div>';
  }
}

Here final result :

On hover, open the languages panel, active language doesn’t have link, instead inactive languages has dynamic link on translated pages.

That’s all !!

Help-Desk