[Malo Zollikofer]

Hello,

With WPML, there is an option to put the langugage switcher in the menu (at the beggining or at the end).
On a mobile phone, where the menu isn’t visible as on the computer, it’s not really ergonomic.

WPML give a php code to place in the code the put this langugage switcher where we want.
I want to put it next to the menu, so it looks like an item but it’s not one ! So, on a mobile device, it won’t be in the menu but outside of it and we will always see it, without opening the menu.

I took time to find where to place this php code but can’t find…. Can you help ?

Best,
Malo

[Theme Horse Support Team]

Hi Malo,
You can’t add next to the menu. It needs code customization. You need to hire a developer as this is a new feature to be added in the theme. You can try adding via footer sidebar.
Thank you!

[Malo Zollikofer]

I’m a developer so I should be able to do that 😉 If you can just give me a direction about a file or smth where I can start it would be cool !

[Theme Horse Support Team]

hi Malo,
Please add below code in child theme functions.php file

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

and go to theme folder -> library -> structure -> header-extension.php on line no 159 you will find below code.
<?php get_sidebar( 'header' ); ?> After this code paste below code.
<div id="flags_language_selector"><?php language_selector_flags(); ?></div >
and add below Custom CSS Code

.flags_language_selector {
	float: right;
	 margin: 9px 0 0 0;
}
#branding .searchform {
	float: left;
}

We recommended not to change the code because if you change the code then while updating to our new version all your customisation code will be lost. So better make child theme and first unhook the functions and the edit the code.

http://codex.wordpress.org/Child_Themes
Thank you

[Malo Zollikofer]

Thanks ! With your indication, I finally managed to do what I wanted 🙂

To maybe help other people, I changed the language_selector_flags function with:

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

To only show the language that wasn’t active (don’t wanted to show a french flag is the user was actually on the french version)

I placed: <div id="flags_language_selector"><?php language_selector_flags(); ?></div >

at the ligne 223 (in the child theme), like that:

echo '<nav id="access" class="clearfix">';
			echo		'<div class="container clearfix">';
				?><div id="flags_language_selector"><?php language_selector_flags(); ?></div ><?php
				wp_nav_menu( $args );
			echo '</div><!-- .container -->
					</nav><!-- #access -->';

So I had the flag inside the access and container div.

Finally, I used this CSS: `#flags_language_selector {
float: right;
margin-right: 10px;
margin-top: 5px;
}`

to have it at the right of the menu and looking aligned. I add some custom CSS to handle it correctly on the mobile view and I’m done !
Thanks for the help !

[Theme Horse Support Team]

You welcome Malo

Thank you!

[Author]

Posts