Home / Blog / How to Add RTL Support to a WordPress Theme
Add RTL Support To A WordPress Theme

How to Add RTL Support to a WordPress Theme

Translating an internet site to a different language is often an onerous task, though relatively simplified with plugins. However, while many languages read left to right (like English, of course), there are many languages that are read from right to left.

One example of a popularly spoken right to left language is Urdu. It’s the sixth most speech within the world, with over 420 million speakers, and around 40% of them have access to the web.

This is often an outsized niche market to think about. confine mind that this is often just one of several popularly spoken right to left languages.

Opening up your theme to support all language styles, regardless of which direction they read, makes your theme translation-ready for each situation. Fortunately, updating your theme to support the right to left languages is comparatively straightforward.

How to Add RTL Support to a WordPress Theme (In 3 Steps)

Since you’re essentially designing a topic, we’ll assume you’re developing locally on your computer. If you’re not, you actually should be. Also, before making any changes, create a backup of your site to make sure you’ll recover everything if something goes wrong. When you’re ready, let’s dive in!

Step 1: Create the RTL CSS for Your Theme:

The first step to add RTL support to WordPress makes the CSS for displaying RTL languages correctly on your website. There are two methods for doing this. the primary is to easily feed your existing stylesheet into a CSS RTL generator. This tool will examine your CSS and plan to make a replica, but switching all the left and right alignments. This effectively creates a mirrored version of your website.

Here are two sites we recommend:

  • RTL CSS: This framework features a very detailed set of instructions, and at current writing is additionally beta testing a live converter tool.
  • CSSJanus: This tool is simplicity itself – type your Left-to-Right (LTR) CSS within the left-hand panel, click the Submit button, and see your RTL CSS on the proper.

This is far and away from the only thanks to going. Once you’ve generated the new CSS, save the resulting styles as a file named style-rtl.css, ready to be used later.

The second method maybe a little more tedious because it involves an ‘override’ stylesheet. during this version, you’ll undergo each line of your CSS and manually move all horizontal positioning elements into a separate file named rtl.css, and mirror them. This leads to a smaller file, but ultimately takes tons more work to stay up with, especially as you still make new updates and changes to your theme.

To do this, first, add the subsequent code to the highest of your rtl.css file:

body { direction: RTL; Unicode-bidi: embed; }

Then, for the remainder of your selectors, make sure you switch each left or right positioning to the other. search for text-align, float, and clear especially. However, the precise selectors you turn are going to be supported your own (and your client’s) needs.

If you’ve got any background images indicating a selected direction, you’ll get to provide a flipped version and update the regard to it within the rtl.css stylesheet also. Meanwhile, all of those attributes got to be ‘zeroed’ for the first image, before setting a replacement value:

  • margin
  • padding
  • borders
  • background-position
  • right and left positioning

Finally, any buttons pushed off-screen using negative text-indents should be switched to positive instead. This ensures that your functionality stays in situ no matter the device.

Once you’ve made these changes, save the new file as rtl.css within the same directory as style.css. you’ll now move onto ensuring WordPress is in a position to load your file when necessary.

Step 2: Ensure WordPress ‘Sees’ the RTL Styles:

The Second step to add RTL support to a WordPress If you’re employing a CSS generator tool, you’ll now get to enqueue your new style-rtl.css stylesheet so WordPress can load it in at the acceptable time. this is often just a matter of adding a snippet to your theme’s functions.php file:

function enqueue_theme_files() { wp_enqueue_style( ‘themeslug-style’, get_stylesheet_uri() ); wp_style_add_data( ‘themeslug-style’, ‘rtl’, ‘replace’ ); } add_action( ‘wp_enqueue_scripts’, ‘enqueue_theme_files’ );

This tells WordPress to load the right stylesheet when the web site is about to an RTL language. Assuming you’re already using enqueue properly to load in your regular styles.css stylesheet, you’ll simply add the wp_style_add_data() information into your existing enqueued styles function.

However, when employing a dedicated override stylesheet, you won’t get to load in any special functions. WordPress will simply load within the rtl.css file after your regular styles.css, which can overwrite directional cues using the secondary file.

Once your chosen method is prepared to travel, it’s time to check whether or not everything is functioning correctly in WordPress. Let’s take a glance at how you’ll test your new RTL-supported theme design. Seeing it in action will enable you to make sure that everything looks needless to say, and take any necessary manual fixes under consideration.

Step 3: Test Your RTL Styles in WordPress:

The third step to add RTL support to a WordPress You have a couple of options for testing out RTL languages in your WordPress installation. the primary is to easily switch WordPress to an RTL language. to try to do this, attend the Settings > General page in your WordPress dashboard. Then, select the primary script language you see within the Language drop-down box:

RTL Settings

After saving, you’ll see that everything is now right to left. However, unless you’re bilingual in fact, you’ll struggle to understand any of the text. to figure around this, you’ll use developer tools to enable RTL styles while keeping English because of the primary language.

There are two plugins that would fit the bill here. First, there’s the overall RTL Tester plugin. Once installed and activated, this essentially flips the turn on your entire website, telling it to load any and every one RTL-specific style. Second, there’s WP-RTL, which allows you to switch between different directional languages within one post.

While the functionality of those plugins is sweet, bear in mind that they haven’t been updated recently. Given their simple and esoteric functionality, that’s understandable. Regardless, you will need to confirm that any additions work in conjunction with your existing WordPress installation, although moving them directly to this location will go a long way.

Between these two plugins, you ought to be ready to quickly test what various layouts appear as if with different RTL or LTR content.

Finally, we recommend making sure to use the WordPress theme unit test data so that you can cover virtually every layout of textile styles and formatting when adding RTL styles.

Conclusion

At least 200 million internet users speak a language that’s written from right to left. Offering RTL styles in your themes exposes your design so it is often employed by these markets. Without them, that’s an honest chunk of individuals currently missing out on your products and services (or your clients’).

In this article, you have learned the importance of RTL styles and why you should not ignore them. Next, we’ve taught you three ways to display them on your theme:

  • Create the RTL CSS for your theme.
  • Ensure that WordPress will see the RTL styles.
  • Test your RTL styles to form sure everything looks right.

What questions does one have about RTL styles in WordPress? allow us to know within the comments section below and discuss it in our forums!

About wpscriptor

WP Scriptor is WordPress Trainer and Developer in the Karachi, Pakistan area. We’re WordPress developer’s goal is to make the world of WordPress accessible to everybody. We publish weekly in-depth WordPress tutorials and WordPress techniques on the site and to our mailing list, and we link out to cool WordPress stuff elsewhere on the web most weekdays.

Check Also

WordPress Gutenberg Editor

WordPress Gutenberg Editor