Why won't my Custom CSS Load

Question

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.

Answer 1

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.

Answer 2

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.

Answer 3

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');
        
}

}