Where To Put Custom CSS In WordPress Without A Plugin

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:

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!