qTranslate-X : How to customize image Flags for Language Menu

wordpress qtranslate-x custom flag menu

The qTranslate-X is a free popular plugin that adds support for multiple languages on a WordPress site. I really like it, but the only issue I have with it is that the default image flags for the Language Menu are not that good. In this article, I will first show you different types of Language Switching Menu we can choose from and the two ways we can display them. Finally, we are going to replace those default images with our own.

A website with multilingual functionality needs to give a visitor a way to switch between the languages. With qTranslate-X, this is achieved by displaying the so-called Language Switcher or Language Selector Menu.

There are two ways to display the Language Switcher. Using Widgets or by calling a qtranxf_generateLanguageSelectCode($args) function inside a template file. Let’s examine both options.

Displaying Language Menu using a Widget

If you want the Language Menu to be displayed in a sidebar, this is the way to go.

The steps are as follows:

  1. Go to Dashboard > Appearance > Widgets
  2. From “Available Widgets” find “qTranslate Language Chooser” and drag it to the sidebar on the right.
  3. Customize it by using options the Widget gives you:

    qtranslate widget options
    Click to enlarge

Displaying Language Menu by calling a function inside a template

If you want the Language Menu to be displayed at a specific location in the template, we need to modify the appropriate template files. For example, to display the Language Menu at the top of the page you would most likely need to edit header.php file. We display the menu by calling the qTranslate-X native qtranxf_generateLanguageSelectCode($args) function.

The function accepts $args array argument with the following keys:

  • 'type' – possible values are: 'text', 'image', 'both', 'dropdown' and 'custom'
  • 'format' – only used when 'type' is 'custom'.
  • 'id' – id of widget, used for CSS purposes.

The way we use the function is like this:

<?php
    qtranxf_generateLanguageSelectCode(array(
    'type'   => 'image'
    ))
?>

No matter which one we use to display the Language Menu, we have different types of menu to choose from.

Different types of language switcher / selector menu

We can specify how the Language Menu is displayed by using the following types:

'type' value How it is displayed Option in Widget
'text' qtranslate language menu text type Text only
'image' qtranslate language menu image type Image only
'both' qtranslate language menu widget both type Text and Image
'dropdown' qtranslate language menu widget dropdown type Dropdown Box
'custom' Depending on how it is customized. Custom list item format:

The types are all self-explanatory, except for the ‘custom’ type. Let’s examine it in more detail.

About ‘custom’ type

With ‘custom’ type, we can specify what to display by using ‘format’ key.

Inside ‘format’, we can define our HTML code that should be displayed for each language. We also have the following placeholders available:

  • %f - Flag Image HTML
  • %s - Flag Image URL
  • %n - Language Native Name
  • %a - Language Name in Active Language
  • %c - Language 2-Letter Code

Simple example using placeholders

If, for example, we want to display the Language Menu as text that contains both language name and 2-letter code and also force it to be in bold style, we would call qtranxf_generateLanguageSelectCode($args) function like this:

<?php
    qtranxf_generateLanguageSelectCode(array(
    'type'   => 'custom',
    'format' => '<span style="font-weight:bold">[%n - %c]</span>'
     ))
?>
Note: When using a widget, we would put the value of 'format' inside "Custom list item format:" field.

This would render the menu as:

qtranslate language chooser widget custom type using placeholders example

When none of the types suit our needs, ‘custom’ type can become really handy.

Now that we know how to display the Language Menu, let's replace the default flag images with our own.

1.) Upload image flags to a WordPress site

First, we need to give appropriate filenames to our custom flag images and then upload them to the WordPress site.

The steps are as follows:

  1. Get the flag images. If you don’t have them yet, there are plenty of sites that offer images and vectors for free. One such site is FlatIcon that has an International Flag Package containing more than 250 flags. Make sure to download them in .PNG format.
  2. Rename the flags, so that they match the filenames of the default internal qTranslate-X flags.
    To check what name to use for a specific language, follow these steps:

    • Go to Dashboard > Settings > Languages and select "Languages" tab.
    • On the right side, select the language you want to add from "List of Configured Languages" and click on "Edit" as shown below:
      qtranslate list of configured languages
    • In the Flag dropdown, you can see the flag file name that the qTranslate-X expects.
      qtranslate flag filename for english language
    • Rename your custom flag to the same filename.
    • Repeat these steps, so all the custom flags will have the correct filename.

     

  3. Go to Dashboard > Media > Add new and then drag & drop the image files.
  4. Click on Edit link for any of the uploaded flag.

    wordpress add media edit flag image
    Click to enlarge
  5. Copy the File URL of that image. We need a path to the folder where the flags are stored and will use it in step 3. We only need to do this for single flag, as all other uploaded flags are in the same folder.
    wordpress add media get flag image url

