Need to add custom CSS to WordPress? As you become more familiar with WordPress, you'll almost certainly want to add at least a little bit of custom CSS to your site. I know I do - every WordPress site I launch has at least a couple of tweaks to get things just right.
But adding custom CSS to WordPress can be a bit tricky because it's not a good idea to just edit your parent theme's stylesheet and stick your code right there.
To help you add custom CSS to WordPress in the right way, I'm going to share four different methods that you can use, each with something that makes it unique. I'll cover everything from the WordPress Customizer to enqueuing your own custom stylesheet so that you can find the method that's right for you.
Let's jump in.
Method 1: Use The WordPress Customizer
I'm going to start with the WordPress Customizer because it's the most accessible method, but it's not necessary my personal favorite method (that's Method 2).
Pros Of Using The WordPress Customizer For CSS:
- You don't need to do any setup or install a plugin. It's part of the WordPress core.
- You can see your custom CSS changes on a real-time preview of your site.
- It includes basic validation to ensure you don't mess anything up.
Cons Of Using The WordPress Customizer For CSS:
- Any custom CSS that you add is tied to your theme. So if you change themes, you'll need to copy over your custom CSS.
How To Use The WordPress Customizer For CSS:
Launch the WordPress Customizer interface by going to Appearance → Customize in your WordPress dashboard:
Then, click on the option for Additional CSS in the WordPress Customizer sidebar (it should be at the bottom):
Now, simply add your custom CSS to the box. If you mess up any syntax, the editor will alert you to your errors:
When you're finished adding custom CSS, click Publish to make your changes live.
Method 2: Use The Free Simple CSS Plugin
The plugin can do almost everything from the previous method plus a lot more.
Pros Of Using The Simple CSS Plugin:
- You can still add CSS via the WordPress Customizer for real-time previews
- The plugin includes a separate full-featured CSS editor outside the WordPress Customizer
- You can add custom CSS to individual posts or pages
- All the CSS that you add is theme-independent. So even if you switch themes, your CSS will still be there
Cons Of Using The Simple CSS Plugin:
- There's no code validation like the WordPress Customizer method
How To Use The Simple CSS Plugin:
Once you install and activate the plugin, there are a few different ways that you can add custom CSS to WordPress.
First, you can go to Appearance → Customize and use the Simple CSS option. This will give you a live preview of your CSS changes just like the previous method:
Second, you can go to Appearance → Simple CSS to use the full editor. The code in this editor will be identical to the code in the Simple CSS area of the WordPress Customizer:
Finally, you can also add custom CSS to an individual post or page via the new Simple CSS meta box underneath the WordPress editor:
All in all, the Simple CSS plugin is my favorite method for adding basic CSS tweaks.
Method 3: Use Your Child Theme's Stylesheet
If you need to add a lot of custom CSS, rather than just a few tweaks here and there, you'll probably be better off using your theme's stylesheet.
But - you can't put your custom CSS in your parent theme's stylesheet because it will get overwritten every time you update your theme.
Instead, you need to use something called a child theme. That way, your custom CSS will stay intact even when you update the parent theme.
Pros Of Using Child Theme Stylesheet:
- Good for adding lots of custom CSS (like 1,000 lines plus)
Cons Of Using Child Theme Stylesheet:
- No live previews in the WordPress Customizer like the previous two methods
- Not as convenient as the other two methods in general
- Your custom CSS is tied to your theme, so you'll need to move it over if you ever change themes
How To Use Child Theme For Custom CSS
Once you install and activate the plugin, go to Appearance → Child Theme and:
- Enter the details for name, description, and author
- Click Create Child
Once the plugin creates your child theme, it will automatically activate it. You can then click to jump straight to your child theme's stylesheet:
Or, you can always access this by going to Appearance → Editor:
Like the WordPress Customizer method, WordPress will perform basic code validation on any CSS that you add (this is a recently added feature that I love!).
Method 4: Enqueue Your Own Custom Stylesheet
Most WordPress users will never need to use this method.
But I'm including it because some people try to add their own custom stylesheet by including it directly in their <head> section like this:
<link rel="stylesheet" type="text/css" href="mystyle.css">
The above method is not the way to do it in WordPress.
Instead, you need to use wp_enqueue_style to add your stylesheets.
For example, to add a stylesheet named customstyles.css that you've uploaded to your theme's folder, you would add this code snippet to your functions.php file or a plugin like Code Snippets.
wp_enqueue_style( 'customstyles', get_stylesheet_directory_uri() . '/customstyles.css' );
Final Thoughts On How To Add Custom CSS To WordPress
If you just want to add a few custom bits of CSS, using the WordPress Customizer or the Simple CSS plugin is definitely going to be the easiest way.
If you need to add lots of custom CSS (say, over 1,000 lines), then you might be better off using your child theme's stylesheet.
Finally, you can always enqueue your own custom stylesheet. I've never had a need to do this personally, but that option is there if you want it!
Have any other questions about how to add custom CSS to WordPress? Leave a comment and we'll try to help out!