How to load wordpress child theme css after parent theme css

Question

In my wordpress child theme css file loaded before main theme css. My child theme css functions.php file is given below

function my_theme_enqueue_styles(){
  wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/../enfold-child/plugins/bootstrap/css/bootstrap.min.css' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

I want to load child theme css after parent theme css.

score 25 · Accepted Answer · answered Jan 30 '17 at 16:07

25

Add the priority. Here 99 is high, so it will likely be last but some plugins may add css at a higher priority, though it's rare.

function my_theme_enqueue_styles(){
  wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/../enfold-child/plugins/bootstrap/css/bootstrap.min.css' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles', 99 );

See: https://developer.wordpress.org/reference/functions/add_action/

answered Jan 30 '17 at 16:07

Christina

34,296
17
83
119

Thanks. It works. Is there any alternative solution without setting highest priority? – Vam Jan 30 '17 at 16:11
1

Locate the parent theme's priority, dequeue it and then add it back in with no priority and then you call your style sheet – Christina Jan 30 '17 at 16:32
Thanks for your nice response – Vam Jan 30 '17 at 16:45

score 4 · Answer 2 · answered Dec 10 '18 at 17:50

According to the documentation (https://codex.wordpress.org/Child_Themes), set the parent style as a dependency of the child style, and load it in your functions.php:

<?php
function my_theme_enqueue_styles() {
    // You'll find this somewhere in the parent theme in a wp_enqueue_style('parent-style').
    $parent_style = 'parent-style';

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

Beware though, that some themes use more than one stylesheet. If that occurs, you can add any and all of them to the function like this:

    $parent_style = 'parent-style';
    $parent_style2 = 'other-parent-style';

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( $parent_style2, get_template_directory_uri() . '/inc/css/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style, $parent_style2 ),
        wp_get_theme()->get('Version')
    );

Muddasir Abbas · Answer 3 · 2022-05-16T19:38:30.697

for CHILD THEME get_stylesheet_directory_uri()

for PARENT THEME get_template_directory_uri()

function my_theme_enqueue_styles() { 

wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

wp_enqueue_style( 'owl-carousel-style', get_stylesheet_directory_uri() . '/assets/owlcarousel/assets/owl.carousel.min.css' );
wp_enqueue_style( 'owl-theme-style', get_stylesheet_directory_uri() . '/assets/owlcarousel/assets/owl.theme.default.min.css' );


wp_enqueue_script( 'owl-carousel-js', get_stylesheet_directory_uri() . '/assets/owlcarousel/owl.carousel.min.js', array(), '1.0.0', true );

}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

How to load wordpress child theme css after parent theme css

3 Answers3

Linked