WPML shortcode for language flags

How to make a shortcode for WPML language flags.

To display the language flags in a shortcode, use the function below.

Use the following shortcode where you want the flags to appear.

[wpml_shortcode_lang]


VERSION 1
Use this version to simply swap out the icon, however, the icon will be very small.

###########################
//WPML language flags in shortcode
//see: https://www.jucra.com/whmcs/knowledgebase/161/
###########################
add_shortcode( 'wpml_custom_lang', 'wpml_shortcode_lang' );
function wpml_shortcode_lang() {
 
    $languages = icl_get_languages('skip_missing=0');
 
    if( 1 < count( $languages ) ) {
        $s = "";
        foreach( (array)$languages as $language ) {
            $s .= '<span><a href="' . $language['url'] . '"><img src="' . $language['country_flag_url'] . '" alt="" /> ' . $language['native_name'] . '</a></span> ';
        }
    }
 
    return $s;
}

Version 2
This function allows a bit more creativity with the flags but you have to rely on hand-coding the languages and their image location.

If you see below, you can see the variables for $flag_url are hardcoded in to the function.

However, using the class: header-lang-flags yiou can manipukate things a bit.

###########################
//WPML language flags in shortcode
//see: https://wpml.org/forums/topic/shortcode-to-place-the-language-flags/
###########################
add_shortcode( 'wpml_custom_lang', 'wpml_shortcode_lang' );
function wpml_shortcode_lang() {
 
    $languages = icl_get_languages('skip_missing=0');

        foreach( (array)$languages as $language ) {
            
            if( 1 < count( $languages ) ) {
                
                //$s = "";
                $flag_url = "";
                $lang_code = $language["code"];

                if($lang_code == "en") { $flag_url = "/wp-content/uploads/2020/08/en-flag-50x35-1.png"; }
                if($lang_code == "es") { $flag_url = "/wp-content/uploads/2020/08/es-flag-50x35-1.png"; }
                if(empty($flag_url)) { $flag_url = $language['country_flag_url']; }
                
                $s .= '<span class="header-lang-flags '.$lang_code.'"><a href="' . $language['url'] . '"><img src="' . $flag_url . '" alt="" /> ' . $language['native_name'] . '</a></span> ';
            
        }
    }
 
    return $s;
    
}

Drop this into your css stylesheet to change the layout to like below.

.header-lang-flags img{
	float:right;
	width:50px;
	margin-left:15px;
}

  • wpml flags
  • 0 Users Found This Useful
Was this answer helpful?

Related Articles

customised wordpress wp-config file

Out of the box, the WordPress wp-config.php file is basic and ugly.Below is our standard...

How To Stop Words from Breaking on Mobile in Divi

Use the following code to prevent words going to the next line in DIVI. h1, h2, h3, h4, h5, h6 {...

How to correctly embed a Vimeo video in the divi video module

The video module in DIVI is pretty slick but requires a special trick to insert videos from...

Fix WordPress 404 Errors on Password Protected Directories

You are reading this article becasue you have applied password protection on the wp-admin...

Enable Fenced Off Debugging to Your IP in Wordpress

Use the code below to activate the bugging in WordPress but locked down to your IP.Put this in...