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
// Mixins and variables are being used from here:
// https://gist.github.com/zeshanshani/c4d5ae43e6a9f661d012
/* Component: Languages */
.languages {
// El: Item
&__item {
text-transform: uppercase;
color: #899099;
@include font-size( 13px );
line-height: 1.15;
// Mod: Current
&--current {
color: $color-text-dark;
}
// Divider
&:before {
content: ' / ';
color: #899099;
}
// Remove divider from first item
&:first-child:before {
content: '';
}
}
// Hover Styling for links
a.languages__item:hover {
color: $color-text-dark;
}
}
<?php
/**
* 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;
}