WordPress Tutorial

How to Add Custom CSS to WordPress

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

Did you ever want to change certain aspects of your website’s appearance but simply didn’t know how? There is a solution – you can add custom CSS (Cascading Style Sheet) to your WordPress site!

In this article, we’ll be discussing all that you need to know about CSS and how to use it to modify your website’s overall look.

What is CSS?

CSS is a style sheet language that modifies the look of your website’s basic structure, written in HTML. CSS allows you to assign different properties – such as color, size, layout, and display – to the HTML tags.

You can tailor the default look of certain WordPress themes as well. So, if you want to create your desired design and look, you can add custom CSS to your WordPress site.

Adding WordPress Custom CSS via Plugins

One of the more easy ways to implement custom CSS to WordPress is through the use of plugins. There are plenty to choose from, so let us overview the most popular ones and see how they work. All of the tools we use in this guide can be easily installed via Plugins -> Add New section of your WordPress dashboard.Adding a new plugin to your WordPress website

Simple Custom CSS

One of the most popular WordPress custom CSS plugins among the community, Simple Custom CSS lets you implement your own styles or override your current theme’s CSS. The values you set here will persist even if you change your theme.Installing Custom CSS plugin for WordPressOnce activated, the tool will be available via Appearance -> Custom CSS section. Using it is really simple – simply enter any values that you need in the editor and save the changes!
Adding custom CSS using Simple Custom CSS pluginIf you want to see the changes, all you need to do is to refresh your website.

WP Add Custom CSS

WP Add Custom CSS is another great tool that you can use to implement WordPress custom CSS.Installing WP Add Custom CSS plugin for WordPressOnce installed, it will appear in its own dedicated section of your dashboard. Through it, you may apply CSS to the whole website.
Adding custom CSS using WP Add Custom CSS pluginThe convenient part is that you’ll also have a CSS editor under each post. Thus, you can apply different CSS rules for individual posts if needed.Applying WordPress custom CSS to an individual postJust like with the previous plugin, all of the changes can be viewed by refreshing your browser.

SiteOrigin CSS

SiteOrigin CSS is a user-friendly and interactive tool to add WordPress custom CSS.Installing SiteOrigin CSS plugin for WordPressOnce installed, the tool will be available in the Appearance -> Custom CSS section.Adding custom CSS using SiteOrigin CSS pluginThis 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.Adding custom CSS through SiteOrigin's in-built editor

Simple Custom CSS and JS

Simple Custom CSS ad JS features a few extra functionalities when compared to earlier entries. One of them is the ability to add custom JavaScript entries.Installing Simple Custom CSS and JS plugin for WordPressOnce the plugin is installed, it will appear in a separate section under your dashboard. There, you’ll be able to create custom CSS entries similarly to how you create WordPress posts.Adding custom CSS using Simple Custom CSS and JS pluginTo test it out, we’ve changed the H1 tags to be a little more colorful.Making H1 tags more colorful using Simple Custom CSS and JS plugin

Adding WordPress Custom CSS with Theme Customizer

No matter what WordPress theme you use, you can tweak CSS with the built-in theme customizer. Navigate to Appearance -> Customize section of your dashboard,  scroll down to the bottom of the page and click Additional CSS.Using an in-built theme customizer in WordPressThis will open an in-built tool that will allow you to add any CSS code. It is easy to use and lets you view both mobile and tablet versions of your site.Tweaking custom CSS with an in-built theme customizer in WordPressCongratulations! You now know how to apply custom CSS in WordPress without any plugins.

Adding WordPress Custom CSS Using a Child Theme

Another option is to create a WordPress child theme – it allows you to modify the parent theme without any risk of breaking your live site.

If you’re not sure what you want to do yet, you can test your custom CSS out on the child theme first. That way you’ll be allowed to experiment to your heart’s content.

Troubleshooting Common WordPress Custom CSS Issues

Sometimes, you might run into small hiccups when adding custom CSS to WordPress. Let’s quickly overview some of the most common problems and see how 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’s a good chance that some resources are cached and delivered from temporary storage to increase speed and lower resource usage. Simply clear your WordPress cache, or disable such plugins for a moment.

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, such as Hostinger, offer a server-side built-in caching to help your WordPress site perform better. You can disable it from the Cache Manager on your hPanel.Cache Manager in hPanel

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 any changes from appearing and you’re sure that it’s 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 even point to 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.

This is a common occurrence when calling out a new stylesheet on top of an existing one. If you’re trying to change the H2 heading but nothing is happening, double-check the style sheet for the existing entries.

Out of Ideas

While it’s not a real 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 elements into consideration.

Here are a few resources that can help you generate some fresh ideas:

Conclusion

CSS allows you to style your site content. So, adding custom CSS to WordPress is a great way to make your website unique and more eye-catching.

There’re three methods to do so:

  • Making use of plugins
  • Using a theme customizer
  • Tweaking it through a child theme

Now you’re ready to tweak and tune your website’s design. Good luck!

About the author

Gediminas B.

Gediminas was a passionate content writer and SEO geek at Hostinger. He started his journey at customer support and aims to use his gathered knowledge to create the most epic content the world has ever seen. From WordPress to server management, there's no topic he can't cover! He also likes cats.

Add Comment

Click here to post a comment

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

Get Exclusive Content

Join thousands of webmasters who get our free newsletter with tips on how to drive more traffic and revenue to their websites!

Please wait...

Thank you for sign up!

More in WordPress Tutorial
WooCommerce vs Shopify: Breakdown and Comparison

Close