0

I'm in the process of adding a jQuery plugin to a site I'm working on. Needless to say it requires loading a custom script; also a custom stylesheet.

Starting with the stylesheet I've been attempting to go about it the normal way by utilizing wp_register_style() and wp_enqueue_style() like so:

if ( ! function_exists( 'add_additional_css' ) ) {
    function add_additional_css() {
        wp_enqueue_style( 'webmarket-child', get_stylesheet_uri() , array( 'main' ) );
        wp_register_style( 'slick', get_stylesheet_directory_uri() . '/slick/slick.css', array( 'jquery' ) );
        wp_enqueue_style( 'slick' );
    }
    add_action( 'wp_enqueue_scripts', 'add_additional_css', 20 )

This is from the functions.php of my child theme which is why it's also including an enqueued style of 'webmarket-child'.

I've checked and double checked my code and I don't think anything is wrong but the stylesheet isn't loading.

What could be preventing this from loading?

Sidebar: When I was originally creating the child theme, I was having issues getting the child stylesheet to load was well. Only by adding the above code was I able to make the stylesheet load. The best practice of:

add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' );
    function enqueue_parent_theme_style() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

failed to work. I can't help but think that what caused that to fail also has something to do with why I can't get an additional stylesheet to load.

3 Answers 3

0

hey please include style sheet like this

<?php

add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' );
    function enqueue_parent_theme_style() {
    wp_enqueue_style( 'parent-style', get_stylesheet_uri() );
}

and also stylesheet not require to load jQuery so please change your code to like this

if ( ! function_exists( 'add_additional_css' ) ) {
function add_additional_css() {
    wp_enqueue_style( 'webmarket-child', get_stylesheet_uri() , array( 'main' ) );
    wp_register_style( 'slick', get_stylesheet_directory_uri() . '/slick/slick.css');
    wp_enqueue_style('slick');
}
add_action( 'wp_enqueue_scripts', 'add_additional_css', 20 ) 

I think it will work fine.

1
  • Thank you for taking the time to answer. However, I tried including the stylesheet like you suggested and it whitescreened my site so I had to switch back. For whatever reason, that does not load the stylesheet like it is supposed to. I also attempted adding the slick stylesheet like you suggested and that's the same method I've been attempting but not having any success with. I'm still stuck. Thanks again, though. Dec 11, 2014 at 20:10
0

You have wrong dependency array in this line:

wp_register_style( 'slick', get_stylesheet_directory_uri() . '/slick/slick.css', array( 'jquery' ) );

See, you want to load slick.css file, but it depends on jquery CSS which does not exist.

Jquery dependency is only available for scripts.

0

you want use slick slider css and js you can enqueue scripts.

   if ( ! function_exists( 'add_additional_css' ) ) {

 //Enqueue scripts
add_action('wp_enqueue_scripts', 'add_additional_css', 20);

function wp_enqueue_all_scripts(){

    //add slick slider
    wp_register_style('slickcss', get_template_directory_uri() . '/slick/slick.css' );
 

    //load slick js
    wp_register_script('slickslider', get_template_directory_uri() . '/slick/slick.min.js', array('jquery'), '', true );

    ////load slick initiate script
    wp_register_script( 'slickinit', get_template_directory_uri() . '/your-custom-folder/js/custom-slick-init.js',  array( 'jquery' ) );

    // load slick on page
    
        wp_enqueue_style( 'slickcss' );
        wp_enqueue_script ('slickslider');
        wp_enqueue_script ('slickinit');
        
}

}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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