Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to load wordpress child theme css after parent theme css

Tags:

css

php

wordpress

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.

like image 432
Vam Avatar asked Jan 30 '17 14:01

Vam


2 Answers

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/

like image 121
Christina Avatar answered Oct 24 '22 12:10

Christina


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')
    );
like image 36
Vörös Imi Avatar answered Oct 24 '22 11:10

Vörös Imi