Next, let’s set the ‘type’ of the Language Switcher to be that of ‘image’.

2.) Display the Language Switcher / Selecter Menu

If you are using a qTranslate-X widget, simply select the ‘image only' radiobox and click Save.

For qtranxf_generateLanguageSelectCode($args) function, insert the following code where you want the Language Menu to be shown.

<?php
    qtranxf_generateLanguageSelectCode(array(
    'type'   => 'image'
    ))
?>

All that is left is to change the path of the default flag images folder that is used by the qTranslate-X plugin.

Note: Another way to customize the flags without changing the flag images path is to use 'custom' type and CSS. Quick guide on making changes using CSS is shown later in this tutorial.

3.) Changing Flag Image Path for qTranslate Plugin

To change the image path, follow these steps:

  1. Go to Dashboard > Settings > Language and select "Advanced" tab. You should see an option for "Flag Image Path":

    qtranslate language settings advanced tab
    Click to enlarge
  2. Inside Flag Image Path field, paste the URL we saved from the step 1, when we uploaded images of our custom flags.
  3. We only need part of this URL that starts after .../wp_content/ and ends before the filename.
    For example, if the URL of the image flag is:
    http://www.example.com/wp-content/uploads/2017/05/flag-en.png
    Then only keep inside the Flag Image Path the following:
    uploads/2017/05/
  4. Click on "Save Changes" button.

And we are done. The qTranslate will now look for flag images into the folder that were uploaded to in step 1.
If you now check the Language Menu, it should display our custom image flags:

qtranslate language menu widget with custom flags

Another solution without changing the Flag Image Path - by using CSS

If for whatever reason you don't want to change the Flag Image Path for the qTranslate, you can still achieve the same result by using 'custom' type. With this solution, the flags will not be rendered with <img> tags anymore, but will instead make use of CSS background.

Set the 'type' to 'custom' and leave the 'format' argument empty:

<?php
		  qtranxf_generateLanguageSelectCode(array(
                 'type'   => 'custom',
                 'format' => ''
				 ))
?>

Then make the necessary CSS changes in the style.css template file.
Below is one example, but to use it, you need to modify the code a bit:

  • Replace FLAG_URL to the URL of the flag inside the CSS background property for each flag.
  • Classes for the language specific flag contain at the end of their name their specific language code (for example .language-chooser-item-en end with en). So make sure to replace the language code with the appropriate language code for each of your language.
/* make sure the flags are aligned horizontally */
.language-chooser-item {
  float: left;
}

/* anchor will have a size of 64x64 and be displayed semi-transparent */
.language-chooser-item a {
  display: block;
  width: 64px;
  height: 64px;
  opacity: 0.5;
  margin:5px;
}

/* current selected language will have its flag shown with no transparency */
.language-chooser-item.active a {
  opacity: 1;
}

/* set the URL of the background image for each language  */
.language-chooser-item-en a {
  background: transparent url(FLAG_URL) 0 0 scroll no-repeat;
}

.language-chooser-item-de a {
  background: transparent url(FLAG_URL) 0 0 scroll no-repeat;
}

Conclusion

With the qTranslate-X WordPress plugin, we can have a website that supports multiple languages. Switching between the languages is achieved with Language Selector or Language Switcher menu. This switcher can be displayed in various ways, one of which is displaying image flags. In this tutorial, we changed the default image flags with the custom ones by changing the Flag Image Path for the qTranslate-X Plugin. The tutorial also showed, how to use custom flags by leaving the Flag Image Path alone and changing the CSS styles instead.

2 Comments

  1. Javier Llompart
    October 9, 2019
    • admin
      October 9, 2019

Write a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.