Hi, Amit here, I am the WPML Support Manager, our current ticket queue is quite calm and I'd like to encourage you to use our new chat support option

We are working hard to debug and look at every single report

All of the known issues are documented in https://wpml.org/known-issues/ you can also use our support search to find helpful information and of course review our documentation before opening a ticket.

We are also adding once a week a tutorial to our YouTube channel - https://www.youtube.com/c/WPML-multilingual - check out if we already covered what you need and leave us a comment if you want us to produce anything there

If you do need to open a ticket please make sure to provide us with all the needed information as described here https://wpml.org/faq/checklist-before-opening-a-ticket-in-wpml-support/

We are very proud at our level of support, we are one team from all over the world and we are all experienced WordPress developers, you can read more about us here - https://wpml.org/forums/supporters/

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 6 replies, has 2 voices.

Last updated by Rachel 6 years, 3 months ago.

Author Posts
September 20, 2012 at 8:43 pm #76198

Rachel

Hello,

I enjoy the functionality of this plug-in and recommend it to my friends. I mainly use the "footer language switcher preview" as the way to select the language because of the sleek look as part of the footer. I am wondering if I can put the language switcher preview in the header instead so that it sits on the top of the page. None of the options in "Choose where to display the language switcher widget:" seem to work and put the switcher in the header at the top of the page. I want to move the switcher to the top of the page on this website: hidden link.

Any advice will be appreciated.

September 21, 2012 at 6:15 am #76236

Anonymous

Dear Rachel,
you can put this code in the header.php of your theme where you want your language switcher to be

<div><?php do_action('icl_language_selector'); ?></div>

September 22, 2012 at 3:28 pm #76437

Rachel

Thank you for the response. This does move the language selector to the header, but I want the style to be the same as in the footer. Specifically, I want the selector in the header to be a bar with the language side by side to each other, not stacked. Is this possible to do? If so, what code do I need to put in the header?

Thanks.

September 24, 2012 at 6:34 am #76581

Anonymous

Hi Rachel,
hope you had a good weekend.

1) Put this in your functions.php

function custom_languages_list(){
$languages = icl_get_languages('skip_missing=0&orderby=code');
if(!empty($languages)){
echo '<div id="footer_language_list">

    ';
    foreach($languages as $l){
    echo '

  • ';
    if($l['country_flag_url']){
    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>';
    }
    if(!$l['active']) echo '<a href="'.$l['url'].'">';
    echo icl_disp_language($l['native_name'], $l['translated_name']);
    if(!$l['active']) echo '</a>';
    echo '
  • ';
    }
    echo '

</div>';
}
}

2) Put this in the header
<div> <?php custom_languages_list(); ?> </div>

3) Put this in your style.css

#footer_language_list{
margin-bottom: 25px;
text-align: center;
}

#footer_language_list ul{
list-style: none;
margin:0;
padding:0;
}

#footer_language_list ul li img{
margin-right:5px;
}

#footer_language_list ul li{
display:inline;
margin:0 5px 0 5px;
padding:0;
}

#footer_language_list ul li a, #footer_language_list ul li a:visited{
color: #fff;
text-decoration:underline;
}

#footer_language_list ul li a:hover, #footer_language_list ul li a:active{
color: #fff;
}

September 24, 2012 at 4:50 pm #76720

Rachel

Thanks Brooks.

We are getting closer. I appreciate your assistance. I added the code to the functions, header, and css files. The only thing left is to get the foreign display language title to show with the flag. Right now, 简体中文 does not display by the Chinese flag when on the English page (hidden link), and English does not display by the American flag when on the Chinese page (hidden link). Let me know what I need to do to get these titles to show.

Thanks.

September 25, 2012 at 6:59 am #76796

Anonymous

add this to your style.css

.icl_lang_sel_native{color:red}

September 25, 2012 at 4:32 pm #76947

Rachel

Thank you. I got it working. Just made a few tweeks to the css, but it is good to go.
Thanks.

The topic ‘[Closed] How To Put the language switcher preview in the Header?’ is closed to new replies.