I’ve appeared round as finest I might, however I couldn’t discover a answer to this drawback. I’m constructing a customized WordPress template from scratch and the stylesheets will not load. For some purpose, the javascript does. Here’s what I’ve:
The enqueue in features.php
<?php
operate test_enqueue_styles(){
wp_enqueue_style('test-style', get_template_directory_uri() . "/style.css", array('test-bootstrap-css'), wp_get_theme()->get( 'Model' ));
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');
operate test_enqueue_scripts(){
wp_enqueue_script('test-bootstrap-js', get_template_directory_uri() . "/assets/js/scripts.js", array(), wp_get_theme()->get( 'Model' ));
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 fashion in fashion.css:
/*
Theme Title: Check Theme
Theme Area: Check Theme
Model: 1.0
Description: A check theme for WordPress
Writer: Me
*/
physique{
background-color: crimson !necessary;
}
the one web page with content material is front-page.php:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta title="viewport" content material="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>Hiya World</title>
<hyperlink rel="icon" sort="image/x-icon" href="assets/favicon.ico" />
<!-- Stylesheets-->
<?php
wp_head();
?>
<!--NOTE THESE COMMENTED LINES-->
<!-- <hyperlink href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet" />
<hyperlink href="wp-content/themes/testtheme/assets/css/bootstrap.css" rel="stylesheet" />
<hyperlink href="wp-content/themes/testtheme/style.css" rel="stylesheet" /> -->
</head>
<physique>
<div class="container">
<h1 class="jumbotron">Hiya World</h1>
</div>
<?php
wp_footer();
?>
</physique>
</html>
Once I uncomment the strains talked about in front-page.php, The web page works excactly as supposed. In any other case, the three stylesheets don’t load from wp_head(). Interval. They do not seem on the web page supply and should not referenced within the developer instruments community tab no matter what number of occasions I hit ctrl+f5.
Surprisingly sufficient, the script enqueue from the identical file masses the scripts. The scripts present up within the community tab and a console log in scripts.js outputs to the console. It is simply the stylesheets that bug out. Bootstrap is v5.1.2, downloaded instantly from getbootstrap.com
I’ve additionally tried the next for features.php:
<?php
operate test_enqueue_styles(){
wp_register_style('test-style', get_template_directory_uri() . "/style.css", array('test-bootstrap'), wp_get_theme()->get( 'Model' ));
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 similar as above
?>
Nothing appears to work! Is there one thing I’m lacking?
I’m working WordPress Model 5.8.1 if that issues.