Multilingual Site Tutorial Using Blocks (No Plugins)

The WordPress block editor is continually opening up new possibilities for site customization. In this tutorial, we’ll look at using blocks to create site menus in two languages, and a language switcher to allow your visitors to change which language they view your site in.

You can see a demo of how this works here:

View Demo

In this guide

1. Notes and references
   1. References and Further Info
2. Method
   1. 1. Set up Pages and Page Slugs
   2. 2. Select the Layout for Your Menu and Language Switcher
   3. 3. Create the Language Switcher
   4. 4. Add a Navigation Menu for Your First Language Pages
   5. 5. Save Your New Menu and Language Switcher
   6. 6. Second Language Menu
   7. 7. Add Your New Menus to the Other Pages
   8. 8. Adding More Pages

Notes and references

• This language switcher will not translate your pages, but it will allow you to present your site to visitors in two or more languages. You will need to translate the pages yourself!
• This language switcher will only redirect users to the start page of each language.
• You will also need to update your menus if you add extra pages to your site.
• The initial setup takes a little time, but once it’s done, adjustments and updates are quickly completed.

References and Further Info

This tutorial makes use of the following functions:

• Page Slugs
• Parent and Child Pages
• Static Front Page
• Columns Block
• Paragraph Block
  • (Optional) Inline Images (available from the Paragraph Block toolbar)
• Navigation Block
• Pattern Blocks

Method

1. Set Up Pages and Page Slugs
2. Select the Layout for Your Menu and Language Switcher
3. Create the Language Switcher
4. Add a Navigation Menu
5. Save Your New Menu and Language Switcher
6. Second Language Menu
7. Add Your New Menus to the Other Pages
8. Adding More Pages

1. Set up Pages and Page Slugs

For this tutorial to work most effectively, we recommend using one of our Block Editor-compatible themes.

Go to My Site > Site > Pages. Begin by creating one start page for each language you would like to have on your site. You don’t need to add a lot of content just yet; a page title will be enough for now.

Publish each page so that it’s updated, and then change the Page Slug of each page so that it references its language. In this example, the French start page is titled Accueil, and has the page slug /fr/:

Assign your preferred language start page as the static front page for your site. This will ensure that visitors who come to your site will see the site in one language first, and be able to change to the other.

Once you have all of the start pages you need, create some other content pages for the different languages. You still don’t need to add content. It’s fine to just publish the page with a title only for now.

When creating these pages, assign them as Child Pages of your language start pages, using the Page Attributes section:

Example – page structure overview

In the following example, we have two language start pages: English and French. Each of them has two child pages – About and Contact for English, and À Propos and Contact for French:

2. Select the Layout for Your Menu and Language Switcher

In My Site > Site > Pages, click on the title of your primary language start page to open it in the WordPress editor.

Below the page title in the editor, add a Columns Block, and choose a two-column layout. If you change your mind about the layout you chose, don’t worry because you can change it in the block settings. See the Columns Block guide for more information on how to do this.

We suggest using a layout with one larger column and one smaller column. The smaller column will contain your language switcher and the larger column will contain your menu.

Set the Columns Block to wide or full width:

3. Create the Language Switcher

Depending how you’d like your language switcher to appear, there are two methods – you can either type the language names, or use inline images to display flags.

Note: We don’t recommend using flags to represent languages for two reasons:
1. It’s less accessible for visitors who may not be able to see the flag images
2. It can cause confusion depending on what flags your visitors associate with a specific language – not everyone thinks the same way!
For clarity, we recommend using text links (methods 1 or 2).

Method 1 – text links in a Navigation Block

You should now have two columns awaiting content. Click on the narrower column, and insert a Navigation Block:

Select Add all pages to automatically fill the block with your parent language start pages.

You can then alter the text of each item so it has the name of its language (or the shortened version.):

Method 2 – text links in a Paragraph Block

You should now have two columns awaiting content. Click on the narrower column, and add a Paragraph Block to it:

Type the language names in your preferred format, for example “EN” and “FR”, or “English” and “French”.

Highlight each language name, and click on the Insert Hyperlink button to link that language name with its start page. Example:

Using the language abbreviations:

Method 3 – inline images

You should now have two columns awaiting content. Click on the narrower column, and add a Paragraph Block to it:

If you have language flag images that you’d like to use, you can use the inline images function (available under More Options) to insert them, and link them:

Type a single space in your paragraph block to activate the block toolbar and show the More Options menu. When you select Inline Image, the media library/upload box will automatically open. Upload or select your flag. For further information on uploading or selecting an image, please view this document.

When the image is added, you can click on it to resize it:

You can then turn the image into a link, in the same way as you make a text link:

Repeat this process for the second language flag.

4. Add a Navigation Menu for Your First Language Pages

On the opposite column to your new language switcher, it’s time to add a Navigation Block. Click the empty column to open the block menu, and either search for Navigation or find it under the Layout Elements section:

The block will appear with two options – choose Create empty. You’ll see the block become ready for you to add your pages:

Add a link for each page in your first language. Click the Add Block button (the black “+” button) to the right of the navigation block to add an additional link:

5. Save Your New Menu and Language Switcher

Use the Block Navigation button at the top of the editor to select your columns:

Use the Columns Block Toolbar to view more options, and choose Create Pattern (formerly Add to reusable blocks):

Give your new pattern a name that makes it easy to identify, such as Menu – English. You can read more about how Patterns work in this guide.

Don’t forget to Update your page, to save the changes to the page too. Congratulations, your first menu and the language switcher are complete!

6. Second Language Menu

To create the menu for the second language, you could follow steps 1-5 again, or you can take a shortcut:

Open one of your second language pages in the WordPress editor. Click the Add Block button (the black “+” button) to add a new block to the page. In the list of blocks, click the Synced Patterns tab, where your menu is saved. Alternatively, use the search box to find it.

Once the menu block is added to that page, use the More Options menu to Convert to Regular Blocks:

Once the blocks appear as regular blocks instead of pattern, you can update the Navigation Block so that it instead links the pages of your second language.

Method 1 – remove and re-add a new Navigation Block

Select the Navigation Block using the Block Navigator:

Remove the entire Navigation Block:

Then follow step 4 above to re-add a clean Navigation Block for your second language

Method 2 – change navigation items

Click on the item you want to change. Click the ‘link’ button to open the link information, then click the Change button. You can then type and select the desired page. Please note, you will also manually need to change the text of the link:

When you’ve made the changes, save this new columns block as a new Pattern as in step 5 above, and give it a clear name indicating that it’s the menu for your second language.

Don’t forget to Update your page, to save the changes to the page too. Congratulations, your second menu and the language switcher are complete!

7. Add Your New Menus to the Other Pages

Your menus and language switcher are ready. You can now add your two language menus to the other pages for those respective languages, as described in step 6 above. Please note: once the patterns are saved, you can just add them to other pages, but you do not need to convert them to regular blocks.

8. Adding More Pages

Have you created more pages for each language, and need to add them to your menu? Not to worry, you can edit your patterns, and they will update on every page that they’ve been added to.