Adding custom CSS to WordPress isn’t everyone’s cup of tea, especially for non-coders and newbies.
Fortunately, there are various methods available to help you add custom CSS to WordPress easily. Some ways are straightforward; some are a bit complex, and some are easy and straightforward and don’t require writing a single line of code.
To help you add custom CSS the easy and right way, we’re going to list four different methods to add custom CSS to your WordPress site.
As a WordPress website owner, you know it well; editing CSS enables us to add different properties to our website, including size, color, layout, and display to HTML tags.
Tweaking CSS also allows you to customize the default look of your WordPress websites’ theme.
No matter whether you are a beginner or someone with no experience, with the help of these methods, you can add custom CSS to your WordPress website with ease.
What’s more, we have listed methods through which you’ll even be able to add custom CSS to your WordPress posts and pages.
Read on to learn how to add custom CSS to your WordPress website without any hassles.
Here’s a quick index to help you navigate this article:
So let’s dive in.
How to Add Custom CSS to WordPress
Method #1: Adding Custom CSS Using WordPress Customizer
One of the convenient and easy methods for adding custom CSS is by using WordPress Customizer. Although there are other simple ways to do it, with WordPress customizer you don’t need to set up or install any third-party plugins.
While adding custom CSS using WordPress customizer, you can also see custom CSS changes on a real time preview right on the dashboard itself.
Let’s get started adding custom CSS using WordPress customizer.
How to Use WordPress Customizer to Add Custom CSS
First, you need to be on your WordPress dashboard, then just launch the WordPress customizer interface. Now navigate to Appearance >> Customize on your WordPress dashboard.
It will launch the WordPress theme customizer interface. Here you’ll be able to see the live preview of your website, along with many customization options, on the left side of your screen.
Next, you need to click on the option for Additional CSS right from the WordPress customizer sidebar at the bottom of the page.
The Additional CSS Tab can be slid to show you a simple box where you can easily add your custom CSS.
Once you add a valid CSS rule to the box, you can see the changes applied to your website; you can even check the live preview of your website.
You can keep adding custom CSS code to meet your requirements and preview how it looks on your site. Once you’re done, don’t forget to click on the ‘Save & Publish’ button.
Method #2: Adding Custom CSS Using a Plugin
Adding custom CSS using a WordPress plugin is quick and easy. If you don’t want to write or add a single line of code, this is the perfect option for adding custom CSS to WordPress quickly and easily.
Now, you might be thinking about which theme to choose to get started. Many free plugins enable you to add custom CSS to WordPress.
We’ll use Simple CSS to add custom CSS to your WordPress site. Simple CSS is an easy to use yet powerful CSS plugin for WordPress, and it’s free to use.
In addition to adding a custom CSS, this plugin adds a lot of value by helping you complete other tasks as well.
The Simple CSS Plugin:
- allows you to add CSS via WordPress customizer with a real-time preview option.
- includes a robust and separate fully-featured CSS editor, which is outside of the WordPress customizer.
- allows you to add custom CSS to specific WordPress posts and pages.
- makes all the custom CSS you add theme-independent, which means if you switch themes, the custom CSS you add will still be there.
How to Add Custom CSS Using the Simple CSS Plugin
First of all, you need to install and activate this plugin on your WordPress dashboard. You can download the Simple CSS plugin from here.
With the Simple CSS plugin, there are few ways to add custom CSS:
Way 1:
To add custom CSS, navigate to Appearance >> Customize and then choose the Simple CSS option from there. It has a real-time, live preview of the CSS changes you make, just like in the previous method listed above.
Way 2:
The second way allows you to add custom CSS by navigating to Appearance >> Simple CSS in order to use the full editor of the plugin.
The code in this editor will be the same as the code that will be in the Simple CSS of the WordPress customizer.
Once you open the editor, you can start adding the custom CSS code you want to add, then click the “Save CSS” button.
Way 3:
The Simple CSS plugin allows you to add CSS to your specific WordPress posts and pages easily.
To add a custom CSS in your WordPress posts and pages, open any post or page to which you want to add custom CSS, then scroll a bit, and you’ll find the Simple CSS meta box right below the custom WordPress editor.
From the simple CSS meta box, you can quickly add custom CSS to your WordPress posts and pages.
As of now, you should have an idea of how easy it is to add custom CSS using the Simple CSS plugin. It allows you to add custom CSS to WordPress in 3 easy ways.
Method #3: Using a Child Theme to Edit CSS
This method suits you best if you want to add a lot of custom CSS to WordPress. If you’re going to do some little tweaks, use the methods listed above.
However, if you want to add custom CSS to make a lot of changes, it’s better to use your theme’s stylesheet.
NOTE: The problem is that you will not be able to put custom CSS in your parent theme’s stylesheet. The reason is that once you update your theme, your custom CSS will automatically get overwritten.
Adding custom CSS using the Child Theme isn’t recommended for beginners and non-coders, because this process is a bit complex and there is no live preview option like the one found in WordPress Customizer.
Furthermore, with this method, the custom CSS is tied to your WordPress theme, which means you need to move it over once you change your theme.
How to Use Child Theme to Add Custom CSS to WordPress
If for some reason your theme doesn’t include a child theme, you can use a child theme plugin to help you create one. You can use a free plugin like Child Theme Creator.
The plugin allows you to quickly create child themes from any theme that you are currently using on your WordPress website/blog.
First, you need to install and activate this plugin from your WordPress dashboard. Once you install and activate the plugin, a message will pop up showing “To Create a Child Theme Go to Tools >> Child Theme Creator“.
Now you need to navigate to WordPress Dashboard >> Tools >> Child Theme Creator. Once you click on it, you can check all the themes you currently have on your WordPress dashboard.
You can create as many child themes as you want, just hover over any theme you want to create a child theme for.
Just choose the current theme you’re using on your WordPress website, and then click on ‘Create Child Theme‘. After creating the child theme, you need to activate the theme right away.
When the theme is activated, you will be able to edit the child stylesheet of that theme.
You can also edit the access by navigating to Appearance >> Editor. Just like any other WordPress customizer method, WordPress will simply perform basic validation on any custom CSS.
Method #4: Editing Your Theme style.css File
Through this method, you can actually add custom CSS to your theme’s style.css file. You can follow the exact walkthrough given below to edit your theme’s style.css file.
Navigate to your WordPress dashboard and then Appearance >> Editor. Once you click on that, you’ll be on the editor page, where you will see a list of files.
Now you need to click on the Stylesheet option; the style.css file will be loaded and displayed in the center of the screen. From there, you can easily edit the file to make changes to your website design.
So these are the ways through which you can quickly add custom CSS to WordPress.
Troubleshooting Common WordPress Custom CSS Issues
While adding custom CSS, you might run into some small errors. We have tried our best to list some of the most common mistakes you’re prone to make while adding custom CSS.
The Changes You Make Are Not Appearing
Sometimes it happens that the WordPress custom CSS fails to appear due to cache. The error occurs when you use any caching plugin on your WordPress website or blog.
What often happens is that some of the resources are cached and get delivered from temporary storage in order to reduce resource usage.
If that is the case, you just need to clear your WordPress cache, or you can disable the plugin for just a few minutes and then enable it again.
Also, if your browser cache is able, you can clear it to see the new changes which you have applied.
Errors & Misspelled CSS Syntax
The most common errors are spelling errors. We often overlook these and they can prevent WordPress custom CSS from being able to display correctly.
If you aren’t seeing your changes appear, first check that the page isn’t cached. If that isn’t the problem, paste the CSS into CSS Validator and simply run the tool. CSS Validator will automatically show if there are any mistakes or typing errors.
Conclusion: How to Add Custom CSS to WordPress
Adding custom CSS to your WordPress website can be complicated for beginners and non-coders. Fortunately, you can use any of these listed ways to add custom CSS to WordPress quickly and easily, even if you don’t know how to code.
If you want to add just a few lines of custom CSS code, the best way to do it is to use the easy and reliable WordPress customizer.
However, if you’re looking to add lots of custom CSS, you should use the child theme’s style sheet method.
If you’re a beginner and don’t want to follow a step by step process to add custom CSS, you should try the Simple CSS plugin.
With the help of this plugin, you can easily add custom CSS to WordPress; you can even add custom CSS to your WordPress posts and pages.
Which method of adding CSS do you find the most helpful? Do you have any other easy ways to add custom CSS to WordPress? Feel free to share your thoughts in the comment section below.
If WPCITY‘s this post helped you feel free to share it on Facebook, Twitter, and LinkedIn.
Read Other Tutorials:
- How to Speed Up WordPress Site
- Ultimate WordPress Security Guide
- Install WordPress on Windows: Ultimate Step by Step Guide
- How to Create the Best WordPress Staging Site
- How to Make WordPress Site Live
- How to Add Custom Fonts to WordPress
- Wix vs WordPress: Platform Crucial Differences
- Can’t Login to WordPress Admin Dashboard?
Leave a Reply