wp enqueue style – Custom WordPress Theme loads js but not stylesheets

Question

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-icons1.21 gigawatts.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/bootstrap15eme Doctor.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-icons1.21 gigawatts.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-icons1.21 gigawatts.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.

0
N.MORR 2 weeks 2021-10-06T20:44:26-05:00 0 Answers 0 views 0

Leave an answer

Browse
Browse