WordPress Tutorial

How to Add Custom CSS to WordPress

WordPress custom CSS tutorial. Learn how to add custom CSS to WordPress using various methods

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. WordPress custom CSS plugins can be easily installed via WP Dashboard->Plugins->Add New section

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.

 

Installing WordPress Custom CSS plugin called Simple Custom CSS via dashboardOnce 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. Add WordPress custom CSS in this editor interface and save itAfter that, you can see view the changes by refreshing your website. WordPress custom CSS successfully added and visible on the live site

WP Add Custom CSS

Another great tool that you can use to implement WordPress custom CSS.  Installing WordPress Custom CSS plugin called WP Add Custom CSS via dashboardOnce installed, it will appear in it’s own dedicated section in your dashboard. Using that section, you may apply CSS to the whole website. Adding WordPress custom CSS through WP plugin on the whole websiteThe 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. Applying WordPress custom CSS to individual posts via editorFinally, all the changes can be viewed by refreshing your browser. WordPress custom CSS successfully added and available on the live site

Site Origin CSS

A user-friendly and interactive tool to add WordPress custom CSS.Installing WordPress Custom CSS plugin called SiteOrigin CSS via dashboardOnce installed, the tool will be available in Appearance › Custom CSS section. WordPress custom css by SiteOrigin plugin previewThis 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.

Add WordPress custom CSS through SiteOriginin plugin and manage everything in a convenient editor-like interface

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.Installing WordPress custom CSS plugin called Simple Custom CSS and JS via dashboardOnce 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. Adding a new WordPress custom CSS entry through dashboardTo test it out, we’ve changed the h1 tags to be a little more colorful. Editing WordPress Custom CSS entry and making h1 tags a little more colorfulAll changes will be visible on your live website after saving. WordPress Custom CSS example success

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. Navigating to Appearance and Customize section in WordPress dashboardScroll down to the bottom and click on the Additional CSS section.
Entering additional css section in WordPress theme editorIt 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.
WordPress custom css example using theme editor in-built toolCongratulations! 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. Troubleshooting WordPress custom CSS issues by disabling in-build WordPress caching plugins provided by Hostinger.

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!

Add Comment

Click here to post a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

More in WordPress Tutorial
WooCommerce Vs. Shopify: Which E-Commerce Platform to Choose

Close