Supporting Right-to-Left (for Arabic) in WordPress: the Easy Way

This post is an update of previous old post: Supporting right to left writing (for Arabic) in WordPress

In my blog I write in both languages English and Arabic, but I have to switch text direction from the template default English direction “Left to Right” to Arabic “Right to Left”.
One way do to it is to add HTML tags in each Arabic entry, you can also add a “Custom Field” in the post and add special processing instruction in your template to add the needed “RTL” HTML tags.

I found an easier way to do it, I noticed that WordPress new templates add an HTML class to your post for each “Tag” you add in your post, e.g. if you add a tag named “python” in the post you will get “.tag-python” in your HTML, so I decided to utilise this facility by adding the tag “arabic” to any post I want to view in Arabic, and I added the needed CSS attributes to the class “.tag-arabic”.

You can even change you CSS from the admin interface, from “Appearance > Edit CSS” then added the following CSS snippet:

.tag-arabic {
	direction: rtl;
	text-align: right;
	font-size: 130%;

Note: I enlarged the font size in Arabic posts for readability, Arabic font don’t render very well in small sizes.

21 thoughts on “Supporting Right-to-Left (for Arabic) in WordPress: the Easy Way”

  1. Dear @Mohammad Anan I’ve installed this plugin but it not work when I bullet some text. Bullets showed on left hand side instead of right hand side. Is there any other solution?

  2. Does this mean I just insert tag, for example , in my editor? Is it like: test ?
    And I just set the tag’s rule under my CSS with .tag-arabic?

  3. Ups, I can’t give example tag here.
    But I know you understand what I mean for my question above.

  4. Hello,
    I have a question about writing in Arabic in an English template. Everything works fine, except when I write the dot or period “.”, it goes to the right side of the line, where it should be at the end-left of the line. Anyway I can fix this?

    Thanks in advance

  5. I don’t have access to the source CSS of the entire template, because it’s a free one. But I have tried to add to the required paragraph, but it still reflecting the dot to the wrong side 🙁

  6. sorry the comment box deletes the HTML code! what I have added was an embedded style for a containing div, and that style was “direction=right” but still it didn’t work!

  7. Sorry it is suppose to be “rtl” not “right”, so embedded style would look like:

    < div style=”direction:rtl;”>

    Note: “:” not “=”

  8. Hi Rayed,

    I have installed WordPress from a hosting company and hence I’m not using any programming languages, in that case how can I align my text from right to left and also how can I get the sidebar on the right hand instead of the left?

    Thanks in advance for your reply.

  9. Hi,
    I have a website and have used wordpress and wpml. now i have created the rtl.css as well but how to connect this rtl to site.
    it should be rtl.css activated only when my language attribute is ar. while for en it should load the main.css and style.css
    Can anybody help me that i want to flip my whole site from left to right by changing the language from en to ar. i have used direction:rtl; in my css.

  10. Hi Rayed,
    This is a great solution. I run a multilingual website and wasn’t able to publish RTL-content. Now I can do that, thanks to this wonderful piece of CSS!

Leave a Reply

Your email address will not be published. Required fields are marked *

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