How to use is_rtl with my main style.css?

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