CODEWITHSUNDEEP
csswordpressright-to-left
ُEcarv
ُEcarv

Reputation: 11

Wordpress RTL , Add RTL to theme

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

Upvotes: 1

Views: 1559

Answers (4)

DrLightman
DrLightman

Reputation: 673

A more modern way is well documented at https://codex.wordpress.org/Right-to-Left_Language_Support

The first method they suggest consists in preparing - better automagically with RTLCSS util - a corresponding style-rtl.css based upon your handcrafted style.css. (prompt/terminal cmd line be like: $ rtlcss style.css style-rtl.css)

Then enqueue your style normally and do use the wp_style_add_data function to let know WP that an rtl version exists to use in place of the standard style.css ltr version.

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

There is a second method they suggest in the codex but it seems more convoluted so I leave to the reader if he wants to go into detail.

Upvotes: 0

umusi
umusi

Reputation: 167

the best way to do that:

if(is_rtl()){
            wp_enqueue_style( 'theme-rtl-style', get_template_directory_uri() . '/style-rtl.css', array(), '1.0.0' );
    }

Upvotes: 0

ُEcarv
ُEcarv

Reputation: 11

I couldn't understand how if if (ICL_LANGUAGE_CODE !== 'en') { // load the RTL style

the second language is ar (arabic) and theme has 13 css files

Upvotes: 0

Ale
Ale

Reputation: 1032

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.

Upvotes: 1

Related Questions