After setting up your WordPress site, most of you would like to customize your own theme, because most default themes are unable to fulfill our niche requirements. Premium and Business plans have a feature called Custom CSS that lets you customize your CSS design yet website layout. CSS stands for Cascading Style Sheets and it can be easily added to your site with the use of custom codes, but it’s not too complicated. We will look into the method of adding CSS. Generally, 2 methods could be used:

  • By using Theme customizers
  • By using CSS plugin

1- Theme Customizer

The new WordPress 4.9 Tipton has introduced a feature directly in their admin area named “Customize” where you can easily add themes of your choice, which could be seen simultaneously with help of live preview. Clicking on live preview will show additional options on the left side of the page, one of which will be “Additional CSS”. Now here is where you have to use code. You will see a blank white box where you have to add valid CSS rules, at the same time changes could be seen in the live preview pane. Add codes, until you are satisfied with your theme and then you can “Save and Publish” the web pages. They have also provided a “help icon” in case you get stuck somewhere and need clarification.

However, this CSS code will be customized only one particular theme. If you want to add more themes, you must repeat the same methods individually on each theme. This theme customizer plays a key role while whether you are starting as a blogger or setting up a business website.

2- WordPress Plugin

A great advantage of this method is that even though you change your theme, your custom CSS will still be available. The first step to use this method is to install a WordPress plugin, e.g. Simple Custom CSS and activate it. Once you do that, now go to “Appearance” on the Dashboard and then to Custom CSS and finally paste the edited Custom CSS code. To view and save your work, click “Update Custom CSS”. Now you can view it in the website.

This method is particularly useful for people who often use WordPress 4.7 or below.

Popular CSS Plugin

With that being said, we will look into these CSS plugins that are easy to install and are very effective. Note that each CSS plugin has its own advantage and disadvantages, make sure to select the best according to your website design or niche.

1- Simple Custom CSS

Any style added with this plugin will still be available even if the theme is changed. Like we mentioned, this will help designers to customize CSS to their WordPress website. Here are some of the features worth stating about this plugin:

  • No difficult or confusing databases
  • No need for Configuration
  • Allows you to check error on the setting page
  • The plugin doesn’t create any problem with site performance or its speed.
  • Multisite access to administrator
  • Presence of Code syntax highlighter
  • Customizer Control

Sometimes, Custom CSS doesn’t show up. It could be either due to nonspecific selection of your CSS or it is aiming at the wrong selectors.

2- WP Add Custom CSS

With this plugin, you can add custom CSS not only to individual post and pages but also to the whole website. Some of the features worth mentioning are:

  • New “Custom CSS” box editing area to add Custom CSS to page and post of your choice
  • The main stylesheet can be edited from the settings just by clicking “Add custom CSS”.
  • 3 different languages are available making it effective globally i.e. English, German and Spanish.

If you can’t find the Custom CSS box in the display, all you have to do is Go to your page or post, click on “Screen Option”, and check the Custom CSS option. That should do the work!

3- CSS Hero

This plugin is greatly recommended for beginner and the good news is you can customize this one without using any coding! So it’s remarkably easy and definitely should be in your list of choice. Some of the amazing features are:

  • Saves a lot of time and frustration while customizing themes.
  • No coding required. So no HTML etc.
  • All the changes you make are saved in an additional stylesheet. So no constant worrying about updates getting lost.
  • This plugin if used along with Genesis theme framework allows you to make quick changes in the child theme and export it to the client.

This plugin can be purchased for $29 for a single site, which may look a lot but honestly, it is totally worth buying as it saves you from a lot of customization hassle. You can even get discount if you get the PRO plan. Once you install and activate this plugin, get your CSS hero license key by following the instruction given on the page and you are good to go.

Both the above-mentioned methods are recommended for beginners. However, the major disadvantage with theme customizer is while using parent theme, all your changes can vanish if you don’t save your custom changes and accidentally update the theme. You can use a child theme for such cases but it is often observed that beginners don’t use the child theme. Still, using a CSS plugin can save from this trouble as the custom CSS are stored independently of your theme so you can switch themes anytime you want, but your CSS will also be present.

Now that we have mentioned the pros and cons of both the method, it’s up to you which one you will choose. If you have WordPress 4.7 or latest versions, then you can go for the theme customizer if not WordPress plugins are the answer for you. Hope this article helped in understanding how to add custom CSS to your WordPress. In case of further questions or suggestions, feel free to comment down below.

Author’s bio:

Madan Pariyar, a blogger at MarkupTrend and a digital marketing strategist helping clients to resolve their website woes. When not busy with all things, you may find me occasionally watching movies, traveling and spending time with my family.