---
title: Language Switcher for Craft 3
date: 2018-07-23T13:40:00-04:00
author: cc_admin
canonical_url: "https://caffeinecreations.ca/blog/language-switcher-for-craft-3/"
section: Blog
---
![Flags](https://caffeinecreations.ca/uploads/hero/_1920x660_crop_center-center_none_ns/flags.jpg)

- [Code](https://caffeinecreations.ca/blog/category/code/), [Tutorial](https://caffeinecreations.ca/blog/category/code/tutorial/), [CraftCMS](https://caffeinecreations.ca/blog/category/craftcms/), [Craft Tips](https://caffeinecreations.ca/blog/category/craftcms/craft-tips/)

# Language Switcher for Craft 3

A quick and easy language switcher to use with Craft CMS version 3.

I'm working on a new site which needs to have English and French versions. Of course this means a language switcher is needed. For Craft 2 sites I used [this solution on Stack Exchange](http://craftcms.stackexchange.com/a/14306/193). However due to changes in Craft 3 this no longer works.

A little tweaking and it now works.

```

    <button class="absolute flex flex-col right-4 top-4" clipboard="" title="Copy to Clipboard" to="" type="button" x-clipboard.raw="{% set currentLanguage = currentSite.language %}

{# Decide which languages should be omitted from language links #}
{% set languageExceptions = currentSite.language %}
{% set otherLocales = craft.app.sites.getAllSites()|without(currentSite.id) %}

{% for site in otherLocales %}
  {% if site.id != currentSite.id %}

    {% if entry is defined %}
     {% set localeEntry = craft.entries.id(entry.id).siteId(site.id).one() %} 
    {% endif %}
    
    {% if localeEntry.siteId is defined and localeEntry.siteId != currentSite.id %}
        {# If entry is localized in other language go there #}
        <li>
          <a href="{{ localeEntry.url }}">{{ localeEntry.site.name }}</a>
        </li>
    {% else %}
      {# if not localized go to homepage #}
      <a href="/">{{ localeEntry.site.name }}</a>
    {% endif %}

  {% endif %}
{% endfor %}" x-data="">
      <svg class="h-6 w-6" viewbox="0 0 64 64" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
  <path d="M53.98 9.143h-3.97c-.082 0-.155.028-.232.047V5.023C49.778 2.253 47.473 0 44.64 0H10.217C7.384 0 5.08 2.253 5.08 5.023v46.843c0 2.77 2.305 5.023 5.138 5.023h6.037v2.268c0 2.67 2.216 4.843 4.941 4.843H53.98c2.725 0 4.942-2.173 4.942-4.843v-45.17c0-2.671-2.217-4.844-4.942-4.844zM7.11 51.866V5.023c0-1.649 1.394-2.991 3.106-2.991H44.64c1.712 0 3.106 1.342 3.106 2.99v46.844c0 1.649-1.394 2.991-3.106 2.991H10.217c-1.712 0-3.106-1.342-3.106-2.99zm49.778 7.29c0 1.551-1.306 2.812-2.91 2.812H21.195c-1.604 0-2.91-1.26-2.91-2.811v-2.268H44.64c2.833 0 5.138-2.253 5.138-5.023V11.128c.077.018.15.047.233.047h3.968c1.604 0 2.91 1.26 2.91 2.811v45.17z"></path>
  <path d="M38.603 13.206H16.254a1.015 1.015 0 1 0 0 2.032h22.35a1.015 1.015 0 1 0 0-2.032zM38.603 21.333H16.254a1.015 1.015 0 1 0 0 2.032h22.35a1.015 1.015 0 1 0 0-2.032zM38.603 29.46H16.254a1.015 1.015 0 1 0 0 2.032h22.35a1.015 1.015 0 1 0 0-2.032zM28.444 37.587h-12.19a1.015 1.015 0 1 0 0 2.032h12.19a1.015 1.015 0 1 0 0-2.032z"></path>
</svg>

          <div class="sr-only">
            Copy to clipboard
          </div>
    </button>
    ```twig

      {% set currentLanguage = currentSite.language %}

{# Decide which languages should be omitted from language links #}
{% set languageExceptions = currentSite.language %}
{% set otherLocales = craft.app.sites.getAllSites()|without(currentSite.id) %}

{% for site in otherLocales %}
  {% if site.id != currentSite.id %}

    {% if entry is defined %}
     {% set localeEntry = craft.entries.id(entry.id).siteId(site.id).one() %} 
    {% endif %}
    
    {% if localeEntry.siteId is defined and localeEntry.siteId != currentSite.id %}
        {# If entry is localized in other language go there #}
        <li>
          <a href="{{ localeEntry.url }}">{{ localeEntry.site.name }}</a>
        </li>
    {% else %}
      {# if not localized go to homepage #}
      <a href="/">{{ localeEntry.site.name }}</a>
    {% endif %}

  {% endif %}
{% endfor %}
    
```
  
```

The above code hides the current language from the switcher. If however you want to have the current language viewable at all times use this.

```

    <button class="absolute flex flex-col right-4 top-4" clipboard="" title="Copy to Clipboard" to="" type="button" x-clipboard.raw="{% set currentLanguage = currentSite.language %}

{% set otherLocales = craft.app.sites.getAllSites() %}

{% for site in otherLocales %}

    {% if entry is defined %}
     {% set localeEntry = craft.entries.id(entry.id).siteId(site.id).one() %} 
    {% endif %}

    {% if localeEntry.siteId is defined and localeEntry.siteId != currentSite.id %}
        {# If entry is localized in other language go there #}
        <li>
          <a href="{{ localeEntry.url }}">{{ localeEntry.site.name }}</a>
        </li>
    {% else %}
      {# if not localized go to homepage #}
      <a href="/">{{ localeEntry.site.name }}</a>
    {% endif %}

{% endfor %}" x-data="">
      <svg class="h-6 w-6" viewbox="0 0 64 64" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
  <path d="M53.98 9.143h-3.97c-.082 0-.155.028-.232.047V5.023C49.778 2.253 47.473 0 44.64 0H10.217C7.384 0 5.08 2.253 5.08 5.023v46.843c0 2.77 2.305 5.023 5.138 5.023h6.037v2.268c0 2.67 2.216 4.843 4.941 4.843H53.98c2.725 0 4.942-2.173 4.942-4.843v-45.17c0-2.671-2.217-4.844-4.942-4.844zM7.11 51.866V5.023c0-1.649 1.394-2.991 3.106-2.991H44.64c1.712 0 3.106 1.342 3.106 2.99v46.844c0 1.649-1.394 2.991-3.106 2.991H10.217c-1.712 0-3.106-1.342-3.106-2.99zm49.778 7.29c0 1.551-1.306 2.812-2.91 2.812H21.195c-1.604 0-2.91-1.26-2.91-2.811v-2.268H44.64c2.833 0 5.138-2.253 5.138-5.023V11.128c.077.018.15.047.233.047h3.968c1.604 0 2.91 1.26 2.91 2.811v45.17z"></path>
  <path d="M38.603 13.206H16.254a1.015 1.015 0 1 0 0 2.032h22.35a1.015 1.015 0 1 0 0-2.032zM38.603 21.333H16.254a1.015 1.015 0 1 0 0 2.032h22.35a1.015 1.015 0 1 0 0-2.032zM38.603 29.46H16.254a1.015 1.015 0 1 0 0 2.032h22.35a1.015 1.015 0 1 0 0-2.032zM28.444 37.587h-12.19a1.015 1.015 0 1 0 0 2.032h12.19a1.015 1.015 0 1 0 0-2.032z"></path>
</svg>

          <div class="sr-only">
            Copy to clipboard
          </div>
    </button>
    ```twig

      {% set currentLanguage = currentSite.language %}

{% set otherLocales = craft.app.sites.getAllSites() %}

{% for site in otherLocales %}

    {% if entry is defined %}
     {% set localeEntry = craft.entries.id(entry.id).siteId(site.id).one() %} 
    {% endif %}

    {% if localeEntry.siteId is defined and localeEntry.siteId != currentSite.id %}
        {# If entry is localized in other language go there #}
        <li>
          <a href="{{ localeEntry.url }}">{{ localeEntry.site.name }}</a>
        </li>
    {% else %}
      {# if not localized go to homepage #}
      <a href="/">{{ localeEntry.site.name }}</a>
    {% endif %}

{% endfor %}
    
```
  
```

## Other Articles You May Like

[![SVG Sprites and Twig Macros in Craft CMS Thumbnail](https://caffeinecreations.ca/uploads/hero/_680x234_crop_center-center_65_none_ns/rainbow-stones.jpg)### SVG Sprites and Twig Macros in Craft CMS](https://caffeinecreations.ca/blog/svg-sprites-and-twig-macros-in-craft-cms/)

[![Editing a Front End Form with Matrix Thumbnail](https://caffeinecreations.ca/uploads/blog/_680x234_crop_center-center_65_none_ns/code.jpg)### Editing a Front End Form with Matrix](https://caffeinecreations.ca/blog/editing-a-front-end-form-with-matrix/)