> For the complete documentation index, see [llms.txt](https://developers.weglot.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developers.weglot.com/wordpress/use-cases/language-selector-styling.md).

# Language Selector Styling

#### Override language selector CSS

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

{% tabs %}
{% tab title="Dropdown" %}

```markup
<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>
```

{% endtab %}

{% tab title="List" %}

```markup
<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>
```

{% endtab %}
{% endtabs %}

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

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

#### Override CSS on the WordPress back office

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

#### Override CSS using a WordPress hook

This filter lets you add custom CSS by default, without going through the settings.

```php
<?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 the 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 it, you can dequeue it with the `wp_enqueue_scripts` action:

```php
<?php

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

#### Override the language selector HTML markup

The Weglot plugin exposes a filter that lets you modify the HTML structure of your language-switch button. See the reference: [weglot\_button\_html](/wordpress/helpers-functions-1/weglot_button_html.md).

**Hook parameters**

* `$button_html`: string containing the switcher's HTML before it is rendered.
* `$add_class`: string containing the classes (space-separated) related to the switcher's layout context and options.

**Example: add code before/after the button**

The example below adds HTML before and/or after the button (you can also run `preg_replace()` on the selector's HTML).

```php
<?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 from the code below.

{% hint style="info" %}
This example mirrors the plugin's built-in button. It is a starting point — keep an eye on it across plugin updates, as the internal markup can evolve.
{% endhint %}

```php
<?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 ( ! $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();

	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, 'wg-choose-original' ) === 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( '?', '?wg-choose-original=true', $link_button );
				} else {
					$link_button .= '?wg-choose-original=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 the language selector title

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

```php
<?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 the current-menu-item class to the selector in a menu

If you use the language selector in a menu and want the **`current-menu-item`** class to be present on the current page's link in the selector, use the **`weglot_active_current_menu_item`** filter:

```php
<?php

add_filter( 'weglot_active_current_menu_item', '__return_true' );
```

{% hint style="info" %}
When the auto-redirect option is enabled, the original-language link carries a `wg-choose-original` query parameter so visitors can reach the original language without being redirected again. If you rebuild the button yourself (see above), keep that parameter on the original-language link.
{% endhint %}