wp_enqueue_style not loading CSS

Question

I am attempting to load a script using wp_enqueue_style following the advice on the Wordpres Codex, but the script doesn't seem to be included in the source. Is this the correct way to do it?

    function load_scripts() {
        wp_enqueue_style('bootstrap.css', get_template_directory_uri() . '/css/bootstrap.min.css');
    }
    add_action('wp_enqueue_scripts', 'load_scripts');

Answer 1

Your action and function looks fine from here. The wp_enqueue_scripts hook should work perfectly for both stylesheets and scripts.

Have you tried echoing something out in the function to see if it's actually being called at all? I.e:

    function load_scripts() {
        echo "Does this output to the actual page?";
        wp_enqueue_style('bootstrap.css', get_template_directory_uri() . '/css/bootstrap.min.css');
    }
    add_action('wp_enqueue_scripts', 'load_scripts');

If it's not, you might have a problem with your placement of the code, but if you keep everything in functions.php and outside of any other scope this shouldn't be a problem. Another thing that can cause this behaviour is if you have already registered a stylesheet or script with the same handle ("bootstrap.css" in this case). The first argument in the wp_enqueue_style() function is just a handle for internal dependency management and should be unique, try renaming it to something else and see if that fixes your problem.

Answer 2

1. Okay, first step is to ensure you are using the correct path of the CSS file. Add the following line in the functions.php of your theme or other appropriate place.

    print( get_template_directory_uri() . '/css/bootstrap.min.css' );
   

   This should print the URL of your desired stylesheet on top of the page. Copy and paste this URL in a new tab, if it opens a stylesheet then you are good to go. Otherwise, there is a mistake in the path.

2. Second step is to ensure that wp_head() is being called on the page you are displaying. It can be placed in your header template or top of archives/post files etc. This function actually renders the styles and scripts on the page.

   Without wp_head(), its basically useless to enque anything as you can add links and scripts manually if you know the exact paths.

Answer 3

Note that in admin mode there is a special hook 'admin_enqueue_scripts'. So, if there is need to load CSS in both modes, it should be done on two hooks.

function load_scripts() {
    wp_enqueue_style('bootstrap.css', get_template_directory_uri() . '/css/bootstrap.min.css');
}

add_action('wp_enqueue_scripts', 'load_scripts');    
add_action('admin_enqueue_scripts', 'load_scripts');

Answer 4

You are trying to enqueue style on wp_enqueue_scripts hook. Try wp_print_styles.

add_action('wp_print_styles', 'load_scripts');

Also try to register style, first.