Language Selector Styling
Adding your own CSS code or HTML button
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:
Dropdown
List
<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;
}
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
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;
}
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' );
}
The Weglot WordPress plugin contains a filter that allows you to modify the HTML structure of your language-switch button.
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
- $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.
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;
}
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;
}
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;
}
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' );
Last modified 2yr ago