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
  • Override language selector CSS
  • Override CSS on the WordPress back office
  • Override CSS using WordPress Hook
  • Don't load Weglot CSS file
  • Override language selector HTML Markup
  • Example: Rebuild the language selector from scratch
  • Change language selector title
  • Add class current-menu-item for language selector in menu
  1. WordPress
  2. Use cases

Language Selector Styling

Adding your own CSS code or HTML button

Override language selector CSS

You can add your own CSS rules to customize the language button. Weglot automatically adds a button in your page, that is either a dropdown or a list and will look like this:

<aside data-wg-notranslate class="country-selector weglot-dropdown weglot-default weglot-invert">
    <input id="weglot_choice" type="checkbox" name="menu">
    <label for="weglot_choice" class="wgcurrent wg-li weglot-flags flag-0 en" data-code-language="en">
        <span>EN</span>
    </label>
    <ul>
        <li class="wg-li weglot-flags flag-0 fr" data-code-language="fr">
            <a data-wg-notranslate href="http://example.com/">FR</a>
        </li>
    </ul>
</aside>
<aside data-wg-notranslate class="country-selector weglot-inline weglot-default weglot-invert">
    <input id="weglot_choice" type="checkbox" name="menu">
    <label for="weglot_choice" class="wgcurrent wg-li weglot-flags en" data-code-language="en">
        <span>English</span>
    </label>
    <ul>
        <li class="wg-li weglot-flags fr" data-code-language="fr">
            <a data-wg-notranslate href="http://example.com/fr/">Français</a>
        </li>
    </ul>
</aside>

You can use these classes to add your own rules. For example adding this in "Override CSS" to make the language name uppercase. :

.country-selector a {
    text-transform: uppercase;
}

Override CSS on the WordPress back office

You can add your custom CSS rules directly on your WordPress back office. To do that, connect you on your WordPress and go to: Weglot > Language button design (Optional) > Override CSS

Override CSS using WordPress Hook

This filter allows you to add custom CSS style by default without going through the settings.

<?php

add_filter( 'weglot_css_custom_inline', 'custom_weglot_css_custom_inline' );
function custom_weglot_css_custom_inline( $css_custom ){     
    $css_custom .= '.country-selector { background-color: red; }'; 
    return $css_custom;
}

Don't load Weglot CSS file

By default, the Weglot plugin loads the stylesheet /wp-content/plugins/weglot/dist/css/front-css.css. If you would prefer not to load the Weglot stylesheet, you can use the WordPress wp_enqueue_scripts filter as such:

<?php

add_action( 'wp_enqueue_scripts', 'custom_weglot_dequeue_style' );
function custom_weglot_dequeue_style() {
    wp_dequeue_style( 'weglot-css' );
}

Override language selector HTML Markup

The Weglot WordPress plugin contains a filter that allows you to modify the HTML structure of your language-switch button.

Hook parameters:

  • $button_html: String containing the switcher's HTML code before it is shown live.

  • $add_class: String containing the classes, separated by spaces, related to the switcher button's layout context and customizable options.

Example: Adding code before/after the button

The example below allows you to easily add HTML code before and/or after the button or use preg_replace()function on the selector HTML content.

<?php

add_filter( 'weglot_button_html', 'custom_weglot_button_html', 10, 2 );
function custom_weglot_button_html( $button_html, $add_class ) {

	$button_html = '<div style="border: 1px solid red;"><p>Choose your language:</p>' . $button_html . '</div>';

	return $button_html;
}

Example: Rebuild the language selector from scratch

If you'd like to make major changes to the HTML structure of your language button, you can start with the code below.

<?php

