The language switching block is provided by the Bogo plugin.This block allows this site to display blog content in three different languages.

However, Bogo’s language-switching block was not able to support multiple languages, and Japanese was being displayed even on English pages.Therefore, we have fine-tuned it, including its appearance, and will report the details in this article.

CSS and PHP changes in the language switching block

To begin, here is the final CSS and PHP (functions.php) that fine-tuned the appearance of the language-switching block for this Bogo.

/* 20250213 Bogo National Flag */
.bogo-language-switcher {
	display:inline-flex;
	padding: 0px;
	margin: 0px;
}
.bogoflags-cn:before {
    content: url(https://clairvoyance-power.com/wp-content/uploads/2025/02/china_circle_20px.png);
}
.bogoflags-us:before {
    content: url(https://clairvoyance-power.com/wp-content/uploads/2025/02/USA_circle_20px.png);
}
.bogoflags-jp:before {
    content: url(https://clairvoyance-power.com/wp-content/uploads/2025/02/japan_circle_20px.png);
}
/* display order */
.bogo-language-switcher .ja {
    order: 1;
}
.bogo-language-switcher .en {
    order: 2;
    margin-left: 20px;
}
.bogo-language-switcher .zh {
    order: 3;
    margin-left: 20px;
}

/* 20250213 Bogo Language Switcher */
add_filter( 'bogo_language_switcher_links', function ( $links ) {
for ( $i = 0; $i < count( $links ); $i ++ ) {
  // Japanese
  if ( 'ja' === $links[ $i ]['locale'] ) {
    $links[ $i ]['title'] = 'JA';
    $links[ $i ]['native_name'] = 'JA';
  }
  // English
  if ( 'en_US' === $links[ $i ]['locale'] || 'en' === $links[ $i ]['locale'] ) {
    $links[ $i ]['title'] = 'EN';
    $links[ $i ]['native_name'] = 'EN';
  }
  // Simplified Chinese
  if ( 'zh_CN' === $links[ $i ]['locale'] || 'zh' === $links[ $i ]['locale'] ) {
    $links[ $i ]['title'] = 'ZH';
    $links[ $i ]['native_name'] = 'ZH';
  }
}
return $links;
} );

The following websites were used as references. (Japanese site)

Circular flags are displayed in the language switching block

The country flag at the top of the language switching block has been missing since Bogo Ver. 3.7.I started using Bogo Ver. 3.8.2, so the flag was not displayed from the beginning.

Links to the top page of each language are placed at the top of the page on PC and in the footer menu on mobile.Each of them uses an image of a round national flag.I used this round national flag from the page of Illustration Image.

Bogo’s language-switching block also uses a circular flag.

• Create an image reduced to a size of 20px
• Subscribe to WordPress Media
• Loading with CSS

The relevant part of the CSS is as follows

.bogoflags-cn:before {
    content: url(https://clairvoyance-power.com/wp-content/uploads/2025/02/china_circle_20px.png);
}
.bogoflags-us:before {
    content: url(https://clairvoyance-power.com/wp-content/uploads/2025/02/USA_circle_20px.png);
}
.bogoflags-jp:before {
    content: url(https://clairvoyance-power.com/wp-content/uploads/2025/02/japan_circle_20px.png);
}

Change the text displayed in the language switching block

The string initially displayed in Bogo’s language block contains the following

• 日本語
• English
• 中文

Both English and Simplified Chinese pages were displayed in Japanese and Chinese.

Therefore, we changed it to show the abbreviation of each language.

/* 20250213 Bogo Language Switcher */
add_filter( 'bogo_language_switcher_links', function ( $links ) {
for ( $i = 0; $i < count( $links ); $i ++ ) {
  // Japanese
  if ( 'ja' === $links[ $i ]['locale'] ) {
    $links[ $i ]['title'] = 'JA';
    $links[ $i ]['native_name'] = 'JA';
  }
  // English
  if ( 'en_US' === $links[ $i ]['locale'] || 'en' === $links[ $i ]['locale'] ) {
    $links[ $i ]['title'] = 'EN';
    $links[ $i ]['native_name'] = 'EN';
  }
  // Simplified Chinese
  if ( 'zh_CN' === $links[ $i ]['locale'] || 'zh' === $links[ $i ]['locale'] ) {
    $links[ $i ]['title'] = 'ZH';
    $links[ $i ]['native_name'] = 'ZH';
  }
}
return $links;
} );

Japanese is displayed as “JA”, English as “EN”, and Chinese as “ZH”.

Layout Adjustment

The language switching section has been changed from vertical to horizontal.In addition, a space has been added between each language to make it easier to distinguish between them.

/* 20250213 Bogo National Flag */
.bogo-language-switcher {
	display:inline-flex;
	padding: 0px;
	margin: 0px;
}
/* display order */
.bogo-language-switcher .ja {
    order: 1;
}
.bogo-language-switcher .en {
    order: 2;
    margin-left: 20px;
}
.bogo-language-switcher .zh {
    order: 3;
    margin-left: 20px;
}

I set the display of the .bogo-language-switcher to inline-flex to make it horizontal.I also set the padding and margin to zero and added a margin to the left of the second and third languages to be displayed.

Adjustments in the Gutenberg editor

Added titles to be displayed in each language in the Block Visibility plugin.

This pattern is not displayed on the blog home (front page), but on individual post pages.

Also, we set the padding and margin to zero in the CSS, so the spacing is fine-tuned in the Gutenberg editor.

Final appearance of the language switching block

Reflecting the above, the final appearance was as follows :

It is displayed below the eye-catching image on the individual post page and before the body text.Selecting another language will take you to the individual post page in that language.

Musubi

In this case, we adjusted the appearance of the language switching block in the Bogo plugin.

• Circular flag at the top
• Link text changed to 2 alphabetic characters
• Arranged in a row horizontally
• Language switch text added
• Layout fine-tuning

Previously, Japanese was displayed even on English pages.This appearance adjustment has resolved the issue.

Today is my first morning update as I am on vacation.I will be working irregular hours this month until the end of the month, so I would like to update in the morning as well.