Want to customize your WordPress site and make it look different? Then you will of course need to add some custom CSS to your site. Now, this custom CSS can be added to your WordPress site by many different methods and you can choose any of these methods as per your convenience.
New users sometimes wonder that what is the best way to add CSS to a site. Well, sometimes they make the mistake to do this by directly editing the theme’s style.css but this is not the correct way to do it. So let’s discuss all three methods to add custom CSS to WordPress and which one should you ‘actually’ use.
Method 1: By using a child theme
If you are already using a theme with a Framework and a child theme structure like Genesis, then you would most likely love this method. But even if you are not already using such a theme, then also you can make a child theme out of any theme. To learn how to make a child theme, here’s a very useful article that you should read.
So why should you use this method to make CSS changes? Well, that’s because if the developer updates the theme for design changes or bug fixes, and if you update the theme, then you will lose those changes, and your work will be overwritten. This means after a theme update, you will need to start making CSS changes again.
On the other hand, if you use a child theme to make CSS changes, then only the parent theme will be updated, and your hard work will remain preserved in the child theme.
Method 2: Using a plugin to edit CSS
Well, now this is the most easiest way to add some custom CSS quickly to your WordPress site without worrying about creating a child theme or editing the style.css and then fearing that your changes will be lost when you update the theme.
The main plus point of using this method to add CSS to your site is that your changes won’t be overwritten when your theme gets updated. Also the CSS that you add using this method can be used even if you install and activate a completely different theme. This is because the CSS is not stored in the theme, but it is stored in the plugin, and is available even after you install a different theme. Let’s take a look at two such useful plugins to add custom CSS.
Simple Custom CSS
This is perhaps the most popular plugin to add custom CSS to WordPress. The CSS added using this method will override Plugin and Theme default styles, which is very important if you want your new CSS to be applied.
After installing and activating this plugin, just go to Appearance and click on Custom CSS. Next, simply type your new custom CSS in the box provided and click on the “Update Custom CSS” button. Using this plugin is as simple as that.
WP Add Custom CSS
This plugin allows you to add custom CSS to the whole website and also to individual posts and pages. The CSS rules applied to the site will override the default stylesheets of your theme and plugins. This is a very useful plugin if you want to make changes to your entire site, or to just some individual posts and pages.
After installing and activating this plugin, go to “Add Custom CSS” settings page and enter your CSS that you want to apply to the whole website. However, if you want to apply CSS to some specific posts or pages, then you will need to use the “Custom CSS” box in the editing area of that specific post or page.
Method 3: By editing style.css (Not recommended method)
As you can already read on the title, we highly recommend users NOT to edit theme’s style.css file. However, this is perhaps the most quickest way to customize the theme, but it has its own shortcomings. So why should you not edit style.css directly?
Well, that’s because let’s say in future you get a new theme update and if you have edited your style.css then you will lose those changes, as the new theme will overwrite your existing style.css file, which means you will now need to start from scratch again. That’s why, even though customizing a WordPress site using style.css is very easy and quick, you should not use this method as your changes will be lost if you update the theme.
But still, if you want to edit your style.css file then here’s how to do it. Simply login to your WordPress dashboard, go to Appearance and you will see a new fly out menu. From this menu, click on Editor option.
On this page, you will be mostly redirected to edit the style.css file. Verify this from the right-hand side where style.css is selected, if not, then click on it. You can now edit this file and when done, click on “Update File” button at the bottom.
Over to you
Now that you know all the options through which you can add custom CSS to your WordPress site, it’s time to choose the best option according to your needs. If you’re the one who is comfortable in coding, then you should create a child theme and then customize it. But if you’re not, then the plugin method too, is a good option.
Plugin method is also very suitable when the change that you are making is not theme specific, and you want that change in your next theme also. For example, let’s say you have added some CSS to style a subscribe box or social media buttons, and chances are you would want the same CSS in your next theme also. In such a case, using a plugin to add CSS is a good idea.
Now that you know how the proper way to add custom CSS to WordPress, go ahead and give your site a unique look with the magic of CSS.
There are other methods available, if you use the Cherry framework which most templates from Template Monster use these days you can edit custom css by going to Cherry -> Options -> General where there is a section called “User CSS”, any css entered here will not be overwritten by theme updates.