Polylang free version with theme Twenty Twenty Two

Hi Michel,

I have the same question as you, if you find a solution can you let me know?
I have the new editor Beta of WordPress and the theme Twenty Twenty-Two, I can translate with Polylang the pages but I can’t find the way to add the language selector in the menu as the new editor doesn’t have the editor : Appearance — Menu

Thank you

Hi Raquelbr,

I think, I will have a solution. I need some more time to work it out. But I am not an experimented programmer and if I publish something it will be with a notice of caution.

I will not be able to integrate it into the navigation, at this time. I intend to place (at the header level) within a Line Block both the Navigation Block and a Short Code Block. This short code will display the switcher next to the navigation. It is easy to add a short code to the functions.php file of the theme, preferably of a child theme.
The function of my short code, when it will work, will more or less reproduce the php, javascript and css codes of Polylang and produce a list or/and a drop-down. Polylang indicates a way for developers to create their own switcher and I think I can do it, if I work hard and put enough hours into it.
I will keep you posted if it works.
Regards

Hi Raquelbr,

I have a solution. But, again, I am not an experimented programmer and if you decide to use it you have to be aware that I might have done something wrong. I have tested it on my site, using 2 languages, and everything works fine for me. At this time, the switcher is limited to the dropdown solution with language names.

1) At the place where you want the switcher to appear, probably within the header and next to the navigation (the menu), include a Short-Code Block. The name of the short code is [langages].
2) Open the functions.php file of the theme (preferably a child theme) and paste at the end the following code :

function languages_func(){$translations = pll_the_languages( array( 'raw' => 1 ) );						 
	$translations = pll_the_languages( array( 'raw' => 1 ) );
	$x = 0;
	$cba =	'<select name="lang_choice_1" id="lang_choice_1" class="pll-switcher-select" style="font-size: 13.3333px !important;">';			  
	while($x < count($translations)) {
		$langurl = array_column($translations, 'url');
		$langname = array_column($translations, 'name');
		$selection = array_column($translations, 'current_lang');		
			if ($selection[$x]) {$y = $x;}
			else {
				  $cba = $cba . '<option value=' . $langurl[$x] . ' style="font-size: 13.3333px !important;">' . $langname[$x] . '</option>';
				 }
  	$x++;		
	}
	$cba = $cba . '<option value=' . $langurl[$y] . ' selected="selected"' . ' style="font-size: 13.3333px !important;">' . $langname[$y] . '</option>';					  
	$cba = $cba . '</select> <script type="text/javascript">
					//<![CDATA[
					document.getElementById( "lang_choice_1" ).addEventListener( "change", function ( event ) { location.href = event.currentTarget.value; } )
					//]]>
				</script>';					  

	return ($cba);
}
add_shortcode( 'languages', 'languages_func' );

I will work now on my switcher to include the other possibilities of Polylang.
I am available to answer your questions if any. Give me a feedback, I would appreciate.
Regards

Hi Michel,
Thank you so much for your explanations.
I will have a try next week, I have to say I don’t really know about programming language, but i will study this carefully in order not to destroy my website.

Thanks so much again and I will let you know if I am successful.
Raquel

Hi raquelbr,

if you need, I am available to guide you step by step, just let me know.
Michel

Hi raquelbr,

I have corrected a bug, please find below the corrected code :

function languages_func(){$translations = pll_the_languages( array( 'raw' => 1 ) );						 
	$translations = pll_the_languages( array( 'raw' => 1 ) );
	$x = 0;
	$cba =	'<select name="lang_choice_1" id="lang_choice_1" class="pll-switcher-select" style="font-size: 13.3333px !important;">';			  
	while($x < count($translations)) {
		$langurl = array_column($translations, 'url');
		$langname = array_column($translations, 'name');
		$languageslug = array_column($translations, 'slug');
		$selection = array_column($translations, 'current_lang');		
			if ($selection[$x]) {$y = $x;}
			else {
				  $cba = $cba . '<option value=' . $langurl[$x] . ' style="font-size: 13.3333px !important;">' . $langname[$x] . '</option>';
				  $cba = $cba . '<script type="text/javascript">				  
				  document.getElementById("menu" + "' . $languageslug[$x] . '").style.display = "none";			  
				   </script>';
				 }
  	$x++;		
	}
	$cba = $cba . '<option value=' . $langurl[$y] . ' selected="selected"' . ' style="font-size: 13.3333px !important;">' . $langname[$y] . '</option>';					  
		$cba = $cba . '</select> <script type="text/javascript">
					//<![CDATA[
					document.getElementById( "lang_choice_1" ).addEventListener( "change", function ( event ) { location.href = event.currentTarget.value; } )
					//]]>
				</script>';				  

	return ($cba);
}
add_shortcode( 'languages', 'languages_func' );

Also, I should have told you about the menus. Probably you want to have a different menu for each language. For my short code to handle this, you need to have as many navigation blocks as you have languages. All together at the same place, probably the header. Each of these navigation blocks should be inside a different group block with an Anchor of the form menuxx where xx is the code of the specific language, for example en for English. The short code will hide all of them except the one corresponding to the language of the current page.

Finally, I recommend : you back up your site, you use a child theme, you use a security plugin.
Regards

• This reply was modified 2 years, 6 months ago by michel.b.

Thanks @michelb-1, this seems to work for me! Just adding multilingual menus now…

Okay, multilingual menus seem to work as well (once I got the hang of converting them to groups).

But the switcher always takes you to the front page rather than the page you were looking at? That’s not what I was hoping for – I wonder if it would be feasible to change this?

Hmm… I’ve made a test page with all the language menus, but it’s only hiding the Spanish one. Any idea what I’m doing wrong?

Thank you!

Hi Oolong,

1) all what my shortcode does is make the switcher appear. I have not touched the way pll finds the translations. If you are directed to the front page is it possible that pll does not function very well. Try to reinstall pll. If it does not solve the problem, try to create a new post and its translation and see if it works for this new post. Let me know the result.
2) for the problem of the missing switcher, it looks like a mistake that exist on this page and not on the others. I will need a little more time to inspect your pages. I will get back to you asap.

Regards

Thanks Michel!

1) Silly mistake – my test page is only officially “in English”! If I add the switcher to other pages, it goes to the right place.

2) If I make the menus part of the page template (which makes sense anyway, of course) it correctly hides all but the relevant one, I think!

So… I think this is just about working now!

Uh oh… my site is heavily based on pages rather than posts, so I only just realised that on posts, all the menus are visible!

Do you have different headers for posts and pages? Look at the differences between the two to find out what’s wrong in the header for posts.

If there were different headers, I don’t think it would be listing multiple menus at all! It’s somehow rendering the same template part differently?

The test page has changed : the switcher is no longer in the header but below and the menu appears twice. This why the post page does not show the switcher and displays all the menus.