Weglot
WebsiteGithubSlack
  • Developer Documentation
  • WordPress
    • Getting Started
    • Helpers Functions
    • Hooks
      • Translations Hooks
      • Other Hooks
    • Use cases
      • Lang attribute
      • Translate link
      • Implementing Custom Link Translation
      • Wp-rocket Lazyload
      • Deactivate Weglot on Elementor
      • Weglot translate on Elementor
      • Language Selector Styling
      • Change flag size
      • Exclude a Custom Post Type
      • Exclude the search page
      • Exclude draft or private status post
      • Plugin Woocommerce: Translate all email sent to customers
      • Plugin WooCommerce: Translate Product URLs
      • Use custom language code (URL, lang and hreflang attribute)
      • Theme OceanWP: Use language selector in the main menu
      • Theme Avada: Use language selector in the main menu
      • LinkedIn Share Post: Translate oEmbed WP URL
      • Hide button on excluded page
      • Auto switch only for HomePage
      • Proxify Url
      • Translate pdf for Woocommerce pdf invoice
      • Translate pdf with Gravity pdf
      • Translate Dublin core meta (or other meta)
      • How to not translate specific ajax action
      • How to get translated url programmatically
      • How to set WP locale based on Weglot current language
      • How to translate mail from Photo Reviews for WooCommerce
      • How to translate schema from schema.org generate by Yoast plugin
      • How to translate email sending by plugin WP Mail SMTP
      • How to hide the Weglot admin button for non administrator roles
      • Exemple of snippet to translate search from JetSearch plugin
      • Example of snippet to translate your checkout element (override/added by the Funnel Builder plugin)
      • LScache
      • How to fix live builder issue with Weglot
      • Add translated url to Rankmath sitemap index
      • Advanced Woo Search X Weglot
      • Conditionally Disabling Weglot Translation for Specific URLs
    • Weglot filters
      • weglot_translate_email
      • weglot_cancel_init
      • weglot_translate_email_languages_forced
      • weglot_menu_parent_item_title
      • weglot_active_current_menu_item
      • weglot_ajax_no_translate
      • weglot_active_translation_before_process
      • weglot_active_translation_before_treat_page
      • weglot_debug_file
      • weglot_autoredirect_only_home
      • weglot_autoredirect_skip
      • weglot_remove_google_translate
      • weglot_add_hreflang
      • weglot_get_replace_modify_link
      • get_replace_modify_link_in_xml
      • weglot_get_flag_class
      • weglot_get_name_with_language_entry
      • weglot_get_class_dropdown
      • weglot_button_html
      • weglot_get_dom_checkers
      • weglot_replace_div_id
      • weglot_replace_weglot_menu
      • weglot_render_default_button
      • weglot_render_switcher_editor_button
      • weglot_href_lang
      • weglot_get_options_from_cdn_cache
      • weglot_get_options_from_cdn_cache_duration
      • weglot_get_slugs_from_cache
      • weglot_get_slugs_cache_duration
      • weglot_exclude_blocks
      • weglot_exclude_urls
      • weglot_get_parser_ignored_nodes
      • weglot_navigator_language
      • weglot_url_auto_redirect
      • weglot_replace_url
      • weglot_replace_link
      • weglot_ajax_replace_urls
      • weglot_proxify_urls
      • weglot_add_json_keys
      • weglot_json_treat_page
      • weglot_html_treat_page
      • Copy of weglot_xml_treat_page
      • weglot_render_dom
      • weglot_default_current_language_empty
    • Algolia integration
  • Proxy
    • Headers
  • Javascript
    • Getting Started
    • Options
    • Javascript functions
    • Language link Hooks
    • Translate iframe
    • Advanced concepts
      • Translation engines
  • CMS Specific
    • Shopify
  • API
    • Reference
  • Cookies
Powered by GitBook
On this page
  • Example - Anchor
  • Example - Fake link
  • Example: create your own switcher
  1. Javascript

Language link Hooks

Using Weglot links hooks to create your own language switcher

By default, Weglot will show a language switcher on your page. Either on the bottom-right side or where it has been set through the switchers options. In some cases, you might want to not use Weglot's switcher at all and use menu entries from the CMS you're integrating in. You might also want to create your own switcher and not use Weglot's CSS.

When Weglot gets initialized, every link that matches one of these two CSS selectors will be "hooked" to a Weglot.switchTo action automatically:

  • a[href='#Weglot-xx']

  • a[href$='change-language.weglot.com/xx']

... where xx is the ISO-639-1 code of the target language

When the links are "hooked", the original href attribute also gets removed, and the class weglot-link is added to them. The current language also has the class weglot-link--active

Example - Anchor

I want to use the native menu feature of my CMS. Let's say my original language is English, and I want to translate to French and Spanish.

My menu would have 3 entries, as follows:

Text

Link

English

#Weglot-en

Français

#Weglot-fr

Español

#Weglot-es

I have now a "native" language switcher that works for all these languages. If I need to apply specific styling to the current language, I can target the weglot-link--activeclass.

Example - Fake link

Sometimes, some CMS you will be using won't allow for anchor links in the menu (e.g. Wix). In this case, you can use fake links that will be replaced when Weglot initializes:

Text

Link

English

http://change-language.weglot.com/en

Français

http://change-language.weglot.com/fr

Example: create your own switcher

function() {
    // CHANGE THIS SELECTOR to the element you want to add your custom switcher to.
    var myDiv = document.getElementById("myDiv");
    
    if (!Weglot) {
        return;
    }

    //Create array of options to be added
    var availableLanguages = Weglot.options.languages
        .map(function(language) {
            return language.language_to;
        })
        .concat(Weglot.options.language_from);
    
    //Create and append select list
    var selectList = document.createElement("select");
    myDiv.appendChild(selectList);
    
    var currentLang = Weglot.getCurrentLang();
    
    //Create and append the options
    for (var i = 0; i < availableLanguages.length; i++) {
        var lang = availableLanguages[i];
        var option = document.createElement("option");
        option.value = lang;
        option.text = Weglot.getLanguageName(lang);
        if (lang === currentLang) {
            option.selected = "selected";        
        }
        selectList.appendChild(option);
    }
    
    selectList.onchange = function(){
        Weglot.switchTo(this.value);
    };
    
    Weglot.on("languageChanged", function(lang) {
        selectList.value = lang;
    });
}()

PreviousJavascript functionsNextTranslate iframe

Last updated 4 years ago