How to Add Custom CSS to WordPress

In this tutorial we’ll talk about WordPress custom CSS. We will overview three methods that will help you add custom CSS in WordPress. They include using:

  1. WordPress custom CSS plugins;
  2. In-built theme customizer;
  3. WordPress child theme.

By the end, you’ll know all there is to know about adding custom CSS in WordPress. This will help you adjust certain elements and make your website more eye-catching or user-friendly. Without further ado, let’s see what our options are!

Option 1 — Adding WordPress Custom CSS via Plugins

An easy way to way to implement custom CSS in WordPress is through plugins. And there are plenty to choose from. Let us overview the most popular WordPress custom CSS plugins and see how they work. All of the tools we used in this guide can be easily installed via Plugins › Add New section of the dashboard. 

Simple Custom CSS

This is one of the most popular WordPress custom CSS plugins among the community. It lets you implement your styles and override the current themes’ CSS. The values you set here will persist even if you change your theme.

 

Once activated, the tool will be available via Appearance › Custom CSS section. Using it is extremely simple. Enter any values that you need in the editor and save it. 
After that, you can see view the changes by refreshing your website. 

WP Add Custom CSS

Another great tool that you can use to implement WordPress custom CSS.  

Once installed, it will appear in it’s own dedicated section in your dashboard. Using that section, you may apply CSS to the whole website. 
The convenient part is that you’ll also have a CSS editor under each post. Thus you can apply different CSS to individual posts if needed. 
Finally, all the changes can be viewed by refreshing your browser. 

Site Origin CSS

A user-friendly and interactive tool to add WordPress custom CSS.

Once installed, the tool will be available in Appearance › Custom CSS section. 
This plugin features a convenient editor interface where you can choose any part of your site and edit it using in-built tools or by adding code manually.

Simple Custom CSS and JS

Last, but not least, you may also try this tool. It features a few extra functionalities compared to earlier entries. One of them is the ability to add custom JavaScript entries.

Once the plugin is installed, it will appear in a separate section under your dashboard. In there, you’ll be able to create custom CSS entries similarly to how you create WordPress posts. 
To test it out, we’ve changed the h1 tags to be a little more colorful. 
All changes will be visible on your live website after saving. 

Option 2 — Adding WordPress Custom CSS with Theme Customizer

You may easily add custom CSS in WordPress if your version is 4.7 and above, as it includes an in-built tool in the theme customizer. To use it, navigate to Appearance Customize section in your dashboard. 

Scroll down to the bottom and click on the Additional CSS section.
It will open an in-built tool that will allow you to add any CSS code. It easy to use and lets you view both mobile and tablet versions of your site, which is amazing considering how important mobile-friendliness is nowadays.
Congratulations! You now know how to apply custom CSS in WordPress without any plugins.

Option 3 — Adding WordPress Custom CSS Using a Child Theme

All of the above examples showed you how to add your own CSS to a live WordPress website. However, there are situations where you need to test it out first. Perhaps you’re not sure what you want to do yet, or don’t want to risk breaking your site. To prevent that from happening, we recommend creating a WordPress child theme. This will let you unleash your imagination and try out various CSS combinations. Best of all, your live website will not be affected!

Troubleshooting Common WordPress Custom CSS Issues

Sometimes, you can run into small hiccups when adding custom CSS to WordPress. Let’s quickly overview the most common problems and see how to we can tackle them.

Changes Are Not Appearing

WordPress custom CSS may fail to appear due to cache. If you’re using any caching plugin, there is a big chance that some resources are cached and delivered from a temporary storage to increase speed and lower resource usage. For detailed instructions on how to clear WordPress cache, check out this tutorial. Another solution would be temporarily disabling such plugins.

If you have browser caching enabled too, then clearing it may be enough to see the new changes you applied.

Last, but not least, some web hosting providers offer in-built caching tools to help your WordPress site perform better. We do this on Hostinger too. Our in-built WordPress caching plugins can be disabled or purged via Plugins › Installed Plugins › Must-Use section. 

Looking for a better way to host your website?

Transfer your website to the fastest web hosting platform with 24/7 dedicated support.

Misspelled CSS Syntax

Spelling errors are quite easy to overlook and can often prevent WordPress custom CSS from displaying properly. If you fail to see changes from appearing and you’re positive it is not cache, using a CSS validator can be really useful. Simply paste your CSS and run the tool. It will show any mistakes or typos and present which line has them.

Too Many Choices

Sometimes it is possible to go a little overboard with WordPress custom CSS. By adding two or more references to a selector it’s possible to cause a conflict. Since CSS cannot read minds, it does not know which value to apply. This is a common occurrence when calling out a new stylesheet on top an existing one. If you’re trying to change the h2 heading but nothing is happening, double check the style sheet for existing entries.

Out of Ideas

While it’s not real a issue, a lot of times the hardest part is figuring out what custom CSS you want to apply in WordPress. This can cause a huge headache, as you have to take a lot of things into consideration. If you’re struggling, here are a few resources than can help you generate some fresh ideas:

Final Word

To sum up, adding custom CSS to WordPress is a great way to make your website unique and eye-catching. We have learned how to do add custom CSS to WordPress with the help of plugins, in-built tools, and through a child theme.

If you found this tutorial useful, feel free to share it on Facebook, Twitter, or other social media. And finally, if you have any tips, tricks, or ideas that you want to share, we are looking forward to hearing them in the comments below!

This post was last modified on March 3, 2018, 2:51 pm