0

A client website is using Ultimate Visual Composer Addons plugin, which load its CSS file after the parent and child theme stylesheets.

How do I load the child theme stylesheet after the Ultimate Visual Composer Addons stylesheet?

Help appreciated.

Update: from @the_dramatist's answer, I've created a functions.php in the child theme, and added:

add_action( 'wp_enqueue_scripts', 'ross_north_child_theme_scripts' );
function ross_north_child_theme_scripts() {
    wp_dequeue_style( 'houzez-style-css' );
    wp_enqueue_style( 'houzez-style-css', 'http://rossnorth.websitetechnology.com.au/wp-content/themes/houzez-child/style.css', array('ultimate-style-min-css' ), null, 'all' );
}

but ultimate-style-min-css is still loading after houzez-style-css at this site.

  • Have you tried setting the priority like wp_enqueue_scripts('script','function',10,3) ? – Jack Johansson May 22 '17 at 5:44
  • 1
    I've two questions, 1) How you wanna do it ? through a custom plugin or you've access to the themes functions.php And 2) Have you found out the handles of Visual Composer Addons stylesheet ? If not then find them first. – CodeMascot May 22 '17 at 7:01
  • Thanks @the_dramatist. 1) I have access to functions.php, and 2) the handle is ultimate-style-min-css. Thanks. – Steve May 23 '17 at 4:41
0

Well, currently two different ways are coming to my head-

One way could be, using ultimate-style-min-css as a dependency of your child theme style.css-

/**
 * Say this below function is your theme enqueue
 */
function the_dramatist_child_theme_scripts(){
    wp_enqueue_style ('your-child-theme-css','YOUR CSS URL HERE', array( 'ultimate-style-min-css' ), null, 'all');
}
add_action('wp_enqueue_scripts','the_dramatist_child_theme_scripts');

Another would be using wp_dequeue_style first then enqueue the child theme style with ultimate-style-min-css as a dependency-

/**
 * Here we first dequeue the style and then we'll enqueue the child theme style again with ultimate-style-min-css as a dependency.
 */
add_action( 'wp_enqueue_scripts', 'ross_north_child_theme_scripts' );
function ross_north_child_theme_scripts() {
    wp_dequeue_style( 'houzez-style-css' );
    wp_enqueue_style( 'houzez-style-css', get_stylesheet_directory_uri() . '/style.css', array('ultimate-style-min-css' ), null, 'all' );
}

An update after the question has been updated.

Last way in my mind is, that if your child theme stylesheet is being enqueued at wp_head with a lower priority than your plugins stylesheet's priority then the solution would be to use the same wp_head hook, with a lower priority for your plugin stylesheet.

Hope the above helps.

  • Thanks. The first answer probably won't work, as the child theme is not enqueuing its style.css in functions.php. I've updated my question with a note about the 2nd method. – Steve May 24 '17 at 5:17
  • Try the updated code. @Steve – CodeMascot May 24 '17 at 5:21
  • Check if child theme is activated or not. Then clear cache and try again. Cause I just checked your site and has not found any houzez-style-css. – CodeMascot May 24 '17 at 5:35
  • Child theme is activated. I see houzez-style-css when logged in as admin, but not when logged out. Site used to have WP Rocket activated, but that is now deactivated. Cleared browser cache and houzez-style-css still not present when logged out. No caching plugins active. Potentially it is server caching. – Steve May 24 '17 at 5:44
  • I reactivated WP Rocket, but turned caching off. houzez-style-css is now present for logged off users. – Steve May 24 '17 at 5:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.