For IT Specialist

WordPress: Create pull-down Language Switcher Shortcode with Polylang’s Free Plan

Target of this article

Someone who understands WordPress structure and code.

Overview

Polylang is a plugin to make WordPress multilingual. The free plan has a lot of features, but you can create your own features if you need more. One of the requests is to install a language switcher with a shortcode, and you can create a new shortcode in functions.php in WordPress. In my case, it was made with a pull-down. I don't want to go into the details, but you have to add them to the functions.php file of your theme, so if you update the version of the theme, the added data will be lost, etc. Create a child theme and customize it. If your server has a backup function, it is better to backup. If there is no backup function, copy the files before modification so that they can be restored.

Installation sample

Sample1

Sample2
Based on sample 1, I added a description of the pull down called Select Language and a 20 pixel margin to the right of the pull down text using CSS so that the arrow does not overlap the text. I wrote the CSS in the Additional CSS section of the theme customization.

How to use after installation

This pulldown behaves in the same way as the official widget. It switches to the multilingual page linked with the Polylang of the installed page. After adding the code to functions.php, you can place the shortcode on fixed pages and post pages.I will explain in Gutenberg Editer.

  1. open the page in the block editor
  2. install the shortcode from the block menu
  3. Enter custom_polylang_langswitcher_dropdown into the shortcode.In fact, [] encloses the short code.

Sample Code1

Please add this code to functions.php.
The sample shortcode has a large number of characters for the purpose of explanation. You can change it as you wish.Please make it easy to use by adding CSS to the design, etc. at your discretion.

PHP
// Allows the creation of polylang language switcher shortcodes.
function custom_polylang_langswitcher_dropdown() {
    // Check if Polylang function exists
    if (function_exists('pll_the_languages')) {
        // Arguments for retrieving the language list
        $args = array(
            'dropdown'        => 1, // Output as drop-down
            'show_flags'      => 0,
            'show_names'      => 1,
            'echo'            => 0,
        );
        
        // Get language list
        $languages = pll_the_languages($args);
        
        // Script to redirect to selected language in JavaScript
        $output = "<script>
                    document.addEventListener('DOMContentLoaded', function() {
                        var langSwitcher = document.querySelector('.custom-polylang-langswitcher');
                        if (langSwitcher) {
                            langSwitcher.addEventListener('change', function() {
                                window.location.href = this.value;
                            });
                        }
                    });
                   </script>";
        
        // Add pull-down menu
        $output .= '<select class="custom-polylang-langswitcher">' . $languages . '</select>';
        
        return $output;
    }
}

add_shortcode('custom_polylang_langswitcher_dropdown', 'custom_polylang_langswitcher_dropdown');

Sample2

PHP
function custom_polylang_langswitcher_dropdown2() {
    if (function_exists('pll_the_languages')) {
        $args = array(
            'raw'   => 1,
            'echo'  => 0,
        );

        $languages = pll_the_languages($args);
        
        $output = '<select class="custom-polylang-langswitcher" onchange="window.location.href=this.value;">';
        // Added first option to act as a placeholder
        $output .= '<option value="">' . esc_html__('Select Language', 'text-domain') . '</option>';
        
        foreach ($languages as $lang) {
            $output .= '<option value="' . esc_url($lang['url']) . '" ' . ($lang['current_lang'] ? 'selected' : '') . '>' . esc_html($lang['name']) . '</option>';
        }
        $output .= '</select>';

        return $output;
    }
}
add_shortcode('custom_polylang_langswitcher_dropdown2', 'custom_polylang_langswitcher_dropdown2');

Sample2 CSS

CSS
.custom-polylang-langswitcher {
    padding-right: 10px; /* Add margin to right side of pull-down */
}