0

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

<?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/bootstrap-icons@1.4.1/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/bootstrap@5.1.1/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
*/

body{
    background-color: crimson !important;
}

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <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-->
        <?php
            wp_head();
        ?>

<!--NOTE THESE COMMENTED LINES-->
        <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/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" /> -->
    </head>
    <body>
        <div class="container">
            <h1 class="jumbotron">Hello World</h1>
        </div>
    
    <?php
       wp_footer();        
    ?>
    </body>
</html>

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:

<?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/bootstrap-icons@1.4.1/font/bootstrap-icons.css", array(), '1.0');

    wp_enqueue_style('test-style');
    wp_enqueue_style('test-bootstrap');
    wp_enqueue_style('test-icons');
}
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

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, privacy policy and cookie policy

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