WordPress : How To change ltr / rtl language direction in a Website

wordpress - changing rtl and ltr language direction

To set the language direction of the content in the element, we use either the HTML dir attribute or CSS direction property. The default value is ltr (left to right direction), while languages like Arabic and Hebrew use rtl (right to left direction). Sometimes, we might want to change the value of the current direction and this is the focus of this article.

In WordPress themes, they usually use language_attributes function in the <html> tag as shown below:

<html <?php language_attributes(); ?>>

This function is used to display the dir or lang attributes. It will only display dir attribute if the current locale is rtl.

Note: Locales are the .mo and .po language files in the languages folder. Check WordPress Localization documentation for more information.

There are many ways to modify language directions.

Set language direction using a filter

We can force the language_attributes function to set the dir attribute by using a language_attributes filter in the functions.php file as shown below:

function custom_dir_attr($lang){
if (is_admin())
  return $lang;
  $dir_attr="";
	if (!is_rtl())
	  $dir_attr='dir="rtl"';
	  
    return $lang." ".$dir_attr;
}
add_filter('language_attributes','custom_dir_attr');

In the above example, we force the dir attribute to be rtl in the front-end of WordPress.

Let's examine the above code in more detail:

  • Line 2-3

    Since the functions.php theme file also runs when we are in a back-end, the above filter will run on both front-end and the back-end of WordPress. This will cause the change in direction in the Dashboard as well. To avoid that, the code above uses is_admin function to check if we are currently in the Dashboard and if true, we return without doing any change.

  • Line 5-6

    if is_rtl function returns true, the $lang parameter already has dir attribute set to 'rtl', so we won't add another one.

Note: The $lang parameter might also contain the 'lang' attribute, so we return it with the appended value of $dir_attr variable.

But, what if we want to leave the front-end as it is, but change the language direction only in the back-end.

Switch direction between rtl and ltr on an Admin Dashboard only

If your Admin Dashboard is using RTL language direction, but you would prefer to switch it back to LTR, check LTR RTL Admin content plugin. When you are in Dashboard, the switch button will appear on top of the dashboard and you can easily switch back and forth. Note that this switching won't work in front-end.

Set direction when using qTranslate-X plugin

With qTranslate-X multilingual plugin, you might need to set the direction based on the currently selected language. We can do that with the following code:

<html<?php if(qtranxf_getLanguage() == 'ar') echo ' dir="rtl"' ?>>

The above code checks if the current language is Arabic, and if so it sets the direction to "right to left".

Note: The qTranslate-X plugin seems to be abandoned now, but luckily, it was taken over by community and renamed qTranslate-XT.

Mix both rtl and ltr directions on the same post or page

With the HTML5, we can add dir attribute on any element. That way, we can specify the direction to a specific element that differs from the rest of the page. A simple example:

<p dir='ltr'>Some text in English.</p>

Some other ways to set the direction on specific elements are:

Changing language direction using the <bdo> HTML tag

The <bdo> tag is used to override the bidirectional algorithm and is used in special cases, where simply using dir attribute would cause the incorrect presentation. In most cases though, the <bdo> element is not needed. Check this answer from StackOverflow for more information.

Changing language direction using CSS

The CSS has a direction property for setting the direction of text in the block-level element. The possible values are:

  • ltr
  • rtl

Changing language direction using jQuery

With jQuery, we can insert an attribute to the element like this:

<script>
jQuery(document).ready(function(){
    jQuery("html").attr("dir", "ltr")
    });
</script>

In the above code, the dir="ltr" is added to the <html> tag.

Conclusion

There are times when we need to set the language direction of the text that differs from the currently selected language. We examined the different ways to achieve that, from using a WordPress filter to using a plugin, the dedicated HTML tag, CSS, and a jQuery.

I hope you have found this article useful. If there another way to achieve this not mentioned in the article, drop a comment and let us know.

Write a Comment

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