How to add language on top header in worldrpess năm 2024
your website’s multilingual navigator, allowing visitors to effortlessly explore content in different languages. It empowers your international audience to be able to select their preferred language when they are browsing your site. Show
A language switcher is essential for every multilingual website, particularly for public services and companies located in countries with multiple national languages such as Canada or Switzerland. Additionally, it plays a crucial role for international brands, multilingual WooCommerce sites, and the hospitality industry. Just try to picture Airbnb without a language switcher – they’d miss out on many international bookings and end up with frustrated users unable to access listings in their own language. Alright, it’s time to make your international audience happy with a functional language switcher. In this article, we show you four simple steps to add a language switcher to your WordPress site. How to Add a WordPress Language Switcher in 4 Simple Steps?The easiest way to add a language switcher to your WordPress site is to use the Polylang plugin. It’s the most popular, best-rated, and SEO-friendly WordPress Multilingual Plugin out there (+700K installations and 4.7/5 rating), and it’s for free. Here are four steps to follow to help international visitors in selecting their preferred language: 1. Installing Polylang
Installing Polylang from the WordPress admin
Adding languages to my site (and to my language switcher)
Selecting the default language if there is no target language
2. Deciding the Display Location for Your Language SwitcherNow that you have added all the languages to your WordPress site, it’s time to decide where to display your language switcher. The main navigation menu is usually the most popular place to have it, but we are also exploring a few other locations to keep your options open. Display the Language Switcher in the Navigation MenuThe main idea here is to create one language switcher per menu and language. In our case, we have three languages: French, English, and Italian so we will need to create 3 menus and a language switcher for each of them.
⚠️ Are you not seeing the Menus option under Appearance? You may be using a Block theme. Jump directly to the Site Editor section. Opening the Menus section to add a language switcher 💡Hint: if the language switcher is not showing in the menu, open the screen options at the top of the page and make sure the Language switcher box is checked. Opening Screen Options to show the language switcher in the navigation menu
Adding the language switcher to the main menu
Rename the menu
Setting the Primary menu as the language switcher location
Selecting the location for the French switcher
Dropdown language switcher in a few clicks with Polylang on the French page Repeat the action for each language. Let’s see a short example for English.
New English menu to add the language switcher
Selecting the location for the English switcher Repeat the same steps for all your other languages. Display the Language Switcher in a WidgetTo add a language switcher in a widget, go to Appearance > Widgets and click on the + icon to add the Language Switcher widget. You can choose to have it in the header, sidebar, or even the footer. We will select the Footer Bar Section 1 location. Adding a language switcher from the Widgets section You’ll find the exact same options explained previously, with an additional one: “The widget is displayed for” – which aims at specifying the language for which the switcher should be displayed. “The widget is displayed for” options for each language Display the Language Switcher in the Footer with LinksIf you want to add a basic language switcher with links in your Footer, you can also do it from the WordPress Customizer.
Adding a widget to the footer
Language Switcher widget from the Customizer
“Displays language names” option
Language switcher with links in the footer Display the Language Switcher in a Full Site Editing📖 Important – If you are using a block theme: If you are using a block theme like “Twenty Twenty-Four”, the Menus section customization is not under the Appearance section anymore. In that case, you have two options to display the language switcher:
3. Configuring Display OptionsWith Polylang, you have several options to adjust how the language switcher appears on your WordPress site. The configuration involves specifying how language options are displayed, such as dropdown menus, or side-by-side, for example.
Language switcher options There are different options to display the language switcher such as:
Hide the current language options In a few clicks, we improved our language switcher by making it more straightforward for our international visitors. Language switcher by default Customized language switcher: English hidden from the dropdown when some English content is displayed. 4. Customizing Language Order, Names, and Flags How to Change the Language Order In Polylang Language SwitcherYou can change the language order in the language switcher directly from your WordPress dashboard.
The Edit button from the Languages section
Field to change the order of languages in the language switcher How to Change the Language Name In Polylang Language Switcher.Here are the steps to customize the language name of your language selector:
Field to change the name of languages in the language switcher How to Add Custom Flags in Polylang Language SwitcherWhile Polylang offers flags by default, you can also add your custom flags in JPG, PNG, and SVG. Follow the steps below to make sure your flags will be properly displayed:
For example, if you want to upload a custom British flag, you’ll have to name it “en_GB”.
💡Hint: Avoid using the /wp-content/plugins/polylang/flags/ directory as your files will be removed upon the next update of the plugin. Locale name that must match the custom flag file name
Settings section to confirm the changes in flags
📖Want to dive deeper? There is a full documentation available that explains in detail how to add custom flags to the language switcher with Polylang. Now that you’re more familiar with Polylang and the different ways of adding a language switcher to your site. Get some inspiration from the best practices outlined in the next section. Displaying Language Switcher Best PracticesWithout any surprises, language switchers play a crucial role in providing a positive user experience for multilingual websites. Here are some best practices to follow when implementing language switchers:
|