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

Last updated by moussaK 1 year, 4 months ago.

Assigned support staff: Shekhar Bhandari.

Author Posts
May 23, 2018 at 9:34 am #2213802

moussaK

Hi,

I'm building a custom switcher using a twig template that opens in a overlay menu. The switcher is working fine but i would like to add the current language next to the menu icon. Is there a twig reference available that has all the available options like {{ language.css_classes }} or {{ language.url }} etc?

If not, how can i get the current active language in a twig template?

Thank you

May 24, 2018 at 7:13 am #2220070

Shekhar Bhandari
Supporter

Languages: English (English )

Timezone: Asia/Kathmandu (GMT+05:45)

Hello there,

Thank you for contacting WPML support. I'd be happy to assist you further on this issue.

You can use the following code to get the current language in the twig templates.

{%- if is_current -%}
{{ code|upper }}
{%- endif -%}

Also, here are few items that are available to use when using twig
code, url, flag_url, flag_title, native_name, display_name, is_current, css_classes, db_id, menu_item_parent, is_parent, backward_compatibility

Let me know if this helps.

Kind Regards,
Shekhar

May 29, 2018 at 9:02 am #2243688

moussaK

Hello Shekhar,

Sorry for the late response and thank you for your response.

Does the code you provided need to be inside the {% for code, language in languages %} for loop ?

I'm trying to show the current language next to the language switcher icon on the header which is outside of the for loop. I tried your code but it is did not work.

For reference, this is the template that i'm using. It works as intended except for the current language label that is so far missing

<div class="{{ css_classes }} sgg-language-menu-switcher">

    <a class="sgg-language-menu-button">
      <i class="sgg-language-switcher-icon fa fa-language fa-2x sgg-language-menu-open"></i>
      <span class="sgg-current-language">THIS IS WHERE I WISH TO SHOW THE CURRENT LANGUAGE!!!</span>
    </a>
</div>

<div class="sgg-language-menu-overlay overlay-door">
    <li><i class="sgg-language-menu-close"></i></li>
    <nav class="sgg-language-menu-content">
        <ul>
            {% for code, language in languages %}
  
                <li class="{{ language.css_classes }} sgg-language-switcher-item">
                    <a href="{{ language.url }}" class="{{ css_classes_link }}">
                        {% if language.flag_url %}
                            <img src="{{ language.flag_url }}" alt="{{ language.code }}" title="{{ language.flag_title }}">
                        {% endif %}
                        {{ language.native_name }}
                    </a>
                </li>
  
            {% endfor %}
            
        </ul>
    </nav>
</div>

Thank you

May 29, 2018 at 3:31 pm #2246892

Shekhar Bhandari
Supporter

Languages: English (English )

Timezone: Asia/Kathmandu (GMT+05:45)

Hello there,

When you are creating a twig template for the menu you shouldn't use those HTML tags, you can just use the following

{{ code|upper }}

Could you try without the HTML tags and let me know if that helps?

As it’s a menu template, you just need to render the content of the menu item element. Here we display the language code after it is processed by the twig upper filter (see documentation here hidden link).

Let me know if this helps.

Thanks

May 30, 2018 at 10:23 am #2250477

moussaK

Hello Shekhar,

I was able to get the result i was looking for using the code below.

{% for code, language in languages %}
        {% if language.is_current %}
            <span class"sgg-current-language">{{ language.native_name }}</span>
        {% endif %}
{% endfor %}

Thank you for your help.

Best regards,