Custom Language Switcher for Polylang. Contains both the PHP function and SCSS styling. HTML markup is using BEM methodology. SCSS file is using my variables and mixins from here: https://gist.github.com/zeshanshani/c4d5ae43e6a9f661d012

polylang_custom_language_switcher.css

/* Component: Languages */
.languages__item {
  text-transform: uppercase;
  color: #899099;
  font-size: 13px;
  font-size:  1.3rem;
  line-height: 1.15;
}
.languages__item--current {
  color: #212121;
}
.languages__item:before {
  content: ' / ';
  color: #899099;
}
.languages__item:first-child:before {
  content: '';
}
.languages a.languages__item:hover {
  color: #212121;
}

polylang_custom_language_switcher.php

<?php // Don't copy this line in functions.php file if it's already added.

/**
 * Show Polylang Languages with Custom Markup
 * @param  string $class Add custom class to the languages container
 * @return string        
 */
function rarus_polylang_languages( $class = '' ) {

  if ( ! function_exists( 'pll_the_languages' ) ) return;

  // Gets the pll_the_languages() raw code
  $languages = pll_the_languages( array(
    'display_names_as'       => 'slug',
    'hide_if_no_translation' => 1,
    'raw'                    => true
  ) ); 

  $output = '';

  // Checks if the $languages is not empty
  if ( ! empty( $languages ) ) {

    // Creates the $output variable with languages container
    $output = '<div class="languages' . ( $class ? ' ' . $class : '' ) . '">';

    // Runs the loop through all languages
    foreach ( $languages as $language ) {

      // Variables containing language data
      $id             = $language['id'];
      $slug           = $language['slug'];
      $url            = $language['url'];
      $current        = $language['current_lang'] ? ' languages__item--current' : '';
      $no_translation = $language['no_translation'];

      // Checks if the page has translation in this language
      if ( ! $no_translation ) {
        // Check if it's current language
        if ( $current ) {
          // Output the language in a <span> tag so it's not clickable
          $output .= "<span class=\"languages__item$current\">$slug</span>";
        } else {
          // Output the language in an anchor tag
          $output .= "<a href=\"$url\" class=\"languages__item$current\">$slug</a>";
        }
      }

    }

    $output .= '</div>';

  }

  return $output;
}

polylang_custom_language_switcher.scss

/* Component: Languages */
.languages {
  
  // El: Item
  &__item {
    text-transform: uppercase;
    color: #899099;
    font-size: 13px;
    line-height: 1.15;
    
    // Mod: Current
    &--current {
      color: #212121;
    }

    // Divider
    &:before {
      content: ' / ';
      color: #899099;
    }

    // Remove divider from first item
    &:first-child:before {
      content: '';
    }
  }

  // Hover Styling for links
  a.languages__item:hover {
    color: #212121;
  }
}

Hi, thanks for that code. I understand the approach.
But: if I add the code to the functions.php and call the Language Switcher in the template with <?php pll_the_languages(); ?>
the output markup is still the original one, not the one from your code. which function do I have to call?

Pascal

Hi @trockendock,

You need to use the custom function we added in the functions.php file: <?php echo rarus_polylang_languages() ?>

Cheers

@zeshanshani thank you!

Thanks for this code snippets! Just having trouble to get the name? any idea why the following is not working?

$name = $language['name'];

EDIT: figured it out! forgot to change the slug to name in the following line:

'display_names_as' => 'slug', to 'display_names_as' => 'name',