Five useful snippets for Polylang

Pages of this post →

Add native Polylang banners to any page or post

Since Polylang includes a collection of 249 16x11 flags in .png, we can use them to decorate lists, add them to tables, paragraphs, etc. without having to write HTML or CSS.

This function allows you to add the image of any native banner used by the plugin via a shortcode.

To make them available you add the snippet in the functions.php of your child theme, in a custom plugin or with Code Snippet, if you use it.

function polylang_flag_shortcode($atts) {
    // Shortcode attributes
    $atts = shortcode_atts(array(
        'code' => '', // Flag code (e.g. 'es', 'en', 'fr')
        'size' => '16', // Flag size (width in pixels)
    ), $atts, 'polylang_flag');

    // Check if a flag code was provided
    if (empty($atts['code'])) {
        return 'Flag code not provided.';
    }

    // Polylang flag base route
    $flag_path = plugins_url('polylang/flags/' . $atts['code'] . '.png');

    // Create the HTML of the flag image
    $flag_html = '<img src="' . esc_url($flag_path) . '" alt="' . esc_attr($atts['code']) . '" width="' . esc_attr($atts['size']) . '" height="auto" />';

    return $flag_html;
}
add_shortcode('polylang_flag', 'polylang_flag_shortcode');

Once you have added the code you can use the shortcode with the corresponding country code on any WordPress page or post making sure it matches exactly the names of the flag files in the /wp-content/plugins/polylang/flags/ folder.

[polylang_flag code="en" size="32"]
[polylang_flag code="fr" size="24"]

//Original size
[polylang_flag code="de"]

To play with the size of the flags, simply change the value of the size attribute in the shortcode.

If you want to create and use your own banners or have another collection with a different design, just host the new ones (in .png) in a new folder with a different name (otherwise you will lose the changes when the plugin is updated) and add the new path to the code. For example:

$flag_path = plugins_url('polylang/nuevas_banderas/' . $atts['code'] . '.png');

Adding an SVG icon next to the language selector

This snippet adds an SVG icon with the "Translate" symbol to the left of Polylang's native language selector to make it more visually appealing and catch the visitor's attention. In the example, the icon is the one I use in this blog. You can look for the one you like the most and replace it. Here are a few of them.

function polylang_add_translate_icon($output) {
    //SVG icon for "translate".
    $translate_icon = '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align: middle; margin-right: 5px;"><path d="M24 24h-2.784l-1.07-3h-4.875l-1.077 3h-2.697l4.941-13h2.604l4.958 13zm-4.573-5.069l-1.705-4.903-1.712 4.903h3.417zm-9.252-12.804c.126-.486.201-.852.271-1.212l-2.199-.428c-.036.185-.102.533-.22 1-.742-.109-1.532-.122-2.332-.041.019-.537.052-1.063.098-1.569h2.456v-2.083h-2.161c.106-.531.198-.849.288-1.149l-2.147-.645c-.158.526-.29 1.042-.422 1.794h-2.451v2.083h2.184c-.058.673-.093 1.371-.103 2.077-2.413.886-3.437 2.575-3.437 4.107 0 1.809 1.427 3.399 3.684 3.194 2.802-.255 4.673-2.371 5.77-4.974 1.134.654 1.608 1.753 1.181 2.771-.396.941-1.561 1.838-3.785 1.792v2.242c2.469.038 4.898-.899 5.85-3.166.93-2.214-.132-4.635-2.525-5.793zm-2.892 1.531c-.349.774-.809 1.544-1.395 2.15-.09-.646-.151-1.353-.184-2.108.533-.07 1.072-.083 1.579-.042zm-3.788.724c.062.947.169 1.818.317 2.596-1.996.365-2.076-1.603-.317-2.596zm11.236-1.745l-2.075-5.533 5.414-1.104-.976 1.868c2.999 2.418 4.116 5.645 4.532 8.132-1.736-2.913-3.826-4.478-5.885-5.321l-1.01 1.958zm-7.895 10.781l1.985 5.566-5.43 1.016 1.006-1.852c-2.96-2.465-4.021-5.654-4.397-8.148 1.689 2.94 3.749 4.483 5.794 5.36l1.042-1.942zm10.795-6.029"/></svg>';

    // Add the icon before the selector
    return $translate_icon . '<span style="margin-left: 5px;">' . $output . '</span>';
}
add_filter('pll_the_languages', 'polylang_add_translate_icon');

Show customisable warning of the existence of a foreign language version

This function creates a shortcode to display a warning with a yellow background that can be added anywhere on a post or page. This message warns that the article has an English translation with Polylang and provides a link to the English version.

I have chosen this example because I have used it when an article, in any language, received more traffic from English-speaking countries and from English-language browsers (which also does not guarantee that the person behind it was looking for the English version). Still, it's a way to ensure visitor retention in some cases.

Code to add to functions.php

  // English version notice
function polylang_translation_notice_shortcode() {
    // Verifica si el plugin Polylang está activo
    if (!function_exists('pll_the_languages')) {
        return '';
    }

    // Get the ID of the current post
    $post_id = get_the_ID();

    // Get the English translation of the current post
    $english_post_id = pll_get_post($post_id, 'en'); // 'en' es el código del idioma inglés

    // Si no hay una traducción en inglés, no mostrará nada
    if (!$english_post_id) {
        return '';
    }

    // Get the link to the English version
    $english_post_url = get_permalink($english_post_id);

    // Crear el contenido del aviso
    $ticker_content = sprintf(
        '<div style="background-color: #ffffcc; padding: 10px; border-radius: 5px; margin-bottom: 20px; font-size: 14px;">
            This article has an English version. <a href="%s" style="color: #0073e6; text-decoration: none; font-weight: bold;">Read</a>
        </div>',
        esc_url($english_post_url)
    );

    return $ticker_content;
}
add_shortcode('polylang_translation_notice', 'polylang_translation_notice_shortcode');

In style you can modify the message, the size of the text, the colours of the text, the background and the link to your liking.

To add the message wherever you want, just use this shortcode:

[polylang_translation_notice]

With the CSS in the example it looks like this.

Example of the look of the ad, 14px black text on a light yellow background and blue link.

If you want to add a notice to the translation in another language, just change the language code in pll_get_post($post_id, 'en'); to 'fr', 'de', 'it', etc. If you need to use multiple posts, you can add different snippets, one for each language. You could add them all in one snippet, but I only needed one.

Pages of this post →