I have looked around as best I could, but I could not find a solution to this problem. I am building a custom WordPress template from scratch and the stylesheets won't load. For some reason, the javascript does. Here is what I have:

The enqueue in functions.php


function test_enqueue_styles(){
    wp_enqueue_style('test-style', get_template_directory_uri() . "/style.css", array('test-bootstrap-css'), wp_get_theme()->get( 'Version' ));
    wp_enqueue_style('test-bootstrap-css', get_template_directory_uri() . "/assets/css/bootstrap.css", array(), '5.1.2');
    wp_enqueue_style('test-icons', "https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css", array(), '1.4.1');

add_action( 'wp_enqueue_style', 'test_enqueue_styles');

function test_enqueue_scripts(){
    wp_enqueue_script('test-bootstrap-js', get_template_directory_uri() . "/assets/js/scripts.js", array(), wp_get_theme()->get( 'Version' ));
    wp_enqueue_script('test-bootstrap-js', get_template_directory_uri() . "/assets/js/bootstrap.js", array(), '5.1.2');
    wp_enqueue_script('test-bootstrap-bundle', "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js", array(), '5.1.1');
add_action( 'wp_enqueue_scripts', 'test_enqueue_scripts');


my testing style in style.css:

Theme Name: Test Theme
Theme Domain: Test Theme
Version: 1.0
Description: A test theme for WordPress
Author: Me

    background-color: crimson !important;

the only page with content is front-page.php:

<!DOCTYPE html>
<html lang="en">
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <title>Hello World</title>
        <link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
        <!-- Stylesheets-->

        <!-- <link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel="stylesheet" />
        <link href="wp-content/themes/testtheme/assets/css/bootstrap.css" rel="stylesheet" />
        <link href="wp-content/themes/testtheme/style.css" rel="stylesheet" /> -->
        <div class="container">
            <h1 class="jumbotron">Hello World</h1>

When I uncomment the lines mentioned in front-page.php, The page works excactly as intended. Otherwise, the three stylesheets do not load from wp_head(). Period. They don't appear on the page source and are not referenced in the developer tools network tab regardless of how many times I hit ctrl+f5.

Strangely enough, the script enqueue from the same file loads the scripts. The scripts show up in the network tab and a console log in scripts.js outputs to the console. It's just the stylesheets that bug out. Bootstrap is v5.1.2, downloaded directly from getbootstrap.com

I have also tried the following for functions.php:


function test_enqueue_styles(){
    wp_register_style('test-style', get_template_directory_uri() . "/style.css", array('test-bootstrap'), wp_get_theme()->get( 'Version' ));
    wp_register_style('test-bootstrap', get_template_directory_uri() . "/assets/css/style.css", array(), '1.0');
    wp_register_style('test-icons', "https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css", array(), '1.0');

add_action( 'wp_enqueue_style', 'test_enqueue_styles');

//javascript same as above

Nothing seems to work! Is there something I am missing?

I am running WordPress Version 5.8.1 if that matters.

1 Answer 1


Theres no such hook as wp_enqueue_style. Stylesheets need to be enqueued on the wp_enqueue_scripts hook, as seen in the documentation.

So this:

add_action( 'wp_enqueue_style', 'test_enqueue_styles');

Needs to be:

add_action( 'wp_enqueue_scripts', 'test_enqueue_styles');

I'd also suggest reviewing the documentation on hooks, to understand what add_action() does.

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.