How to Add Custom CSS to Your WordPress Theme

I help people tweak their site’s daily with CSS. Maybe your theme author has provided you with CSS to add to your site, or you found a CSS snippet online you want to add. Either way, adding it to your site is quite easy with the right approach.

Here’s how you can easily add CSS to your site to customize its styles.

How to Add Custom CSS

The first step is to install the Simple Custom CSS plugin.

Simple Custom CSS

Once installed, you’ll find a new Custom CSS menu item added under Appearance. Now you can simply paste your CSS into the textarea and save your changes.

Adding CSS to the Simple Custom CSS plugin

Once the changes are submitted they’ll go live on your site immediately.

Adding the CSS this way means you don’t have to edit your theme’s files at all, and your changes won’t be affected when you update your theme.

CSS not taking effect?

Here’s a quick trick if your CSS doesn’t take affect.

Sometimes the CSS is correct, but it doesn’t override the theme’s styling. One thing you can do to override the theme’s CSS is to add an “!important” tag. Take this CSS snippet for instance:

.site-title {
  font-size: 28px;
}

If it doesn’t effect the site you can add an important tag like this:

.site-title {
  font-size: 28px !important;
}

With the addition of the !important tag, the CSS is basically guaranteed to take affect as long as it’s targeting the right selector.

Are you a Compete Themes user?

If you use one of our themes you don’t even need the Simple Custom CSS plugin. All our themes have a Custom CSS section built right into the theme.

Even better, the site updates instantly as you add and update the CSS

showing how the Custom CSS section works in our themes
Changing the site title size in the Period theme.

Easily Customize with CSS

Even if you have no clue how to write your own CSS, the Simple Custom CSS plugin makes it easy to paste code into your site. It will override your theme, and you can always add an !important tag to make sure the override works.

If you have any questions about adding CSS to your theme, please post in the comments below.

Related Posts

4 Comments

  1. Iana Iana

    Hi! I use the free “Author” theme. And I could not find a way to change the background of the post itself. I was good with parameters “sidebar”, “main-sidebar” etc, but I just don’t know the name of the parameter that changes post background. Could you name it please?

    And is there a way to use texture instead of coloured background?

    Thank you for your answer.

    • Ben Sibley Ben Sibley

      Hi Iana,

      This CSS should do the trick:

      .entry article {
      background: #ccc;
      }

      You can change the “#ccc” value to any color you’d like to change the post background color. There isn’t a simple way to use a background texture with CSS, but this is a feature included in Author Pro.

      • Iana Iana

        Thank you so much! it worked.
        Your theme rocks!

        • Ben Sibley Ben Sibley

          Awesome, happy to help 🙂

Post a comment

Your email address will not be published. Required fields are marked *