Language switcher

A language switcher lets visitors move to the same page in another language. Signocore Multilanguage offers five ways to add one, and they all print the same markup with the same stylesheet.

The settings on Signocore ML → Switcher only apply to the menu integration. The block, the widget, the shortcode and the function each have their own settings.

What the switcher shows

• On a post, page or other single item, each language links to that item's translation. Languages without a published translation are left out.
• On a static front page, the posts page and the WooCommerce shop page, the links go to the translations of those pages.
• On other pages, such as archives and search results, each language links to the same address in that language.
• The current language is shown, but not as a link.
• With the Domain URL strategy, languages without a domain are left out. See Language URLs.

The shortcode and the function can also list languages without a translation, see Shortcodes, blocks and widgets.

Styles and language text

The language text sets what each language is called:

The block, the widget, the shortcode and the function start with Dropdown, the native name and flags. Flags Only always shows flags without text.

Block

1. In the block editor or the site editor, click the inserter (+) and search for "Language Switcher". It sits in the Signocore category.
2. Insert it where you want it, for example in your header template part.
3. In the block's Settings panel, choose the Style, the Language text and whether to Show flags.

The block can be aligned left, center or right, and takes extra CSS classes like other blocks.

Widget

1. Go to Appearance → Widgets.
2. Add the Signocore Language Switcher widget to a widget area. In a block-based widget area, you can add the Language Switcher block instead.
3. Fill in the widget fields: Title:, Style:, Show flags and Language text:.
4. Save the widgets.

Shortcode

Add the shortcode to a post, a page or any area that runs shortcodes:

[signocore_language_switcher]

Attributes change the look, for example a list with native names and no flags:

[signocore_language_switcher style="list" display="native" show_flags="false"]

Shortcodes, blocks and widgets lists every attribute with its values and default.

Add the switcher to a menu

The menu integration adds language links to your classic menus without a widget or code.

1. Go to Signocore ML → Switcher.
2. In the Language Switcher card, choose the Switcher Style, whether to Show Flags, and the Language Text.
3. In the Menu Integration card, tick the menus under Add to Menus.
4. Under Position, choose End of menu or Start of menu.
5. Click Save Changes.

How the links appear in the menu:

• Dropdown adds one menu item with the current language and a submenu with all languages. Your theme styles it like its other submenus.
• Horizontal List and Inline add one menu item per language. Inline puts a vertical line between the languages.
• Flags Only adds one menu item per language with a flag.

In a menu, languages without a translation of the current page are always left out, and nothing is added when only one language would be left. If a menu you tick has translations, the translated menus get the language links too. See Menus.

Note: The menu integration works with classic menus, which your theme shows in a menu location. In a block theme, add the Language Switcher block to your header instead.

PHP function

In a theme template, print the switcher with signocore_language_switcher(). It returns the HTML, so echo it. Wrap the call in function_exists(), so the theme keeps working if the plugin is inactive:

<?php
if (function_exists('signocore_language_switcher')) {
    echo signocore_language_switcher([
        'style' => 'inline',
        'display' => 'short_code',
        'show_flags' => false,
    ]);
}
?>

The function takes the same options as the shortcode attributes, with true and false as real booleans. See Template functions.

Customize with CSS

The switcher's stylesheet is neutral on purpose: it takes your theme's font and text color and only adds spacing and shape. The open list of the Dropdown style has a white background with dark text.

To style one switcher without touching the others, give it a class of its own: class="site-switcher" in the shortcode, 'class' => 'site-switcher' in the function, or an extra CSS class on the block. This example gives a dropdown dark colors, for a dark header:

.site-switcher.sml-switcher-dropdown .sml-switcher-list {
    background: #1b1f26;
    border-color: #2a2f38;
}

.site-switcher.sml-switcher-dropdown .sml-switcher-list .sml-switcher-link {
    color: #f5f6f8;
}

.site-switcher.sml-switcher-dropdown .sml-switcher-list .sml-switcher-link:hover {
    background: rgba(255, 255, 255, 0.08);
}

Add the CSS to your theme's stylesheet or to Additional CSS in the Customizer or the site editor. The shortcode accepts one class name.

Developers can change the links with signocore_ml_language_links, or replace the HTML with signocore_ml_switcher_html.