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

NameHero® Blog

Web Hosting Tips & Resources From NameHero

  • Hosting
    • Web Hosting
    • VPS Hosting
    • WordPress Hosting
    • WooCommerce Hosting
  • Reseller
  • Enterprise
  • Domains
  • Account
  • Blog Home
  • Categories
  • Authors

Where To Put Custom CSS In WordPress Without A Plugin

Bhagwad Park

Published on: February 11, 2019

Categories: WordPress 5

The default way in WordPress to include custom CSS is to use the “Additional CSS” feature in the theme customizer under “Appearance” in the dashboard like this:

Custom CSS in WordPress

While this is an easy and convenient way to insert additional CSS for your theme, it’s fatally flawed because the system uses a GET request for the CSS, and doesn’t create a static file. So even though the database will cache the request and serve it quickly, it can’t propagate to the EDGE servers of your CDN, and therefore slows your site down.

So you should generally avoid using the Theme customizer for custom CSS, and instead choose another solution. There are many plugins that will do a great job, but I like to avoid additional plugins whenever possible for two reasons:

  1. Lots of plugins include additional functionality that you don’t need and adds bloat to your site
  2. Plugins might not be updated, or they may break

Don’t Use style.css

The natural workaround that many sites advocate is to simply add the rules to your theme’s “style.css” file. After all, it’s already loaded into WordPress, and doesn’t require any additional configuration. However, there are two problems with this.

First, if you’re not using a child theme, then any updates to the theme will automatically overwrite style.css. This means that you lose all your custom CSS irrevocably. And unless you have a site backup, there’s no way you’re pretty much out of options. You can see here how to create a child theme from a parent theme.

The other drawback of using style.css is that you’ll be modifying it relatively frequently. And each time you modify it, it will invalidate the EDGE caches of your CDN. Instead, we want to have our CSS separated into two distinct packets – unchanging CSS, and frequently modified CSS.

By separating the CSS into those rules present in “style.css”, and the others, we ensure that the former will always be served in a timely manner, and on the other rules will be invalidated. When it comes to site speed, every little bit helps!

So I prefer a custom solution for adding CSS, that solves the problem of static files and EDGE servers. Here’s how we do it.

Step 1: Create a New “custom-css.css” File

For this to work, you need to access your site via FTP, or through the cPanel file manager. Now navigate to the following directory:

yoursitefolder/wp-content/themes/[yourthemename]/

In the above line, replace yoursitefolder with the folder in which you have installed WordPress, and yourthemename with the folder containing your theme files. You can get the theme name by taking a look at your site’s source code and seeing the directory in which style.css lives.

Now create a blank new file called “custom-css.css” on your Desktop, and upload it to this directory.

Step 2: Adding Code to WordPress

Once you’ve done that, add the following code to your WordPress installation:

function add_custom_css() {
    wp_enqueue_style( 'custom-css_style', get_stylesheet_directory_uri() . '/custom-css.css' );
 }
 add_action( 'wp_enqueue_scripts', 'add_custom_css' );

If you don’t know how to do this, you can read my tutorial on how to add custom code snippets to WordPress in the NameHero knowledgebase. This code will load the rules from “custom-css.css” into your theme on every page load.

Step 3: Add your Additional CSS to custom-css.css

Now all you need to do is write your new CSS rules into the uploaded file and you’re done! You’ve created a solution that belongs only to yourself and is perfectly cache friendly. This solution is scalable, will never break on any plugin or theme update.

As of now, this is my recommended method for adding custom CSS into WordPress rather than using the theme customizer, or a dedicated plugin. I hope you found it useful!

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!

Related Posts

Speed up your site: solving the WordPress slowdown

Don't let a slow WordPress site affect your conversion rates! Explore our comprehensive guide to optimize loading speeds and offer a superior user experience. %

How To Use The Layout Grid Block By Automattic

The Layout Grid Block is developed by Automattic, and is a great way to structure your page content. But it's not as good as GenerateBlocks.

You Should Manually Compress Your WordPress Images To WebP

Here's why you must manually compress your JPEG or PNG images to WebP, , and why WordPress 6.1 dropped the idea of automatic conversion.

How To Fix “Sorry, this file type is not permitted for security reasons.”

Chances are pretty high that you landed here because you are having trouble trying to upload some files to your WordPress – Media Library. You likely have run into one of the following error messages when attempting the upload: "Sorry, this file type is not permitted for security reasons." OR "Sorry, you are not allowed […]

Reader Interactions

Comments

  1. chris says

    February 23, 2019 at 9:55 am

    hello,

    when i tried to add the PHP code in the plugin file: i got this message

    Your PHP code changes were rolled back due to an error on line 6 of file wp-content/plugins/custom-plugin-code/custom-plugin-code.php. Please fix and try saving again.

    syntax error, unexpected ‘-‘, expecting ‘(‘

    do you know why?

    thanks a lot

    chris

    Reply
  2. chris says

    February 23, 2019 at 10:03 am

    sorry, the line 6 is this :

    function add_custom-css() {

    thanks

    chris

    Reply
    • Bhagwad Park says

      February 26, 2019 at 1:46 pm

      Hi Chris,

      Could you post your entire custom-plugin-code.php file?

      Reply
  3. Mohsin Ul Islam says

    August 5, 2020 at 10:14 am

    use this instead,

    function add_custom_css() {

    don’t use minus sign in function names.

    Reply
    • Bhagwad Park says

      April 25, 2022 at 12:01 pm

      Made the change. Thanks!

      Reply

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)

WordPress Hosting vs. Web Hosting – What’s The Difference?

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

Top Categories

  • WordPress
  • WordPress Tutorials
  • Enterprise Hosting
  • WooCommerce
  • Web Hosting
  • Resellers
  • Website Security
  • Website Development
  • Website Performance
  • VPS Hosting
  • 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
Products
  • Web Hosting
  • VPS Hosting
  • WordPress Hosting
  • WooCommerce Hosting
  • Reseller Hosting
  • Enterprise Hosting
  • Domains
Help & Support
  • NameHero Blog
  • Support
  • Help Center
  • Migrations
  • Affiliates
  • Call 1-855-984-6263
Company
  • About Us
  • Contact Sales
  • Reviews
  • Uptime
  • We're Hiring

Copyright © 2023 Name Hero, LLC. All rights reserved.
NameHero® is a registered trademark.

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