You are here

Add RTL Support to WordPress Themes - for non Developers

You found the perfect theme for your new blog. However it lacks RTL support. Here's a way to quickly add RTL support to your theme without the need to type a single line of code.

1. Locate your "Main Stylesheet"

The main stylesheet is a file named style.css that is located at the root directory of your theme. So if your theme directory name is "my-theme", your style.css will be at "~/path/to/wordpress/wp-content/themes/my-theme/style.css"

2. Generate rtl.css

WordPress supports RTL themes, it looks for a file named "rtl.css" and loads it if the language of the blog is a right-to-left one(like Arabic or Farsi).

To generate this, we'll going to use the superb tool RTLCSSIt's a:

Framework for converting Left-To-Right (LTR) Cascading Style Sheets(CSS) to Right-To-Left (RTL)

Lucky for us, they have an online version of it we can use online without the need to install anything. Go to the RTLCSS Playground, and in the Input LTR CSS(first column on the left,) paste the contents of your style.css file. It'll automatically do the conversion and you'll see your RTLed CSS in the Output RTL CSS(the column on the right). Copy what's there and paste it in a new file named rtl.css and upload it to your theme root. Your final structure should be like:

~/path/to/wordpress/wp-content/themes/
├── my-theme/
│   ├── style.css
│   ├── rtl.css

3. Enjoy your RTLed WordPress theme

And that's it, refresh your page and enjoy your new RTLed WordPress theme.

 

 

 

No votes yet