How to switch root text of breadcrumblist by language in Cocoon

Reading Time: 3 minutes

I recently modified this site to support English as well as Japanese by Polylang.
I am using Cocoon as WordPress theme made by Japanese engineer.

I found 1 deviation in breadcrumblist.

Even if I switch this site English, there is “ホーム”.
– “ホーム” means “Home” in Japanese.

In this post I will show you how to show “Home” instead of “ホーム” when site is English version like this.

Official way how to change root text breadcrumblist in Cocoon

This is explained on the official website.
– Only in Japanese.

パンくずリストのルートテキストを変更するカスタマイズサンプル集

パンくずリストの「ホーム」部分のテキストを変更する方法。

wp-cocoon.com

To summarize what you need to do is to add a function with a child theme and specify a string.

On the official page mentioned earlier, the following code is a sample.
This code changes the string from “ホーム”(Home) to “トップ”(Top).

// Root text of breadcrumblist
add_filter('breadcrumbs_single_root_text', 'breadcrumbs_root_text_custom');
add_filter('breadcrumbs_page_root_text', 'breadcrumbs_root_text_custom');
function breadcrumbs_root_text_custom(){
    return 'トップ';
}

I’m also a programmer.
I came up with💡

How to do

Please take a look this code.
I added this to functions.php of child theme.

<?php //子テーマ用関数
if ( !defined( 'ABS_PATH' ) ) exit;

//子テーマ用のビジュアルエディタースタイルを適用
add_editor_style();

//以下に子テーマ用の関数を書く

// Switching root text by checking language of site
// For post page
add_filter('breadcrumbs_single_root_text', 'breadcrumbs_root_text_custom');
// For fixed page
add_filter('breadcrumbs_page_root_text', 'breadcrumbs_root_text_custom');
function breadcrumbs_root_text_custom() {
    if('/en/' === substr($_SERVER['REQUEST_URI'], 0, 4)) {
        return 'Home';
    } else {
        return 'ホーム';
    }
}

How it is realized

My site https://linuxfun.org/ switches between Japanese and English in directory format.
The link of the post is https://linuxfun.org/yyyy/mm/dd/%post-name%/.

Therefore, if “/en/” continues after linuxfun.org in URL, I can assume this blog is configured as English mode.
If it is Japanese version, URL always starts with a number such as /2020/12/05/.
– And I do not have fixed page that starts with “/en/”.

This logic is also available if you want to add a Chinese site in the future.
However I think it annot be applied to identify American English and British English or so on.

I think there may exist more optimal way to realize, but this is reasonable for me.

Cocoon side mechanism

Let’s trace how this programmatic switching is realized.

We can find “apply_filters” function to decide breadcrumblist text.

grep -r breadcrumbs_page_root_text cocoon-master
cocoon-master/tmp/breadcrumbs-page.php:$root_text = apply_filters('breadcrumbs_page_root_text', $root_text);

apply_filters function itself seems to be a built-in function of WordPress.

apply_filters() | Function | WordPress Developer Resources

Calls the callback functions that have been added to a filter hook.

developer.wordpress.org

Now it is clear why this is realized.

Conclusion

How was it?

There are several other Places in Japanese that are In English sites.
– Button to encourage comment
– Placeholder of the search form

I want to find feasible way to switch them as well as breadcrumblist text!

By the way, Polylang itself is a very good plug-in!

Polylang

Making WordPress multilingual

wordpress.org