Adding RTL Support for WordPress

Adding RTL Support for WordPress

Andy Holland

While you will find that most web content is in English, did you know that around 75% of the internet is in another language? However, as some of these languages are read from right to left, this can affect the layout of many designs that are only designed for English. This is a problem that is actually quite easy to solve and you can do so by updating your CSS. Just a couple of design considerations need to be met and then any WordPress theme can be made to work with RTL languages.

Why You Should Add RTL Support to WordPress

While you can simply translate many languages to fit in with your WordPress theme, this won’t be enough when you are trying to integrate RTL languages as the design has to be updated too. Arabic is the most common RTL language with over 420 million speakers and around 40% have internet access. That’s a huge market that you are potentially missing out on!

Adding RTL Support to Custom WordPress Themes

The first stage you need to take is to make the RTL CSS for your theme and there’s two ways in which you can do this. One way is to put your current stylesheet into a CSS RTL generator. With this tool you can inspect the CSS to make a duplicate, however, your alignments will be switched. This will create a mirrored form of your site. This is the easiest way as the new CSS generated can then be saved as style-rtl.cc so this style can be used later.

The second method involved your overriding the system and so this can take you a little bit longer. Here, you will be manually going through every part of your CSS to move all horizontal positioning foundations into one separate file called rtl.css and you can then mirror them. This will be a smaller file but requires far more work in the long run as you will need to ensure that it is changed with all new updates and any theme changes.

Check WordPress Acknowledges the RTL Styles

When using a CSS creator tool, you’ll have to enqueue this style-rtl.css so WordPress knows when to load this version. All you need to do is add a snippet to the functions.php file. This allows WordPress to load the right stylesheet when it is set to RTL language. Simply add the wp_style_add_data() information to your existing enqueued styles function. If you are using a devoted override stylesheet the no special functions are needed.

Testing Your RTL Styles

The final step is to test your RTL styles in WordPress. To achieve this, head to Settings and the General page. Choose the first script language found in the Language drop-down box. Save this, and it should now be displayed from right to left.

With over 200 million online users speaking languages written from right to left, it is worth your time to offer RTL styles in your theme. Implement this today to open yourself up to a whole new market!

Andy Holland

Author Andy Holland

More posts by Andy Holland