WordPress WPML Plugin Horizontal Language Switcher On Header


Hello, in this article I will show you how to turn vertical language switcher into horizontal language switcher and put it into the somewhere on the template. (Look at the picture below)

Before and After CSS Patch

Before and After CSS Patch


Step 1: CSS Modifications

Copy & paste the following css code into this location:
WP-Admin » WPML » Language switcher options » Additional CSS (optional)
[css]
#lang_sel_list {
width: 200px;
margin: 0 auto;
height: 19px;
}
#lang_sel_list ul {
width: inherit;
border: none;
}
#lang_sel_list li {
float:left;
width: 95px;
text-align:center;
border:none;
}
#lang_sel_list a, #lang_sel_list a:visited {
border-width: 1px;
margin-left: -1px;
}
#lang_sel_list a:hover {
background-color: #f1f0f0;
}
[/css]

Step 2: PHP Insertion on Template

“Copy and Paste” the following lines of php into the place where you want to display language switcher on the template file (header.php), or you can just add the language switcher as a sidebar widget.
[php]

[/php]

Please feel free to comment if there is something wrong or unclear in my article.

Note 1: WPML(The WordPress Multilingual Plugin) is a wordpress plugin that allows you make your wordpress site multi-language.

Note 2:
This solution has been tested on “WPML Multilingual CMS 2.4.0” on 23 October 2011 by yigith.

  1. #1 by Uldis Zalcmanis on 18 March 2011 - 06:28

    Hi Yigit! Thank you for wonderful post. I just can`t figure out which css I need to edit. It is really frustrating. I am not experienced coder. Could you please advise?

  2. #2 by Yiğit Hacıefendioğlu on 18 March 2011 - 10:11

    Hi Uldis, you just need to make modifications on two files:

    Here is where you can edit these files in the admin panel of the wordpress:

    A. Changing CSS File
    Follow this path:

    1. Login to WordPress Admin Panel
    2. Under Appearance
    3. Click Editor
    4. Find and Click Stylesheet (style.css) on the right
    5. Paste the CSS Code Provided Above at the bottom of the code textbox
    6. Click Update and first step is complete

    B. Changing Template File
    Follow this path:

    1. Login to WordPress Admin Panel
    2. Under Appearance
    3. Click Editor
    4. Find and Click Header (header.php) on the right
    5. Paste the PHP Code Particle Provided Above at the place on the
    6. Click Update and final step is complete

    Note: If these steps doesn’t work for you, please feel free to comment here. I will try to post an answer within 12 hours.

  3. #3 by Leo on 19 April 2011 - 10:22

    Hi Yiğit ! I have no idea why but I can not see the language switcher on my page ( I have a “monstertemplate” and they have the worst support service ever so they refuse to help me).

    I have pasted:

    on my header as you suggest so it looks like this:

    wp_head();
    ?>

    <body >

    But nothing appears on my page. Please help me! I don’t know what to do!

    Thanks!!!

  4. #4 by Yiğit Hacıefendioğlu on 19 April 2011 - 12:24

    Hie Leo, firstly thank you for posting your comment.

    I’ve checked out your website and I’ve confirmed that you’re currently using WPML 2.0.4.1. (which I am also using it).

    Could you try to add

    “< ?php do_action('icl_language_selector'); ?>”

    in between somewhere after the tag

    and tell me when you do it so that I can see if it make a change on the html code.

  5. #5 by Leo on 28 April 2011 - 04:18

    Hi Yigit! I have added it and there are no changes in the html code. I add it in the header php, but surprisingly nothing id modified no matter what I add or erase from this file.

    Could it be that there is a file that overruns this file (I have no idea of what im talking about but Ive been working on this for weeks and I cant get any result!!)

    This is a list of all the files in my editor:

    404 Template
    (404.php)
    Archives
    (archive.php)
    Attachment Template
    (attachment.php)
    Author Template
    (author.php)
    Category Template
    (category.php)
    Comments
    (comments.php)
    Footer
    (footer.php)
    Header
    (header.php)
    Main Index Template
    (index.php)
    One column, no sidebar Page Template
    (onecolumn-page.php)
    Page Template
    (page.php)
    Search Results
    (search.php)
    Sidebar
    (sidebar.php)
    Single Post
    (single.php)
    Tag Template
    (tag.php)
    Theme Functions
    (functions.php)
    loop-attachment.php
    (loop-attachment.php)
    loop-page.php
    (loop-page.php)
    loop-single.php
    (loop-single.php)
    loop.php
    (loop.php)
    sidebar-footer.php
    (sidebar-footer.php)
    Styles
    RTL Stylesheet
    (rtl.css)
    Stylesheet
    (style.css)
    Visual Editor RTL Stylesheet
    (editor-style-rtl.css)
    Visual Editor Stylesheet
    (editor-style.css)

  6. #6 by Yiğit Hacıefendioğlu on 28 April 2011 - 09:36

    I add it in the header php, but surprisingly nothing id modified no matter what I add or erase from this file.

    Hi Leo, is there a chance that you are making the modifications on the passive theme. Could you make sure that you select the current theme on the “Appearance > Editor > Select theme to edit (on the top-right of the page)”.

  7. #7 by Mindaugas on 16 August 2011 - 13:14

    Hi, thanks for css modifications, but my second language do not fit in one line

  8. #8 by Yiğit Hacıefendioğlu on 26 December 2011 - 12:34

    @Mindaugas, I updated the post. Please use the new code above. I’ve decreased the width of each language div.

    And please note that this code was tested on a new version wpml.

  9. #9 by Raimonds Platacis on 05 January 2012 - 02:28

    Ou, thank you very much for the tip. Finally solved it.

  10. #10 by Robin on 05 February 2012 - 10:33

    I want to use wpml in one site. I just have two language english and german – so i like to use as a click to change basis. i mean when someone click click english text then german text appear and samely repeat.

  11. #11 by Yiğit Hacıefendioğlu on 05 February 2012 - 11:00

    hey Robin, “lang_sel_sel” is the class name of the selected language. So you can hide it by copying and pasting the following code at the bottom of the css definitions.

    #lang_sel_list a.lang_sel_sel {
        display: none;
    }

    I would be happy if you let me know if this trick works for you. Thanks.

  12. #12 by Robin on 05 February 2012 - 11:13

    Many thanks for ur help –

    but its not work for me . here is my site links – where u can check also

    http://www.creativerobin.com/wordpress/

    i just want click to change basis – can u pls suggest me ?

    Again many thanks for ur feedback.

  13. #13 by Yiğit Hacıefendioğlu on 05 February 2012 - 11:15

    I’ve checked it, the code I provided should work. Please make sure that it overrides the the default css rule.

  14. #14 by Robin on 05 February 2012 - 12:44

    Hello mate,

    Thanks one second for ur gr8 help. I m really quite surprised !!!! – yes u r right. Its now work perfectly.

  15. #15 by Greg on 11 April 2012 - 08:36

    This is great! Thanks for sharing this! I’m just trying to figure out now how to get the language selector to align to the right of the header now. Any ideas?

  16. #16 by Yiğit Hacıefendioğlu on 11 April 2012 - 10:39

    @Greg, for your website, add the following three lines to the css class “lang_sel_list”:

    #lang_sel_list {
        .
        ..
        ...
        position: absolute;
        right: 5px;
        top: 72px;
    }
(will not be published)

Please leave these two fields as-is: