How to use is_rtl with my main style.css?

Sorry if this is an ignorant question. I’m a first timer on working with rtl languages. Say we have a theme with standard style.css for English languages. so I use is_rtl() and this returns TRUE, we won’t load the style.css and only rtl.css?

IF someone can provide an example on this on loading rtl.css on rtl languages and style.css on other languages (aside from the WordPress documentation which I already seen), I would be happy. Thanks.

2 Answers
2

In your theme, you enqueue the stylesheet usually like this:

add_action( 'wp_enqueue_scripts',   't5_enqueue_style' );

function t5_enqueue_style()
{
    wp_enqueue_style(
        'theme-name-default',
        get_template_directory_uri() . '/css/default.min.css'
    );
}

The extra RTL stylesheet is enqueued here too, listing the default as dependency:

if ( is_rtl() )
{
    wp_enqueue_style(
        'theme-name-rtl',
        get_template_directory_uri() . '/css/rtl.min.css',
        array ( 'theme-name-default' )
    );
}

So the complete code is:

add_action( 'wp_enqueue_scripts',   't5_enqueue_style' );

function t5_enqueue_style()
{
    wp_enqueue_style(
        'theme-name-default',
        get_template_directory_uri() . '/css/default.min.css'
    );

    // extra RTL stylesheet

    if ( is_rtl() )
    {
        wp_enqueue_style(
            'theme-name-rtl',
            get_template_directory_uri() . '/css/rtl.min.css',
            array ( 'theme-name-default' )
        );
    }
}

Leave a Comment