• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
NameHero Blog

NameHero Blog

Web Hosting Tips & Resources From NameHero

  • Web Hosting
  • Reseller Hosting
  • Managed Cloud
  • Domains
  • Account
  • Blog Home
  • Categories

Inlining CSS In WordPress Can Be More Efficient

Bhagwad Park

Published on: March 11, 2020

Categories: WordPress 0

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:

  1. Add JSON for structured data to my page
  2. Write pieces of Javascript for individualized functionality
  3. 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:

Inlining CSS in WordPress
Inlining CSS with the Custom HTML Block

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!

Bhagwad Park Profile Picture
Bhagwad Park

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!

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow & Subscribe

Exclusive promos, content and more!

Most Popular Posts

NameHero’s Recommended WordPress Plugin and Theme Setup (2023)

How To Increase The InnoDB Buffer Pool Size

How To Fix A Stuck All-in-One WP Migration Import

How To Add A Subdomain In Cloudflare

How To Inline And Defer CSS On WordPress Without Plugins

Top Categories

  • WordPress
  • Website Performance
  • Web Hosting
  • Resellers
  • Website Security
  • VPS Hosting
  • Website Development
  • SEO Tips
  • Announcements
  • Domain Registration
NameHero

NameHero proudly provides web hosting to over 40,000 customers with 99.9% uptime to over 750,000 websites.

  • Master Card
  • Visa
  • American Express
  • Discover
  • Paypal
Name Hero
  • Web Hosting
  • Reseller Hosting
  • Managed Cloud
  • Domains
Help & Support
  • NameHero Blog
  • Knowledgebase
  • Announcements
  • Affiliates
Company
  • About Us
  • Contact Sales
  • Reviews
  • Uptime
  • We're Hiring

Copyright © 2023 NameHero, LLC. All rights reserved.

  • Privacy Policy
  • Terms of Use
  • Acceptable Use Policy
  • Payment Policy
  • DMCA