Find out how to create a multilingual WordPress sidebar without buying pro plugins.
For your information, I use the Polylang plugin to have a multilingual website. Unfortunately, you need to buy Polylang Pro to have a multilingual sidebar. But no worries, you can use simple CSS as a workaround to make it happen. However, I recommend that you install a Polylang plugin to have a proper multilingual website. You can visit their plugin page Polylang.
Now, let’s dive into the details. Here are the steps to create a multilingual sidebar
1. Create a Sidebar Widget
Navigate to the WordPress Dashboard, go to the left sidebar, click on Design and then on Widgets.
In the block called Sidebar, add & style the widget blocks according to your needs. Make sure that your widgets are in the main language of the site, or the language that the majority of visitors will be exposed to.
2. Assign a CSS Class to each Widget Block.
In each widget block, add a CSS class such as sidebar-en (the English version) where you want it to be displayed. Duplicate the widget blocks and update the CSS class to another language such as sidebar-de (German version).
When you’re done, don’t forget to save the widgets.
3. Customise CSS editor
Go to the Customiser in the left sidebar of the dashboard and then to the additional CSS editor.
You can paste this code into your CSS editor and adapt it to your style.
// Hide German widget blocks if the site is in English
html:lang(en-US) .sidebar-de {
display: none;
}
// Hide English widget blocks if the site is in German
html:lang(de) .sidebar-en {
display: none;
}Here is a brief explanation of the code
If you already have a multi-lingual website – you may have noticed that each page is assigned to a specific language, which opens in the corresponding language of the browser’s language settings. If your site is well designed, you will find the <html lang=”en-US”> (which stands for US English) in the backend. That’s why I use html:lang(en-US) in the CSS editor to hide (display:none;) the German widgets (.sidebar-de). With html:lang(de) in the second paragraph, it is the other way round. It is used to hide English widget blocks.
Now save the changes and refresh your site!
4. Your Multilingual WordPress Sidebar
Well done – after your site has been refreshed! You should have a working multilingual WordPress sidebar. Do a quality check to make sure everything is working as intended. Check each page where you want the sidebar to appear, and also in other languages of the same page.
I hope my descriptions were detailed enough for you to create a multilingual sidebar by yourself. If not, please let me know and we will find a way how to do it! You can reach out me here, if you have questions.