wp enqueue style - Can't Workout Dependency of Stylesheets

I have enqueued a new stylesheet rk.css Ultimately I want it to load last after all other plugin css etc to override any css.

I have the following in my functions.php of my child theme:

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'rk-gp-child-style', get_stylesheet_directory_uri() . '/css/rk.css' );
    wp_enqueue_script( 'rkscript', get_stylesheet_directory_uri()  . '/js/rkscript.js',array( 'jquery' ));

}

On my site the css gets loaded like so:

<link rel='stylesheet' id='parent-style-css'  href='....../wp-content/themes/generatepress/style.css?ver=5.0.3' type='text/css' media='all' />
<link rel='stylesheet' id='rk-gp-child-style-css'  href='....../wp-content/themes/rodkits-gp-child/css/rk.css?ver=5.0.3' type='text/css' media='all' />
<link rel='stylesheet' id='generate-style-grid-css'  href='....../wp-content/themes/generatepress/css/unsemantic-grid.min.css?ver=2.2.2' type='text/css' media='all' />
<link rel='stylesheet' id='generate-style-css'  href='....../wp-content/themes/generatepress/style.min.css?ver=2.2.2' type='text/css' media='all' />
<link rel='stylesheet' id='generate-mobile-style-css'  href='....../wp-content/themes/generatepress/css/mobile.min.css?ver=2.2.2' type='text/css' media='all' />
<link rel='stylesheet' id='generate-child-css'  href='....../wp-content/themes/rodkits-gp-child/style.css?ver=1551420367' type='text/css' media='all' />
<link rel='stylesheet' id='font-awesome-css'  href='....../wp-content/plugins/learnpress/assets/css/font-awesome.min.css?nocache=1551422264.2967&#038;ver=3.2.5.2' type='text/css' media='all' />
<link rel='stylesheet' id='learn-press-css'  href='....../wp-content/plugins/learnpress/assets/css/learnpress.css?nocache=1551422264.2967&#038;ver=3.2.5.2' type='text/css' media='all' />
<link rel='stylesheet' id='jquery-scrollbar-css'  href='....../wp-content/plugins/learnpress/assets/js/vendor/jquery-scrollbar/jquery.scrollbar.css?nocache=1551422264.2967&#038;ver=3.2.5.2' type='text/css' media='all' />

So I thought I'd add a dependency for jquery-scrollbar i.e. now my functions.php has:

wp_enqueue_style( 'rk-gp-child-style', get_stylesheet_directory_uri() . '/css/rk.css',array('jquery-scrollbar') );

This however just moves jquery.scrollbar.css to load before rk.css

Help

I have enqueued a new stylesheet rk.css Ultimately I want it to load last after all other plugin css etc to override any css.

I have the following in my functions.php of my child theme:

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'rk-gp-child-style', get_stylesheet_directory_uri() . '/css/rk.css' );
    wp_enqueue_script( 'rkscript', get_stylesheet_directory_uri()  . '/js/rkscript.js',array( 'jquery' ));

}

On my site the css gets loaded like so:

<link rel='stylesheet' id='parent-style-css'  href='....../wp-content/themes/generatepress/style.css?ver=5.0.3' type='text/css' media='all' />
<link rel='stylesheet' id='rk-gp-child-style-css'  href='....../wp-content/themes/rodkits-gp-child/css/rk.css?ver=5.0.3' type='text/css' media='all' />
<link rel='stylesheet' id='generate-style-grid-css'  href='....../wp-content/themes/generatepress/css/unsemantic-grid.min.css?ver=2.2.2' type='text/css' media='all' />
<link rel='stylesheet' id='generate-style-css'  href='....../wp-content/themes/generatepress/style.min.css?ver=2.2.2' type='text/css' media='all' />
<link rel='stylesheet' id='generate-mobile-style-css'  href='....../wp-content/themes/generatepress/css/mobile.min.css?ver=2.2.2' type='text/css' media='all' />
<link rel='stylesheet' id='generate-child-css'  href='....../wp-content/themes/rodkits-gp-child/style.css?ver=1551420367' type='text/css' media='all' />
<link rel='stylesheet' id='font-awesome-css'  href='....../wp-content/plugins/learnpress/assets/css/font-awesome.min.css?nocache=1551422264.2967&#038;ver=3.2.5.2' type='text/css' media='all' />
<link rel='stylesheet' id='learn-press-css'  href='....../wp-content/plugins/learnpress/assets/css/learnpress.css?nocache=1551422264.2967&#038;ver=3.2.5.2' type='text/css' media='all' />
<link rel='stylesheet' id='jquery-scrollbar-css'  href='....../wp-content/plugins/learnpress/assets/js/vendor/jquery-scrollbar/jquery.scrollbar.css?nocache=1551422264.2967&#038;ver=3.2.5.2' type='text/css' media='all' />

So I thought I'd add a dependency for jquery-scrollbar i.e. now my functions.php has:

wp_enqueue_style( 'rk-gp-child-style', get_stylesheet_directory_uri() . '/css/rk.css',array('jquery-scrollbar') );

This however just moves jquery.scrollbar.css to load before rk.css

Help

• wp-enqueue-style
• css

Share Improve this question asked Mar 1, 2019 at 6:48 PragmanPragman 11111 bronze badge

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Try below:

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

the 99 in the hook is a priority argument. you can increase or decrease it.