If you search for any guide on the Internet on the “proper” way to include CSS in WordPress, you’ll get a lot of advice telling you to hook into the “wp_enqueue_scripts” function and attach your external CSS file from there. Heck, I myself have explained how to do this in an earlier tutorial!
This advice is correct – but most in the specific situation where you want that function to be called on every page load, and you want that CSS to be applied for every single visitor. Now you can try some magic and load the CSS only on certain pages by using “if” conditions, but that hook is going to be called all the time. This invariably incurs a cost on page load speeds. It’s not much, but over time these things can add up. Besides, it might just be against your philosophy to include CSS globally when you really only need it for a few specific pages.
Honestly, there wasn’t much of an option before. But now with Gutenberg, I’ve found a more flexible way, and it involves using the magical “Custom HTML” block.
Adding HTML and CSS to a Page is Now Easy
There was a time when adding HTML to WordPress directly into the text editor was a nightmare. You had to use all kinds of workarounds like shortcodes and stuff to make sure that what you entered came out the way you wanted. In fact, it was a good idea to never use HTML in the WordPress editor, ever.
Then Gutenberg came along and changed
“Custom HTML” is Pure Magic
When Gutenberg first came out, I hated it. It was buggy, and a lot of the design elements were out of touch with how writers actually wrote. But one year later, I had changed my mind completely. I began to see its versatility, and when the bugs were iron out, it allowed me to “craft” my pages instead of just “write” them.
But man, the Custom HTML block is the king. It managed to actually replace a bunch of plugins that I needed earlier. For example, I use it to:
- Add JSON for structured data to my page
- Write pieces of Javascript for individualized functionality
- Inline specific CSS for specific pages without hooking it up to a centralized system
Inlining CSS with the Custom HTML Block
For example on one of my pages, I wanted all the links in my table to be underlined. So I wrote this little CSS code snippet:
<style type="text/css">
.tg a {
text-decoration: underline;
}
</style>
Using the Custom HTML block, I was able to paste it just above my table like this:
And that’s it! No more fiddling around with functions.php. No more adding the code to a separate external CSS file. No additional page load when a user visits. No need for an additional plugin. Nothing! Just a regular block of HTML that performs a very specific “one and done” piece of functionality. It’s elegant, doesn’t use any resources, and is transparent since it’s placed neatly above the element that it affects.
Inlining CSS Like This Make Your Site More Efficient
With a solution like this, you’re essentially creating two types of CSS – one that’s global and that applies to all your pages, or only a specific set of them. And the other is quick and dirty CSS that only applies to a particular page and nowhere else.
Previously, you had to use the same global and centralized solution to manage both types of CSS. Now you can still use the centralized system for global code and use the extensible Custom HTML block for the “tail” CSS scenarios. It’s perfect!
I’m a NameHero team member, and an expert on WordPress and web hosting. I’ve been in this industry since 2008. I’ve also developed apps on Android and have written extensive tutorials on managing Linux servers. You can contact me on my website WP-Tweaks.com!
Leave a Reply