Adding Custom CSS to Your WordPress Theme

I recommend you to make all your customizations in a child theme. Do not add your custom css to the parent style.css file. The reason why should not modify it is because when you update the theme those modifications that you have made will be overwritten.

Customizing child theme’s style.css file allows you to make your own changes without affecting the parent theme’s style.css which is perfect because you can easily update your original theme without loosing any custom styling.

Open your child theme’s stylesheet and add custom CSS styles to the bottom of that file. You can edit your file either using a FTP client or Dashboard Editor (Appearance → Editor).

You don’t need to copy all of the CSS from the original theme to modify an element. Let’s say you want to change a background of a button:

Original CSS:

.button {
  background: #ed463d;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.2;
  border-radius: 4px;
}

Child Theme CSS:

.button {
  background: #3dc4ed;
}

Custom CSS Plugins

There are a few WordPress Plugins available in the Plugin Directory that add CSS editor to your Dashboard. So, you don’t need to modify your theme’s files. My favorite is Simple Custom CSS plugin by John Regan. Check out other Custom CSS plugins below:

Posted in Tips, WordPress

Taras Dashkevych

More Posts by Taras
Taras Dashkevych is a founder of Themes Harbor. He specializes in creating simple, elegant, and powerful website designs. His passion for design can be seen through the clean lines and inspired themes that he creates for people all around the world. Connect with him @TarasDashkevych.

Leave a Reply

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