Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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
/* 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;
}
<?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;
}
/* 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;
}
}
@trockendock

This comment has been minimized.

Copy link

@trockendock trockendock commented Mar 24, 2020

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

@zeshanshani

This comment has been minimized.

Copy link
Owner Author

@zeshanshani zeshanshani commented Mar 24, 2020

Hi @trockendock,

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

Cheers

@selincodes

This comment has been minimized.

Copy link

@selincodes selincodes commented Jun 13, 2020

@zeshanshani thank you!

@pgroot91

This comment has been minimized.

Copy link

@pgroot91 pgroot91 commented Apr 25, 2021

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',

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment