Lightweight WPML Language Switcher Shortcode
Adds a [wpide_wpml_switcher] shortcode that prints an accessible list or dropdown of your WPML languages, with native names, codes or flags, anywhere you can place a shortcode.
Opens WPIDE on
Code
add_shortcode( 'wpide_wpml_switcher', function ( $atts ) {
if ( ! defined( 'ICL_SITEPRESS_VERSION' ) ) {
return '';
}
$atts = shortcode_atts( array(
'style' => 'list',
'show' => 'native',
'flags' => '0',
'hide_current' => '0',
'skip_missing' => '0',
), $atts, 'wpide_wpml_switcher' );
$languages = apply_filters( 'wpml_active_languages', null, array( 'skip_missing' => $atts['skip_missing'] ? 1 : 0, 'orderby' => 'custom' ) );
if ( empty( $languages ) || ! is_array( $languages ) ) {
return '';
}
$label = function ( $lang ) use ( $atts ) {
if ( 'code' === $atts['show'] ) {
return strtoupper( $lang['language_code'] );
}
return 'translated' === $atts['show'] ? $lang['translated_name'] : $lang['native_name'];
};
if ( 'dropdown' === $atts['style'] ) {
$id = wp_unique_id( 'wpide-wpml-ls-' );
$html = '<form class="wpide-wpml-switcher" onsubmit="return false"><label class="screen-reader-text" for="' . esc_attr( $id ) . '">' . esc_html__( 'Language' ) . '</label>';
$html .= '<select id="' . esc_attr( $id ) . '" onchange="if(this.value){window.location.href=this.value;}">';
foreach ( $languages as $lang ) {
$html .= sprintf(
'<option value="%1$s" lang="%2$s"%3$s>%4$s</option>',
esc_url( $lang['url'] ),
esc_attr( $lang['tag'] ?? $lang['language_code'] ),
selected( ! empty( $lang['active'] ), true, false ),
esc_html( $label( $lang ) )
);
}
return $html . '</select></form>';
}
$html = '<nav class="wpide-wpml-switcher" aria-label="' . esc_attr__( 'Language' ) . '"><ul style="list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.75em">';
foreach ( $languages as $lang ) {
$current = ! empty( $lang['active'] );
if ( $current && $atts['hide_current'] ) {
continue;
}
$flag = $atts['flags'] && ! empty( $lang['country_flag_url'] ) ? '<img src="' . esc_url( $lang['country_flag_url'] ) . '" alt="" width="18" height="12" style="vertical-align:middle;margin-inline-end:.35em"> ' : '';
$html .= sprintf(
'<li><a href="%1$s" hreflang="%2$s" lang="%2$s"%3$s>%4$s%5$s</a></li>',
esc_url( $lang['url'] ),
esc_attr( $lang['tag'] ?? $lang['language_code'] ),
$current ? ' aria-current="true" style="font-weight:700"' : '',
$flag,
esc_html( $label( $lang ) )
);
}
return $html . '</ul></nav>';
} );
Notes
Attributes: style="list|dropdown", show="native|translated|code", flags="1", hide_current="1", skip_missing="1" (hide languages without a translation of the current page).
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.