Skip Navigation

Home › Support › English Support › [Resolved] adding a custom link to custom language switcher - Elementor

[Resolved] adding a custom link to custom language switcher - Elementor

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

Last updated by Sumit 3 years ago.

Assisted by: Sumit.

Author Posts
May 31, 2022 at 10:59 am #11352361

Joe Barr

Tell us what you are trying to do?

I'm trying to add a custom link (external URL) to the WPML custom language switcher. The custom language switcher is on the page via a Elementor element not shortcode.

Is there any documentation that you are following?

I've been following this support post https://wpml.org/forums/topic/i-want-to-add-custom-link-to-the-language-switcher/

- my issue is that this code only works with WordPress native menus. We've tried other solutions to edit the php but can't get the custom language switcher to add a custom link.

Is there a similar example that we can see?

You can look at our staging site to see how the menu language switcher is currently loading. We've added now args to specify menu location yet.

Basically we need to know how to add the filter to the custom language switcher and not the menu_nav_items

What is the link to your site?

hidden link
May 31, 2022 at 12:56 pm #11353341

Sumit
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

Hi,

Thank you for contacting the support forum.

We don't have the filter to add a link to the language switcher but we have a filter where you can get the whole HTML of the language switcher and there you can append your HTML.

wpml_ls_html is the filter name it has three arguments HTML, Modal, and Slot. You can use Slot to find which language switcher it is and HTML to change it.

Please consider the below example:-
In this example, we are adding an external link to the language switcher only when the language switcher is assigned to the footer.

add_filter('wpml_ls_html', function($html, $modal, $slot){
	if (method_exists($slot, 'slug') && 'footer' == $slot->slug()) { //Check if slug is footer then only add link.
		$external_link = '<li><a href="<em><u>hidden link</u></em>">Example.com</a></li>'; //The link to add.
		$html = str_replace('</ul>', $external_link . '</ul>', $html); //Search for closing UL and replace it with link and closing UL.
	}
	
	return $html;
}, 10, 3);

I hope it helps!
June 1, 2022 at 7:36 am #11359505

Joe Barr

Thanks Sumit, this helps but I can't seem to find what language switcher it is using Slot.

Also, referring to the code that I was looking at before - that solution seems like a much better option in terms of understanding the active language. Here it is for you consideration: 

add_filter('wp_nav_menu_items', 'new_nav_menu_items', 10, 2);
function new_nav_menu_items($items, $args) {
     
    // get languages
    $languages = apply_filters( 'wpml_active_languages', NULL, 'skip_missing=0' );
  
    // add $args->theme_location == 'primary-menu' in the conditional if we want to specify the menu location.
    $dropdown_items = '';
    if ( $languages) {
  
        foreach($languages as $language){
            if(!$language['active']){
                 
                $dropdown_items .= '<li class="wpml-ls-slot-shortcode_actions wpml-ls-item wpml-ls-item-legacy-dropdown"><a class="wpml-ls-link" href="' . $language['url'] . '"> <span class="wpml-ls-native" lang="' . $language['language_code'] . '"> ' . $language['native_name'] . '</span></a></li>';
            }
            else {
                $active_language = '<li class="wpml-ls-slot-shortcode_actions wpml-ls-item wpml-ls-current-language wpml-ls-menu-item wpml-ls-first-item menu-item-type-wpml_ls_menu_item menu-item-object-wpml_ls_menu_item menu-item-has-children"><a title="' . $language['native_name'] . '" href="' . $language['url'] . '" class="js-wpml-ls-item-toggle wpml-ls-item-toggle"> <span class="wpml-ls-native" lang="' . $language['language_code'] . '"> ' . $language['native_name'] . '</span></a>';
                     
            }
        }
         
        /* Start - Custom Link */
        // Please update flag, name and link
        $custom_flag_url = "<em><u>hidden link</u></em>";
        $custom_language_name = "Mexico";
        $custom_language_link = "<em><u>hidden link</u></em>";
         
        $dropdown_items .='<li class="menu-item wpml-ls-item wpml-ls-menu-item"><a class="elementor-sub-item" href="' . $custom_language_link . '"><img src="' . $custom_flag_url . '" height="12" alt="" width="18" /> <span class="wpml-ls-native"> ' . $custom_language_name . '</span></a></li>';
        /* End - Custom Link */
         
        $final_switcher = $active_language. '<ul class="sub-menu elementor-nav-menu--dropdown sm-nowrap">'.$dropdown_items.'</ul></li>';
    }
  
    return $items.$final_switcher;
}
June 1, 2022 at 8:46 am #11360187

Sumit
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

Hi,

If this is the case then you can simply remove it from menu filter and convert into a shortcode so you can use it anywhere you like.

For example:-

Remove the filter 

add_filter('wp_nav_menu_items', 'new_nav_menu_items', 10, 2);

and register shortcode

add_action('init', function(){
	add_shortcode('my_wpml_custom_ls', 'new_nav_menu_items');
});

Then use it like 

[my_wpml_custom_ls]

If you have more questions about registering a WP shortcode, you can read this article hidden link
This is more of a WP generic question than a WPML, you can also take a look at our contractors https://wpml.org/contractors/

If anything related to WPML code, we are happy to help.

Thanks