Quickly Create a Language Switcher for Your Gutenberg Site with Polylang

Ever wrestled with Polylang and Gutenberg, trying to get your translations just right? Or maybe you’re struggling to create a language switcher that actually works with your menus? This guide has the answers you’ve been searching for. Let’s make your website truly multilingual!

The Challenge of Multilingual Gutenberg Sites

Gutenberg Blocks and Translation

Okay, so you’re probably thinking, “Gutenberg and Polylang, what could go wrong?” Well, sometimes these two don’t exactly see eye-to-eye when it comes to translations. Here’s the deal:

• Some blocks just aren’t translation-friendly. Think of it like this: some blocks have bits of text baked right into their code. Polylang can’t always get in there and swap those out for different languages. This can make your translated pages look a bit wonky.
• Figuring out how to translate can be tricky. Even if a block can be translated, it’s not always obvious how to do it with Polylang. You might end up with duplicate content, missing translations, or just a general feeling of “what am I doing?!”
• Dynamic content adds another layer of complexity. Imagine a block that shows your latest blog posts. You need to make sure those posts are translated and that the block shows the right posts for each language. This can get pretty technical.

Basically, translating Gutenberg blocks can be like trying to fit a square peg in a round hole – sometimes it works, sometimes it needs a little extra finesse. But don’t worry, we’re here to help you smooth out those rough edges and get your translations working like a charm.

The Need for a User-Friendly Language Switcher

Alright, so you’ve got your site all translated and looking good. But how do your visitors actually switch between those different languages? That’s where the language switcher comes in.

Think of it like this: a language switcher is the doorway to your multilingual content. It’s gotta be easy to find, easy to use, and it should fit in nicely with the rest of your site’s design.

Here’s why a good language switcher is so important:

• No more lost visitors: Imagine someone landing on your site and not understanding a word. A clear language switcher helps them quickly find their preferred language and stick around to explore your content.
• Happy users, happy you: A smooth language switching experience makes your site feel polished and professional. It shows you care about your international audience, and that builds trust.
• Better navigation: A well-placed language switcher can actually improve your site’s navigation. Think of it as another way for visitors to find the content they’re looking for, no matter what language they speak.

But here’s the catch: creating a language switcher that ticks all those boxes can be tricky. Especially when you’re working with Gutenberg and its flexible menu options (like the WP Navigation block). You need a solution that’s both user-friendly and developer-approved.

Don’t worry, we’ve got you covered. In this guide, we’ll show you how to build a language switcher that’s not only functional but also looks great and integrates seamlessly with your Gutenberg menus.

Creating a Dynamic Language Switcher

Why a Shortcode is the Solution?

Alright, let’s talk language switchers. You want something flexible, right? Something that works seamlessly with Gutenberg and all its fancy menu options? Well, here’s the secret weapon: shortcodes.

Think of a shortcode like a tiny command that unleashes a whole bunch of code behind the scenes. You just drop a little something like [languageswitcher] into your page, and boom – you’ve got a fully functional language switcher without writing a single line of complex code.

Here’s why shortcodes are so awesome for this:

• They go anywhere. Sidebar? Page content? Inside a navigation menu? No problem! Shortcodes give you the freedom to put your language switcher exactly where you want it.
• No coding nightmares. Even if you’re not a coding whiz, you can handle shortcodes. They take care of all the messy HTML and PHP stuff, so you can focus on building your site.
• Easy peasy customization. Need a dropdown menu? Want to change the look of your switcher? Many shortcodes have options you can tweak to get things just right.

Basically, shortcodes are like little code ninjas that make your life easier. And when it comes to building a multilingual Gutenberg site, they’re the perfect way to create a language switcher that’s both powerful and user-friendly.

Create a Shortcode handle switch language

Time to make our language switcher work its magic! We’ll use a “shortcode” – a handy little shortcut that saves you from writing a bunch of code.

Here’s the gist:

1. The Shortcode: Just add [ polylang_switcher ] to your page, post, or widget.
2. Behind the Scenes: This shortcode triggers a special function that collaborates with Polylang to fetch your language options and display them in a neat dropdown menu.

That’s it! No need to mess with HTML or PHP. This shortcode takes care of everything, giving you a user-friendly language switcher without the coding headaches.

<?php

/**
 * Plugin Name:       Wolfactive Language Switcher
 * Description:       Adds a user-friendly language switcher to your WordPress site.
 * Version:           1.1.0
 * Author:            Your Name
 * License:           GPL-2.0+
 * Text Domain:       wolfactive-ls
 */

// Bail if accessed directly.
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

