This is the technical support forum for WPML - the multilingual WordPress plugin.

Everyone can read, but only WPML clients can post here. WPML team is replying on the forum 6 days per week, 22 hours per day.

Our next available supporter will start replying to tickets in about 11.86 hours from now. Thank you for your understanding.

Please make sure to update to WPML to the latest and check our list of Known Issues before reporting

This topic contains 10 replies, has 2 voices.

Last updated by Yvonne 7 years, 4 months ago.

Assigned support staff: sarah.n.

Author Posts
November 26, 2012 at 9:01 am #86535

Yvonne

I would like to have three flags in a row, just above the main menu in the header section.
When i add the folllowing code <?php do_action('icl_language_selector'); ?> into header.php

THe switcher appears in the right place, but not where and how i want, as you see in the image.

Could you help me with this issue, please?

Site: hidden link
Image of how i want it: hidden link

November 26, 2012 at 9:36 am #86546

sarah.n
Supporter

Languages: English (English ) German (Deutsch )

Hello Yvonne,

You may want to add the following function into your theme's functions.php file. This will display flags only.

function language_selector_flags(){
	if (function_exists('icl_get_languages')) {
		$languages = icl_get_languages('skip_missing=0&orderby=code&order=desc');
		if(!empty($languages)){
			
			foreach($languages as $l){
				if(!$l['active']){
					echo '<a href="'.$l['url'].'">
						<img src="'.$l['country_flag_url'].'" alt="'.$l['language_code'].'" />
					</a>';
				}
			}
		}
	}
}

Call the function like this: language_selector_flags(); in your header.php template.
Wrap it in php tags if needed like this: <?php language_selector_flags(); ?>

You may need to style it a little with css so let me know if you need help with that.

November 26, 2012 at 10:47 am #86569

Yvonne

Thank you Sarah, almost good. Except that it's not styled to the right of the page. And the original language switcher is still there.
Check it on hidden link

Do you need access to the wp-admin?

November 26, 2012 at 11:09 am #86577

sarah.n
Supporter

Languages: English (English ) German (Deutsch )

Hello Yvonne,

You will want to remove the drop-down language switcher code (<?php do_action('icl_language_selector'); ?> ) where you have added it.

As regards to flag positioning. Let's modify the function I gave you to this:

function language_selector_flags(){
	if (function_exists('icl_get_languages')) {
		$languages = icl_get_languages('skip_missing=0&orderby=code&order=desc');
		echo '<div class="lang_selector">';
			if(!empty($languages)){
				foreach($languages as $l){
					if(!$l['active']){
						echo '<a href="'.$l['url'].'">
							<img src="'.$l['country_flag_url'].'" alt="'.$l['language_code'].'" />
						</a>';
					}
				}
			}
		echo '</div>';
	}
}

Then in your theme's style.css you can add the following css:

.lang_selector {float:right;}

Let me know if this works for you.

November 26, 2012 at 11:51 am #86585

Yvonne

You do a good job helping me 🙂 I replaced the codes and the flags moved to the right.
But they are behind the menu. You know the trick how to move them up, like i sketched in the image? hidden link

November 26, 2012 at 1:12 pm #86605

sarah.n
Supporter

Languages: English (English ) German (Deutsch )

Yvonne,

Did you add the css line I provided above to your theme's style.css? It does not appear that you have.

Alternatively you can add it under "WPML -> Languages -> Language switcher options -> Additional CSS (optional)"

November 26, 2012 at 1:35 pm #86615

Yvonne

Hi Sarah, yes i DID add it to the style.css That's why it moved to the right. It's not a very big thing, but i want it a bit higher, between the search box and the Contact.

See these images:
without: hidden link
with: hidden link
Image of how i want it: hidden link

November 26, 2012 at 1:39 pm #86618

sarah.n
Supporter

Languages: English (English ) German (Deutsch )

Yvonne,

You will want to clear your navigation below like this:

#header #navigation ul.nav {
  clear: right;
  float: right;
}

Try that please and let me know?

November 26, 2012 at 1:54 pm #86629

Yvonne

Super! Now - it's becoming embarrasing 😉 - i would like to have it slightly to the left, so it alligns right with Contact

November 26, 2012 at 2:18 pm #86645

sarah.n
Supporter

Languages: English (English ) German (Deutsch )

No worries Yvonne 🙂

Add padding-right: 1em; like this

.lang_selector {
  float: right;
  padding-right: 1em;
}

Let me know how you get on or if you need anything else.

November 26, 2012 at 2:26 pm #86648

Yvonne

Thanks so much! To what address can i send a ticket to a sea cruise? 🙂