• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Altitude Pro Navigation with WPML Flag Language Selector

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Internationalization and Translations › Altitude Pro Navigation with WPML Flag Language Selector

This topic is: resolved

Tagged: Altitude Pro, flag, multi-language, Translate, widget, wpml

  • This topic has 14 replies, 3 voices, and was last updated 8 years, 9 months ago by Erik D. Slater.
Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • June 6, 2015 at 12:37 am #155056
    Vasilis
    Member

    Hey awesome people,

    I'm trying to add a flag language selector function from WPML on my Altitude Pro theme.

    Did some research and came up to this function which seems to work ok, but needs a small detail to be perfect.

    The website is => http://cleancar.me

    The function I've been using to show the flag language selector near the navigation bar is below:

    //* Flags Language Selector WPML
    add_filter( 'genesis_nav_items' , 'flags_selector' , 10 , 2 );
    add_filter( 'wp_nav_menu_items' , 'flags_selector' , 10 , 2 );
    function flags_selector($menu, $args){
    $args = (array)$args;
    $flags = '';
    if ( $args['theme_location'] != 'primary' )
    return $menu;
    $lang = icl_get_languages('skip_missing=0&orderby=code');
    if( !empty($lang) ) {
    $flags .= '<div id="flags-selector">';
    foreach( $lang as $l ) {
    $flags .= '<div class="flag-item">';
    if( !$l['active'] )
    $flags .= '';
    $flags .= '<img src="'. $l['country_flag_url']
    . '" height="12" alt="' . $l['language_code']
    . '" width="18" title="' . $l['translated_name']
    . '" />';
    if ( !$l['active'] )
    $flags .= '
    ';
    $flags .= '</div>';
    }
    $flags .= '</div>';
    }
    return $menu . $flags;
    }

    And here is the CSS I'm using for this:

    /* Flag Language Selector
    ------------------------------------------------------------ */

    #flags-selector {
    float: right;
    padding-top: 5px;
    }

    .flag-item {
    display: inline;
    padding: 4px;
    }

    I would like to place the flags next to each other and all of them after the last button of the navigation bar

    WPML documentation suggests this:

    function language_selector_flags(){
    $languages = icl_get_languages('skip_missing=0&orderby=code');
    if(!empty($languages)){
    foreach($languages as $l){
    if(!$l['active']) echo '';
    echo ''.$l['language_code'].'';
    if(!$l['active']) echo '
    ';
    }
    }
    }

    which does not work....

    Any ideas on this would be highly appreciated!

    Kind Regards


    Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group

    http://http//cleancar.me
    June 6, 2015 at 12:49 am #155057
    Erik D. Slater
    Member

    It's the CSS for .genesis-nav-menu a that's screwing you up a bit here.

    Keep #flags-selector as you currently have it.

    Replace .flag-item with the following:

    .flag-item {
    	float: left;
    }
    
    .flag-item a {
    	padding-top: 4px;
    }
    

    Then tweak as required 🙂


    Erik D. Slater: Digital Platform Consultant • LinkedIn
    June 6, 2015 at 12:56 am #155058
    Vasilis
    Member

    AWESOME!

    Thank you Erik!!!

    That did the trick.

    Do you know how I can fix the scrolling black navigation bar after this?

    Try scrolling down and see how the flags change position again...

    Kindly appreciated!


    Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group

    June 6, 2015 at 1:12 am #155060
    Erik D. Slater
    Member

    HAH!! Didn't spot that one 🙂

    In the code I proposed for .flag-item a, change padding-top: 4px; to padding-top: 4px !important;

    Sorry about that 🙂


    Erik D. Slater: Digital Platform Consultant • LinkedIn
    June 6, 2015 at 1:26 am #155062
    Vasilis
    Member

    Ok that fixed the second flag,

    Still both of them scroll down as a whole,

    Should I add the same code to the first part of the CSS , #flags-selector...etc

    THANK YOU!!!


    Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group

    June 6, 2015 at 1:38 am #155068
    Erik D. Slater
    Member

    Riiiiiiiight 🙂

    Give this a whirl:

    .site-header.dark #flags-selector {
    	padding-top: 17px;
    }
    

    Erik D. Slater: Digital Platform Consultant • LinkedIn
    June 6, 2015 at 1:42 am #155069
    Erik D. Slater
    Member

    Also, lines 164 to 168 in style.css (the transition definitions) ... add #flags-selector to that list, i.e.

    a,
    input:focus,
    input[type="button"],
    input[type="reset"],
    input[type="submit"],
    textarea:focus,
    .button,
    .site-header.dark,
    #flags-selector {
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    }


    Erik D. Slater: Digital Platform Consultant • LinkedIn
    June 6, 2015 at 2:50 am #155076
    Vasilis
    Member

    KINDLY APPRECIATED!!!

    Added all of the new CSS lines.

    Unfortunately no result...

    Any ideas?


    Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group

    June 6, 2015 at 3:17 am #155081
    Erik D. Slater
    Member

    For #flags-selector, padding-top: 27px !important; needs to be padding-top: 27px;. The !important bit here is preventing the magic from happening 🙂


    Erik D. Slater: Digital Platform Consultant • LinkedIn
    June 6, 2015 at 3:22 am #155082
    Vasilis
    Member

    Awesome DONE!

    I can't express how much I thank you 🙂


    Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group

    June 6, 2015 at 3:30 am #155086
    Erik D. Slater
    Member

    Thanks man 🙂

    Of course ... there is still your Simple Social Icons issue to sort out ...


    Erik D. Slater: Digital Platform Consultant • LinkedIn
    August 17, 2016 at 3:41 am #191427
    Kitty
    Participant

    I am trying to find out if Altitude Pro is compatible with WPML. Can you confirm that?

    August 17, 2016 at 4:01 am #191430
    Erik D. Slater
    Member

    ellafitz: By "WPML", are you referring to the https://wpml.org/ plugin?

    Also, this may help: https://wpml.org/forums/topic/using-the-studiopress-genesis-altitude-pro-child-theme/.

    Generally speaking, there shouldn't be an issue with multilingual support for the Genesis child themes.

    Was there something specific that you were looking at or found, and which you think might be an issue?


    Erik D. Slater: Digital Platform Consultant • LinkedIn
    August 18, 2016 at 5:24 am #191518
    Kitty
    Participant

    Hi Erik,
    Yes I mean WPML.org

    Home


    And I do have an issue: on activating WPML plugin my blogposts and pages do not show up in de admin.
    Only content from widgets are shown.

    If I deactivate WPML Multilingual CMS they appear again in admin and in frontend.

    Could you please assist?
    Or should I perhaps enter a new ticket?
    Regards,
    Kitty

    August 18, 2016 at 5:57 am #191519
    Erik D. Slater
    Member

    Or should I perhaps enter a new ticket?

    Yessy ... since this will allow others to contribute to the discussion 🙂


    Erik D. Slater: Digital Platform Consultant • LinkedIn
  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.
Log In

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2025 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble