badget

Happy New Year

Get 30% discount on all of our single themes with this coupon code: HAPPYHOLIDAYS

Hurry up! *Limited time offer*

Put WMPL Language switcher next to the menu

Tagged: , , ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #50419
    Malo Zollikofer
    Participant

    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

    #50443

    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!

    #50457
    Malo Zollikofer
    Participant

    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 !

    #50503

    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

    #50504
    Malo Zollikofer
    Participant

    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 !

    #50530

    You welcome Malo

    Thank you!

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.