There are several ways you can add custom CSS to WordPress to override default styles and customize your theme.
This post will look at five different methods you can easily use:
Most of the time you’ll want to customize your WordPress site for your branding by changing fonts and colors. If your theme doesn’t let you easily add custom CSS to WordPress through the theme options, don’t worry! You don’t have to be a ninja developer to create just the artistic look you want for your site.
When you decide to customize your WordPress theme, it’s important to remember that any changes you make to the theme’s core files will be lost the next time the theme is updated.
That’s why it’s important to understand best practices when adding custom CSS to WordPress. You’ll want to use a method that ensures your changes will remain intact even after a theme upgrade.
How to Add Custom CSS to WordPress
1. Use a Child Theme
A tried and true method to customize your WordPress theme is to create a child theme and place any modifications within that theme. The child theme inherits all of the style and functions of the parent theme, but allows you to extend the styles as you need to customize your site. When the parent is updated, the child theme will receive all of the updates and your customizations will be preserved.
While creating a child theme might seem a bit confusing, it’s really quite straightforward. Read our post with video tutorial to learn how to create a child theme. Learn how to safely customize the theme’s style.css file, which is the file that contains your site’s style rules.
2. Use Theme Options
Most themes have a built-in option for adding custom CSS to a WordPress site. You can find that option in the dashboard under your theme name.
Go to Appearance>Theme Options. Look for the Custom CSS option, which is typically near the bottom of the panel options. Just add your custom CSS and click the save button.
3. Use JetPack Custom CSS
If you have JetPack installed, you can configure the Custom CSS option and that will allow you to add custom styles to your site. Go to Jetpack>Settings and click the Custom CSS checkbox to activate the setting:
4. Use WordPress Custom CSS Plugin
WordPress Custom CSS Plugin by Tips and Tricks HQ is an easy-to-use plugin that lets you add CSS customizations through the dashboard.
Once the plugin has been installed, simply click the settings key and a screen will display. Here is where you add your custom CSS:
5. Use Simple Custom CSS Plugin
The last suggestion is Simple Custom CSS which is another well-known plugin. However, this plugin hasn’t been updated in awhile. To date, the plugin has not had any compatibility issues with the WordPress 4.0 sites we maintain.
So simply install the plugin and then click on Appearance>Custom CSS. Next, place your custom CSS in the edit window and click the Update Custom CSS button.
I’ve used all of these methods with equal success so I encourage you to try each and find which one you like best.
Learn How to Add Custom CSS to WordPress – Step-By-Step Video
For a simple step-by-step example of how to add custom CSS to WordPress, refer to this post and video tutorial. Learn how to add custom CSS to WordPress and create a simple border style.
I hope this post has been helpful to you! If you have any other ways you add custom CSS to WordPress, please share in the comments below.