Wordpress RTL , Add RTL to theme

Question

I have a wordpress theme includes more than one css file for example

style.css
assets/main.css
assets/pager.css
assets/blog.css

and I want my site to contain two languages Arabic and English (LTR and RTL) but my theme doesn't support RTL I edited all directions in css files by create new css files

style.css
style-rtl.css
assets/main.css
assets/main-rtl.css
assets/pager.css
assets/pager-rtl.css
assets/blog.css
assets/blog-rtl.css

and now i want to know how i make WordPress use standard css files when vistor brows english (LTR) and use RTL css files when vistors brows Arabic language

BEST REGARDS

Ale Ale · Accepted Answer · 2018-08-11T07:49:31

I don't know what plugin for translation you are using so I'll assume that it is WPML. What you need to do is to edit the place where you are loading your styles. Your code should look something like this:

add_action( 'wp_enqueue_scripts', 'load_styles_by_language' );
function load_styles_by_language () {
  // check what is the current language and if it is not English then load the RTL
  if (ICL_LANGUAGE_CODE !== 'en') {
    // load the RTL style
    wp_enqueue_style( 'style_name', get_stylesheet_directory_uri . '/assets/main-rtl.css' );
  } else {
    // load the standard style
    wp_enqueue_style( 'style_name', get_stylesheet_directory_uri . '/assets/main.css' );
  }
}

ICL_LANGUAGE_CODE is a WPML global variable that holds the current language code, so if you are not using WPML for translation you should check what function or global variable your translation plugin supports for getting this information. Then just replace the ICL_LANGUAGE_CODE variable in the if statement.

This code should be added to your child theme in the functions.php file.

Wordpress RTL , Add RTL to theme

2 Answers