Today we’re going to take a look at how to enqueue stylesheets in a WordPress block theme. My main stylesheet for a newly created custom WordPress block theme wasn’t loading after several tries and I couldn’t figure out what was going on.
Every search result was just saying , “Oh, you gotta enqueue your stylesheet, just paste this code in…” but it never worked, even after replacing the parts where you had to specifiy the filename and filepath specific to the sheet you’re trying to load.
The Root of My Problem
After several tries, I finally figured it out. My problem wasn’t with
wp_enqueue_style(), but rather
get_stylesheet_uri(), both of which are frequently used to enqueue stylesheets in a wordpress block theme.
get_stylesheet_uri() returns the the actual file named
style.css (required to have a theme)
get_stylesheet_directory_uri() returns the filepath to the root of your theme directory (without the trailing slash), so example output would be
And if that wasn’t enough, there’s one more bit of key information about
In the event a child theme is being used, this function will return the child’s theme directory URI. Use
get_template_directory_uri() to avoid being overridden by a child theme
Anyway, all that said, if your stylesheet isn’t loading right off the bat, be sure to double check which functions you’re calling in addition to
wp_enqueue_style() just to make certain you’re actually pointing to the stylesheet or JS file you’re trying to load.
/* Theme Name: Twenty Twenty Theme URI: https://wordpress.org/themes/twentytwenty/ Author: the WordPress team Author URI: https://wordpress.org/ Description: Our default theme for 2020 is designed to take full advantage of the flexibility of the block editor. Organizations and businesses have the ability to create dynamic landing pages with endless layouts using the group and column blocks. The centered content column and fine-tuned typography also makes it perfect for traditional blogs. Complete editor styles give you a good idea of what your content will look like, even before you publish. You can give your site a personal touch by changing the background colors and the accent color in the Customizer. The colors of all elements on your site are automatically calculated based on the colors you pick, ensuring a high, accessible color contrast for your visitors. Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks, accessibility-ready Version: 1.3 Requires at least: 5.0 Tested up to: 5.4 Requires PHP: 7.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: twentytwenty This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. */
Just a side note, apparently
style.css that sits in the root of your theme directory exists for the sole purpose of registering the theme name, author, version, and all that. It’s never intended to hold the actual style code for the theme (I think).
It might work for you, but the minute I tried to enqueue the
style.css file that contained all the registration info, it immediately broke the entire site. Of course, I could have been enqueuing it incorrectly too. Anyway, just a thought.
Enqueue Stylesheets Update (8/10/22):
I recently discovered that putting all my child theme styles in an external stylesheet and enqueuing it from a subdirectory via
functions.php has caused some strange issues for me when I try to use the Divi Builder.
It appears that this method of loading child theme stylesheets prevents the CSS from loading in the visual builder.
This issue has caused me to rethink my strategy when it comes to enqueuing stylesheets. I have since moved all my styling rules to the primary
style.css (used to register the theme) and ditched the function call that enqueues the stylesheet from the child theme’s subdirectory. This move solved all the issues I was experiencing with the visual builder, but I’m still not sure what I was breaking and how I was breaking it.