Skip Navigation

Home › Support › English Support › [Closed] Custom language switcher in menu

[Closed] Custom language switcher in menu

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.

This topic contains 23 replies, has 3 voices.

Last updated by Harshad 6 years, 10 months ago.

Assigned support staff: Harshad.

Author Posts
March 3, 2014 at 6:57 pm #351138

Floris

I have this website: hidden link

Now i want to add a custom language switcher to the menu of the site. To see what i mean, please check the design image i uploaded in this topic.

So here is what i want:

1) Want the language switcher to be the text "NL | FR" in my menu.
2) I want to language switcher to be visible in the menu at all time. When you click on "NL" you go to the Dutch version, when you click on "FR", the French version
3) Would be great to have hover function on "NL" and "FR" and to have the selected version in bold. For example: NL is selected -> NL is bold.

Really if someone could tell me how to do this, would be awesome!

language-switcher.jpg
language-switcher.jpg
March 4, 2014 at 6:04 am #351268

Rupashree Mane Hadke

Hello Floris,

WPML comes with its own language switcher, implemented as a drop down list of languages.
You can build your own custom language switchers and insert them in the theme.
For building custom language switcher, please check the link:
http://wpml.org/documentation/getting-started-guide/language-setup/custom-language-switcher/

Thanks,
Rupa
March 6, 2014 at 10:12 pm #354013

Floris

I tried but still not the result i expect ...
March 7, 2014 at 7:03 am #354112

Rupashree Mane Hadke

Hello Floris,

Please add he following snippet to functions.php file of your theme.

function new_nav_menu_items($items,$args) {
if (function_exists('icl_get_languages')) {
$languages = icl_get_languages('skip_missing=0');
if(1 < count($languages)){
$items .= '<li class="menu-item">';
foreach($languages as $l){
if(!$l['active']){
$items .='<a href="'.$l['url'].'">'.strtoupper($l['language_code']).'</a> | ';
}
}
$items .= '</li>';
}
}
return $items;
}
add_filter( 'wp_nav_menu_items', 'new_nav_menu_items',10,2 );

Thanks,
Rupa
March 8, 2014 at 5:17 pm #354981

Floris

Getting closer, but still not quite there ...

I pasted the code in my functions.php file. I uploaded an image of the result i get. Really appreciate your help. (image: issue_language_switcher.png)

Problems:
- Language switcher still doesnt look as in example i uploaded (image: expected_result.jpg)
- Vertical bar is diplayed in white and not between NL | FR
- My sidebar with the menu is changed after pasting the code in my functions.php file. It has a rectangle under it now.

Hope you can help. Thanks in advance.

issue_language_switcher.jpg
issue_language_switcher.jpg
expected_result.jpg
expected_result.jpg
March 10, 2014 at 6:47 am #355405

Rupashree Mane Hadke

Hello Floris,

Please use the revised snippet.

function new_nav_menu_items($items,$args) {
if (function_exists('icl_get_languages')) {
$languages = icl_get_languages('skip_missing=0');
if(1 < count($languages)){
$items .= '<li class="menu-item">';
foreach($languages as $l){
$items .='<a href="'.$l['url'].'">'.strtoupper($l['language_code']).'</a> | ';
}
$items .= '</li>';
}
}
return $items;
}
add_filter( 'wp_nav_menu_items', 'new_nav_menu_items',10,2 );

Thanks,
Rupa
March 10, 2014 at 9:01 pm #356116

Floris

Hello Rupa

First of all, thanks for the help. I used your revised snippet and the switcher now looks like in the example i uploaded (image: result_uptillnow). Still some problems remaining.

Remaining problems:

1) I want NL | FR to be displayed next to each other, not underneath each other. (Like in uploaded image expected_result.jpg)
2) Want just one vertical bar between NL and FR and it should be black not white, now there s also a vertical bar displaying after NL | FR

Hope you can help. I embedded some code below.

Thanks in advance

My functions.php:
<iframe src="http://pastebin.com/embed_iframe.php?i=TWDNes57" style="border:none;width:100%"></iframe>

Related CSS:

Styles.css:
<iframe src="http://pastebin.com/embed_iframe.php?i=RxKmW9PE" style="border:none;width:100%"></iframe>

Style-custom.css:
<iframe src="http://pastebin.com/embed_iframe.php?i=ADdQNdzU" style="border:none;width:100%"></iframe>

Superfish.css:
<iframe src="http://pastebin.com/embed_iframe.php?i=hzjEMz7Y" style="border:none;width:100%"></iframe>

Result_uptillnow.jpg
Result_uptillnow.jpg
expected_result.jpg
expected_result.jpg
March 11, 2014 at 7:17 am #356286

Rupashree Mane Hadke

Hello Floris,

I need to request temporary access (wp-admin and FTP) to your site, In order to be of better help. You will find the needed fields for this below the comment area when you log in to leave your next reply. The information you will enter is private which means only you and I can see and have access to it.

Thanks,
Rupa
March 11, 2014 at 9:49 am #356424

Floris

Hello Rupa

I send you the access you required.

Grts
March 12, 2014 at 6:06 am #357158

Rupashree Mane Hadke

Hello Floris,

Thank you for submitting details, Upong further inspection I found that your theme's CSS code adds anchor tag to next line.

I have removed the anchor tag from code, you should see the language codes in menu are on same line now.

Please consult with your theme author, how to horizontal align the anchor tags in menu.

Thanks,
Rupa
March 13, 2014 at 8:10 pm #358677

Floris

Rupa

The change you made resulted that language switcher not to work anymore. Plus, NL FR is white color and there s no vertical bar in between anymore??
March 14, 2014 at 6:13 am #358834

Rupashree Mane Hadke

Hello Floris,

Yes, Its because I have removed the anchor tags for EN FR, to show you the difference the classes applied by your theme on anchor tags, which moves language switcher text on next line if we add anchor tags.

Please consult with your theme author, how to horizontal align the anchor tags in menu.

Thanks,
Rupa
March 16, 2014 at 4:03 pm #360095

Floris

Hello Rupa

This is the answer i received from the theme autor:

sorry , but without modify theme files , it will be not possible to add two menu in one line .

first add this css at end of style.css file :

ul.laka li{
display:inline-block;
}
ul.laka li a{
color:#000;
}

and save file .

now edit header.php file and change it as per following link :

hidden link
March 17, 2014 at 5:56 am #360218

Rupashree Mane Hadke

Hello Floris,

I have changed the code of language switcher to following, adjusted according to your theme authors suggestion

function language_selector_flags(){
    $languages = icl_get_languages('skip_missing=0&orderby=code');
    if(!empty($languages)){
        echo '<ul class="laka">';
        foreach($languages as $l){
            echo '<li><a href="'.$l['url'].'">';
            echo strtoupper($l['language_code']);
            echo '</a></li> ';
        }
        echo '</ul>';
    }
}

Then gave call in header.php

<?php language_selector_flags(); ?>

You need to still adjust CSS with help of your theme author.

Thanks,
Rupa
March 24, 2014 at 6:49 pm #366055

Floris

Rupa

I contacted my theme author and this is what they replied. Can you help?

Hi,

i have given you 100% working css, there some caching problem on your site and that's why it's not taking affect .

so please flush your caches , and remove those functionality which is creating caches .

Regards .

The topic ‘[Closed] Custom language switcher in menu’ is closed to new replies.