I tested my website with https://wordpress.org/plugins/rtl-tester/ plugin when wordpress language is english.It seemed good.So Do I still need to make style-rtl.css? If I need to make it, how can make and enqueue two rtl css because I have 2 theme css files? Thank you


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.

you have already enqueued the style, wp_style_add_data() does not enqueue, it adds meta data to an already enqueued style and this function does not allow for empty parameters. see below.

if (is_page_template('page-templates/full-page.php')) { 
      wp_enqueue_style( 'lucieaverillphotography_style', get_stylesheet_uri() );
      wp_enqueue_style( 'lucieaverillphotography-full-page', get_stylesheet_directory_uri() . '/css/full-page.css', array( 'lucieaverillphotography_style' ) ); 
      //wp_style_add_data( 'lucieaverillphotography-full-page' );  --> not needed & cannot be used without required inputs


But.....you could combine all your css into a single file and call this as default on all pages (call ie8 specific stylesheets if you want....), this way it can be browser cached and after the 1st visit, your css loads faster...Brush up on CSS specificity and ids/ classes, it will save you a lot of work in the long run!

If you want template specific changes to css you have a couple of options

  • if the css changes are in the article/ page, there will be usually a id/class set unique to that page (or add one yourself).

  • add custom css directly to the template (it works anywhere in the page, wont be popular with standards but for the moment you can put css rules anywhere inside style tags

  • Add a custom class into your header for the body tag, e.g. >

You can then specifically target css in your template... e.g.

page-id-2 header{ display: none;} //-->use chrome inspector to see what classes are outputted on each template

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.