Introduce: LangBranch Shortcode

View Plugin Page On WordPress.org

What is LangBranch

It's a simple plugin enable you to use a shortcode like below to display correspond language version of content based on get_locale().

[langbranch aio en_US="English version" en_GB="en_US" zh_TW="中文版本" ja_JP="日本語バージョン"]

[langbranch en_US]
Content here will only be displayed if get_locale() returns "en_US".
[langbranch en_US zh_TW]
Content here will only be displayed if get_locale() returns "en_US" or "zh_TW".


I've been using TranslatePress to provide multi locale experience for visiters.
However, I had been suffering from losting translated content once I update original language's content, until I decided to create a simple shortcode to solve this problem.


AIO (1-liner) Mode

[langbranch aio en_US="English version" en_GB="en_US" zh_TW="中文版本" ja_JP="日本語バージョン"]

By appending aio after langbranch main tag, you can setup one specific paragraph in several languages, and if you decide that some locale user to share the same language, you can just type the locale code you want to refer to directly in content. For example, you can make UK version the same as US version.

However, if LangBranch go too deep (chain over 5 stacks) it will fail.
Don't do this:

--1---||---2---||---3---||---4---||---5---||---6---> Oh no!
en_US -> en_GB -> en_AU -> en_HK -> zh_TW -> ja_JP

Seperate Mode

[langbranch en_US]
Content here will only be displayed if get_locale() returns "en_US".
[/langbranch][langbranch en_US zh_TW]
Content here will only be displayed if get_locale() returns "en_US" or "zh_TW".
這裡的內容,只有當 get_locale() 回傳 "en_US" 或 "zh_TW" 才會顯示。

Very straight forward, isn't?
But when using several shortcodes, I would suggest you don't put a linebreak between [/langbranch] and [langbranch], in order to prevent unwanted linebreak <br> being rendered.

Optional step

All contents enclosed by [langbranch] will be rendered enclosed by <div class="langbranch"></div>
So if you are using auto machine translating like TranslatePress offers, you may want to exclude all selector .langbranch.


This plugin is at its early stage of developing, so you may encounter some issues while using it.
For the worst case, it breaks your site up.
If that happen, don't be panic! Just go to your wp-content/plugins directory and delete langbranch and you shall be fine.


Vantage Theme Issue: Sticky Nav doesn’t work on mobile view


Just simply comment out && !isMobileDevice, and it will work like a charm!

Github solved issue: #1

However, to do this directly on a theme However, to do this directly on a theme could be changed in any future updates is probably not a good idea.

Instead, we copy that .js file to our child theme js directory.
Then, we have to dequeue the original .js by inserting the commands to your child theme's functions.php:

function vantage_child_enqueue_parent_style() {

    wp_enqueue_script('vantage-main', get_stylesheet_directory_uri() . '/js/vantage-hollen-main.js', array( 'jquery' ) );
add_action( 'wp_enqueue_scripts', 'vantage_child_enqueue_parent_style', 8 );

In this way, any future minor update pushed by Vantage Dev Team won't clear your modified code, as long as there won't be any structural changes, like ids's and/or classes' renaming.


It took me almost two hours at late night debugging (3 AM), and it almost got me: I thought it was caused due to the lack of support of $(body) and scrollTop() on mobile device. Tried so many solution to no avail, then I decided to go to sleep.
and you know what, I solved it in 30 minutes after having a lunch at noon.


WordPress: Format and colorize code block by applying prism.js


for (int i = 5; i < 10 ; i++) {
    Console.WriteLine("Hello Moto?");

If you are using Vantage for your WordPress site, and you want to make your code block looks fancy, follow the instructions:


1. Make sure you have created a child theme based on Vantage, and it's activated.

2. Reset styles applied to code block.

I highly recommend to work with WP-SCSS plugin when writing CSS/SCSS, so you can have stylesheets organized without the costs of performance by using @import.

/* Reset the style set by Vantage (the parent theme) */
.entry-content pre, .entry-content code {
    background: unset;
    font-family: unset;
    border: unset;
    box-shadow: unset;
    overflow-x: unset;

Later we will apply prism.js and its stylesheet.

3. Insert code snippits to your child theme's "functions.php"

function code_pre_theme(){
    // To check if currently viewing page is a "post"
    if (is_singular('post')) {
        wp_enqueue_script('prism-js', 'https://cdn.jsdelivr.net/npm/prismjs@1.28.0/prism.min.js');
        wp_enqueue_script('prism-core-js', 'https://cdn.jsdelivr.net/npm/prismjs@1.28.0/components/prism-core.min.js');
        wp_enqueue_style('prism-css', 'https://cdn.jsdelivr.net/npm/prismjs@1.28.0/themes/prism.min.css');
        wp_enqueue_script('prism-autoloader-js', 'https://cdn.jsdelivr.net/npm/prismjs@1.28.0/plugins/autoloader/prism-autoloader.min.js');
add_action('wp_enqueue_scripts', 'code_pre_theme', 10); //Number 10 heres depend on site. The princlple is to set a number larger than the essential scripts and styles belong to your parent theme, which is vantage in this case.

By enqueuing prism-core.min.js and prism-autoloader.min.js, it will utomatically loads languages's style when necessary.
You may opt-in languages based on your needs. For example, to load certain style based on has_tag('php'), has_tag('csharp') result.
Visit prism.js at cdnjs.com for more programming language supports.


You don't have to follow every steps as I did, as you may come up with a better solution for your own site.

At the time I wrote this article, I absolutely have zero knowledge in PHP, only knowing C#, Javascript, Java, SCSS; writing and modifying some php script isn't complicated, so go ahead and try all the possibilities.