Language Flags

agnavinc · June 2014

Hi I'm building a website and I want to add the flags for different translations. I'm not using WPML. How would I go about doing this?

agnavinc · June 2014

I'm probably going to be using Transposh. Where are the flags for Transposh and where are the update settings i can't find them

Albert · June 2014

This has been created especially for WPML and in current version works only with this plugin. But if you want to work with this section but without WPML, then you need to modify includes/header-top-area.php file. What you need to do is add below code:

?>
<div class="wpml-languages>
    
    <a class="active" href="lang1" ontouchstart="this.classList.toggle('hover');">
        <img src="" alt="lang1" />
        <i class="icon-down-open-mini"></i>
    </a>
    
    <ul class="wpml-lang-dropdown">
        <li><a href="lang1"><img src="" alt="lang1" /></a></li>
        <li><a href="lang2"><img src="" alt="lang2" /></a></li>
    </ul>
    
</div>
<?php

above below code:

// Action Button
if( $header_action_link ){
    echo '<a href="'. $header_action_link .'" class="button button_theme button_js action_button"><span class="button_label">'. mfn_opts_get( 'header-action-title' ) .'</span></a>';
}

but of course this code must be also modified for you needs. You need to add link for flag images and links for pages with right languages.

However thanks for suggestion. We`ll think about this possibility in future updates but our current queue with updates is very very long and each day we work on them very hard.

Thanks for understanding!

agnavinc · July 2014

This language code doesn't work. The dropdown always shows all three flags. Also, it is overlapped with the search icon.

http://platinum.agnav.com

agnavinc · July 2014

Like this

Albert · July 2014

Please add the code we gave you above to your website and let us know so we can test it on your website and check what we can do for you.

agnavinc · July 2014

It's uploaded.

Albert · July 2014

Ok, what we see is html errors. Please open your website in Firefox html mode (CTRL+U) and check how many html errors you got. Please fix them first and all should be fine. This is what we see http://snag.gy/svF67.jpg

agnavinc · July 2014

How do you fix them? Please inbox.

agnavinc · July 2014

Fixed it. It works. Thanks.

agnavinc · July 2014

Another thing:

When I have the spanish site open, it the flag does not stay on the spanish flag. I need it to change.

Albert · July 2014

If you want to get right flag as active, then you need to modify this code at all and this is not as easy as you think. For that thing must be included php with html tags and this should look like below code:

$languages = array(
	'en' => array(
		'url' 				=> '',
		'country_flag_url' 	=> '',
		'translated_name' 	=> '',
	),	
	'de' => array(
		'url' 				=> '',
		'country_flag_url' 	=> '',
		'translated_name' 	=> '',
	),
);

if( is_array( $languages ) ){
	
	if( isset($_GET['lang']) ){
		$active_lang = languages[$_GET['lang']];
		unset( languages[$_GET['lang']] );
	} else {
		$active_lang = 'en';
	}

	// disabled
	if( count( $languages ) ){
		$lang_status = 'enabled';
	} else {
		$lang_status = 'disabled';
	}
	
	if( $active_lang ){
		echo '<div class="wpml-languages '. $lang_status .'">';
		
			echo '<a class="active tooltip" href="'. $active_lang['url'] .'" ontouchstart="this.classList.toggle(\'hover\');" data-tooltip="'. $translate['wpml-no'] .'">';
				echo '<img src="'. $active_lang['country_flag_url'] .'" alt="'. $active_lang['translated_name'] .'"/>';
				if( count( $languages ) ) echo '<i class="icon-down-open-mini"></i>';
			echo '</a>';
			
			if( count( $languages ) ){
				echo '<ul class="wpml-lang-dropdown">';
					foreach( $languages as $lang ){
						echo '<li><a href="'. $lang['url'] .'"><img src="'. $lang['country_flag_url'] .'" alt="'. $lang['translated_name'] .'"/></a></li>';
					}
				echo '</ul>';
			}
			
		echo '</div>';
	}
	
}

But if you don`t know, how this should be included, then you must contact with your website developer.

agnavinc · July 2014

I replaced the old WPML code with the new one. It's giving me syntax errors with the square brackets on lines 136 and 137 saying "unexpected ["

agnavinc · July 2014

For the most part, I got it to work. Unfortunately, the default language is set as some flag image that is a dead link set to <url>/e. Fixed the syntax error, believe it or not I'm a bit of a programmer:

	if( isset($_GET['lang']) ){
		$active_lang = $languages[$_GET['lang']];
		unset( $languages[$_GET['lang']] );
	} else {
		$active_lang = 'en';
	}

agnavinc · July 2014

Got it to work. Change this line

else {
		$active_lang = $languages['en'];
	}

Albert · July 2014

Thanks for the info

We're glad you sorted it already!

ihtsham · August 2016

Hello admin!

I am exactly at the begenning where was @agnavinc two years ago. Did you guys added some codes for Transposh translation too?

Kindly guide me, i want to display language flags in main menu next to search button, or at action bar place.

thank you. @muffingroup ;

Albert · August 2016

@ihtsham The only multilanguage plugin we support is WPML plugin and we didn't added anything else.

ihtsham · August 2016

@muffingroup, yes that was very easy to ignore my question. Can you please look at the above discussion? Your other team member helped a user then in 2014 with setting up the same plugin i am requesting now.

would you please spare sometime and inbox me some help on this. thank you. I thought may be @agnavinc can help on this.

Albert · August 2016

@ihtsham We didn't ignored anything. What you ask for, requires files customization what in reference to Item Support Policy is not allowed. So if you want to modify files and don't know how, you should contact with your web developer.

Brunno299 · December 2017

Hi! the best theme you have i,m happy with this theme.

But i have a question: how can do i chage size the flags ? imusing wpml bt the menu swt is betheme.

i put a code css but the flag is small, so i need to upload a new flags sizes

Bryan · December 2017

Brunno299
Hi,
Please always attach a link so we can check it out. If the page is offline(localhost) then our help will be limited, you will have to contact us when the page is online. Also please make sure that the page is not under maintenance before you provide us the link.
It is always a good idea to also attach a screenshot, for that use services like snag.gy or pasteboard.co
thanks

Brunno299 · December 2017

ok this the link website http://novo-dev.paymee.com.br/

the flags is normal size now

Bryan · December 2017

Sorry but the size cannot be changed, the icons are loaded by WPML and if you change the size the images gets pixelated and it breaks the layout. See: http://prntscr.com/hp0knn
You can try with this css

.wpml-languages a img {
	height:auto;
	width:30px;
}

Brunno299 · December 2017

hum ok thanks for contact.

Language Flags

Comments