https://idea-hack.com/en/blog/38952/
How to implement a switch button in the header when doing multi-language deployment with Bogo

How to implement a switch button in the header when doing multi-language deployment with Bogo

Introduces how to create a button to switch to the top page of each language, which is useful when developing multilingual sites using Bogo.

There was a multilingual site construction work related to WordPress.

Multilingual sites are significant to broaden your target, whether corporate or personal. Potential customers increase accordingly.

I hate plugins that change the default database structure of WordPress, so I use “Bogo.”

This plugin only includes language settings in post_meta (in short, custom fields), so it can be used without modifying the core WordPress functions.

I will talk about the goodness of this plugin at another time. To use this plugin, I had to create one original function.

There is no button to switch to the top page of each language

Of course, Bogo has a language switching widget.

php
<?php echo do_shortcode( '[ bogo ]' ); ?>

This widget has the following characteristics.

  • Outputs a link to the page for each language of the page
  • When a supported language has been created, it is displayed with a link
  • When no supported language has been created, only text is displayed

However, the language switching function I was looking for is as follows.

  • Output a link to the top page of each language on any page

Create a switch button to the top page of each language

Since Bogo did not have the corresponding function, I decided to make my own.

Nonetheless, Bogo has a lot of useful functions, and it was completed simply by creating a function using the built-in functions of Bogo.

Completed code

php
function bogo_available_url_for_menu( $responsive_class ) {
	$bogo_available_locales = bogo_available_locales();
	$bogo_get_default_locale = array( bogo_get_default_locale() );
	$bogo_available_locales = array_diff( $bogo_available_locales, $bogo_get_default_locale );
	?>
	<div class="btn-group <?php echo esc_attr( $responsive_class ); ?>">
  	<button type="button" class="btn btn-secondary btn-light btn-sm dropdown-toggle" data-toggle="dropdown"><?php echo esc_html__( 'LANG', 'wplaboaries' ); ?></button>
	  <div class="dropdown-menu dropdown-menu-right">
	    <a class="dropdown-item" href="<?php echo esc_url( bogo_get_url_with_lang( home_url(), '' ) ); ?>"><?php echo esc_html( bogo_get_language( bogo_get_default_locale() ) ); ?></a>
			<?php
			foreach ( $bogo_available_locales as $bogo_available_locale ) {
				?>
				<a class="dropdown-item" href="<?php echo esc_url( bogo_get_url_with_lang( home_url(), bogo_lang_slug( $bogo_available_locale ) ) ); ?>"><?php echo esc_html( bogo_get_language( $bogo_available_locale ) ); ?></a>
				<?php
			}?>
	  </div>
	</div>

If you put this function anywhere you like, it will output a link to the top page of each language.

Example

It has already been applied to my WordPress theme.

[Infomation]
Since the style depends on Bootstrap4, those who do not use Bootstrap4 need style adjustment.
Assuming that it is placed in the header, it comes out in a drop-down.

What the code does

Step1
Get activated language information
$bogo_available_locales = bogo_available_locales();
Step2
Exclude only default languages
$bogo_get_default_locale = array( bogo_get_default_locale() );
$bogo_available_locales = array_diff( $bogo_available_locales, $bogo_get_default_locale );
Step3
Output default language link
<a class="dropdown-item" href="<?php echo esc_url( bogo_get_url_with_lang( home_url(), '' ) ); ?>"><?php echo esc_html( bogo_get_language( bogo_get_default_locale() ) ); ?></a>

If the default language is output using “bogo_available_locales (),” the URL will be https://example.com/en.
Since you want to output https://example.com, you need to output only the default language separately.
The reason for doing STEP2 is also the same.
Step4
Output a list of other languages
<?php foreach ( $bogo_available_locales as $bogo_available_locale ) { ?> <a class="dropdown-item" href="<?php echo esc_url( bogo_get_url_with_lang( home_url(), bogo_lang_slug( $bogo_available_locale ) ) ); ?>"><?php echo esc_html( bogo_get_language( $bogo_available_locale ) ); ?></a> <?php }?>

Summary

The toggle button is now available.

By the way, we sell themes that incorporate the Bogo theme. Please refer to this as well.

Bogo compatible themes