add_filter( 'weglot_button_html', 'custom_weglot_button_html' );
function custom_weglot_button_html( $html, $add_class = '' ) {

	$current_this        = weglot_get_service( 'Button_Service_Weglot' );
	$option_service      = weglot_get_service( 'Option_Service_Weglot' );
	$request_url_service = weglot_get_service( 'Request_Url_Service_Weglot' );
	$amp_service         = weglot_get_service( 'Amp_Service_Weglot' );
	$language_service    = weglot_get_service( 'Language_Service_Weglot' );

	if ( apply_filters( 'weglot_view_button_html', ! $request_url_service->is_eligible_url() ) ) {
		return '';
	}

	$original_language = weglot_get_original_language();

	$weglot_url           = $request_url_service->get_weglot_url();
	$amp_regex            = $amp_service->get_regex( true );
	$destination_language = weglot_get_destination_languages();

	$current_language = $request_url_service->get_current_language( false );

	if ( weglot_get_translate_amp_translation() && preg_match( '#' . $amp_regex . '#', $weglot_url->getUrl() ) === 1 ) {
		$add_class .= ' weglot-invert';
	}

	$flag_class  = $current_this->get_flag_class();
	$class_aside = $current_this->get_class_dropdown();

	$button_html = sprintf( '<!--Weglot %s-->', WEGLOT_VERSION );
	$button_html .= sprintf( "<aside data-wg-notranslate class='country-selector %s'>", $class_aside . $add_class );
	if ( ! empty( $original_language ) && ! empty( $destination_language ) ) {
		$current_language_entry = $language_service->get_language_from_internal( $current_language->getInternalCode() );
		$name                   = $current_this->get_name_with_language_entry( $current_language_entry );
		$uniq_id                = 'wg' . uniqid( strtotime( 'now' ) ) . rand( 1, 1000 );
		$button_html            .= sprintf( '<input id="%s" class="weglot_choice" type="checkbox" name="menu"/><label for="%s" class="wgcurrent wg-li weglot-lang weglot-language %s" data-code-language="%s"><span>%s</span></label>', esc_attr( $uniq_id ), esc_attr( $uniq_id ), esc_attr( $flag_class . $current_language->getInternalCode() ), esc_attr( $current_language->getInternalCode() ), esc_html( $name ) );

		$button_html .= '<ul>';

		array_unshift( $destination_language, $original_language );

		foreach ( $language_service->get_original_and_destination_languages( $request_url_service->is_allowed_private() ) as $language ) {

			if ( $language->getInternalCode() === $current_language->getInternalCode() ) {
				continue;
			}

			$link_button = $request_url_service->get_weglot_url()->getForLanguage( $language );
			if ( ! $link_button ) {
				continue;
			}

			$button_html .= sprintf( '<li class="wg-li weglot-lang weglot-language %s" data-code-language="%s">', $flag_class . $language->getInternalCode(), $language->getInternalCode() );
			$name        = $current_this->get_name_with_language_entry( $language );

			if ( $language === $language_service->get_original_language() &&
			     strpos( $link_button, 'no_lredirect' ) === false && // If not exist
			     ( is_home() || is_front_page() )
			     && $option_service->get_option( 'auto_redirect' )
			) { // Only for homepage
				if ( strpos( $link_button, '?' ) !== false ) {
					$link_button = str_replace( '?', '?no_lredirect=true', $link_button );
				} else {
					$link_button .= '?no_lredirect=true';
				}
			}

			$button_html .= sprintf(
				'<a data-wg-notranslate href="%s">%s</a>',
				esc_url( $link_button ),
				esc_html( $name )
			);

			$button_html .= '</li>';
		}

		$button_html .= '</ul>';
	}

	$button_html .= '</aside>';

	return $button_html;
}

Change language selector title

If you use the language selector in a menu with the "dropdown" option activated, then the title of the selector in the menu will be "Choose your language" in English. To change this text, you can edit the plugin's translation files, or use the following hook:

<?php

add_filter( 'weglot_menu_parent_menu_item_title', 'custom_weglot_menu_parent_menu_item_title' );
function custom_weglot_menu_parent_menu_item_title( $title ) {

	switch ( weglot_get_current_language() ) {
		case 'en':
			$title = 'Choose your language please';
			break;
		case 'fr':
			$title = 'Choisissez votre langue s\'il vous plaît';
			break;
	}

	return $title;
}

Add class current-menu-item for language selector in menu

If you use the language selector in a menu and you want the class "current-menu-item" to be present on the link of the current page in the selector, you must use the "weglot_active_current_menu_item" filter as follows:

<?php

add_filter( 'weglot_active_current_menu_item', '__return_true' );

Manage auto-redirect

If you use the auto-redirect option, you've to add replace no_lredirect with wg-choose-original in the code. If you don't do this you can't be enable to reach your original language.

PreviousWeglot translate on ElementorNextChange flag size

Last updated 2 months ago

Here's where you can find a description of this filter in the complete documentation of Weglot WordPress hooks:

https://developers.weglot.com/wordpress/filters/other-filters#hook-weglot_button_html