// Language switcher shortcode.
function wolfactive_language_switcher( $atts ) {

	// Require Polylang.
	if ( ! function_exists( 'pll_the_languages' ) ) {
		return __( 'Polylang plugin is not installed or activated.', 'wolfactive-ls' );
	}

	ob_start();
	?>

	<div class="wolfactive-language-switcher dropdown"> 
		<?php
		pll_the_languages( 
			array(
				'show_flags' => 1,
				'show_names' => 1,
				'dropdown'   => 1, 
			) 
		);
		?>
	</div>

	<?php
	return ob_get_clean();
}
add_shortcode( 'polylang_switcher', 'wolfactive_language_switcher' );

?>

Implementing the Language Switcher Shortcode

Alright, now for the fun part – let’s put our language switcher shortcode to work! Remember that little snippet of code we created? Now it’s time to unleash its power on your WordPress site.

Here’s how you can use it:

1. In your page or post content:
   • Open up the WordPress editor for the page or post where you want to add the language switcher.
   • Add a new block. You can use a “Shortcode” block, a “Paragraph” block, or really any block that allows you to enter text.
   • Simply paste the shortcode [ polylang_switcher ] into the block.
   • That’s it! Preview your page, and you should see a neat dropdown language switcher.
2. In a sidebar widget:
   • Go to Appearance > Widgets in your WordPress dashboard.
   • Drag a “Text” widget into your sidebar.
   • Paste the [ polylang_switcher ] shortcode into the widget’s content area.
   • Save the widget, and your language switcher will appear in your sidebar.
3. Directly in your theme’s code (for advanced users):
   • If you’re comfortable editing your theme’s files, you can add the shortcode directly into your theme’s templates. This gives you even more control over where the language switcher appears.

Important Note: This shortcode is designed to work seamlessly with the WP Navigation block. So, if you’re using that block to build your menus, you can simply add the shortcode to a “Custom Link” within your menu structure.

With this shortcode, you have the flexibility to place your language switcher wherever it makes the most sense for your website’s design and user experience.

Styling the Language Switcher

/* Basic Styling */
.polylang-switcher {
  /* Add some padding and a border */
  padding: 10px;
  border: 1px solid #ccc; 
}

/* Dropdown Styles */
.polylang-switcher.dropdown ul {
  display: none; /* Hide the list by default */
  list-style: none; /* Remove bullet points */
  margin: 0; 
  padding: 0;
}

.polylang-switcher.dropdown:hover ul { 
  display: block; /* Show the list on hover */
}

.polylang-switcher li {
  padding: 5px; 
}

/* Style the current language */
.polylang-switcher .current-lang {
  font-weight: bold; 
}

/* Style the links */
.polylang-switcher a {
  text-decoration: none; /* Remove underlines */
  color: #333; /* Example link color */
}

Explanation

• Basic Styling: We add some basic padding and a border to the language switcher container.
• Dropdown Styles: We hide the list of languages by default and then use :hover to show it when someone hovers over the switcher. This creates the dropdown effect.
• Current Language: We make the currently selected language bold.
• Link Styles: We remove underlines from the links and give them a color.

How to Use

1. Add Custom CSS: You can add this CSS to your theme’s style.css file or use a plugin like “Simple Custom CSS and JS” to add it without modifying your theme.
2. Customize: Feel free to modify the CSS to match your website’s design. You can change colors, fonts, spacing, and add background images to make it look exactly how you want.

With a bit of CSS, you can transform the basic language switcher into a stylish element that complements your website’s design.

Streamlining Multilingual Setup with a Simple Plugin

Okay, we’ve covered the basics of translating your content and creating a dynamic language switcher. But wouldn’t it be awesome if there was a tool that bundled all this functionality into one neat package?

Well, good news! There is.

Enter the Polylang Switcher plugin (find it on GitHub here: https://github.com/Canvilled/wolfactive-plugin). This lightweight plugin simplifies the entire process of setting up a multilingual WordPress site with Gutenberg.

Here’s what it brings to the table:

• Effortless Language Switching: The plugin provides a ready-to-use shortcode that generates a user-friendly dropdown language switcher. No need to write any code yourself!
• Seamless Integration: It works perfectly with Gutenberg and the WP Navigation block, allowing you to easily add the language switcher to your menus.
• Developer-Friendly: For those who like to tinker, the plugin’s code is clean, well-documented, and easy to customize.

Say goodbye to plugin overload and code headaches! This single plugin handles everything you need for a smooth multilingual setup.

How to use it:

1. Download the plugin from the GitHub repository.
2. Install and activate it on your WordPress site.
3. Use the [ polylang_switcher ] shortcode wherever you want the language switcher to appear.

That’s it! You’re now well on your way to creating a user-friendly, multilingual website with Gutenberg and Polylang.