Add Custom CSS to WordPress

Today I will tell you How to Add Custom CSS to WordPress. Something I had to learn while redesigning this site. And I will tell you where you need to add your shiny new customs CSS.

WordPress themes already come with style.css file which you can add extra CSS to and change the old one, but when the theme receive an update, all the changes will be lost. You can use a child theme’s style.css file and do @import but you shouldn’t, and you need to avoid it.

# How to Add Custom CSS to WordPress

Jetpack have a Custom CSS module which comes with code revision, it’s simple and works well. And last but not least, there’s Tom Usborne’s Simple CSS Plugin that include CSS editor in the Customizer so you can live preview your changes and Metabox for page/post specific CSS.

But I wanted more, I was really thirsty for a plugin with more features.

So I put my backpack and started my journey trying to find the perfect plugin in the land of repo, a land so far away, with a population of 46,074 plugins.

After spending days in this land, trying plugin after another, I finally found the perfect one, it has the basic feature, a place for your Custom CSS code, and a ton of extra features that you never think you need until you see them and try them yourself.

Here’s my Simple Custom CSS and JS Review:

Developed by SilkyPress, Simple Custom CSS and JS is the ultimate WordPress plugin for those of us who like to go crazy with their extra CSS & JS codes.

First things you need to know is that this plugin has two versions, FREE & PRO, Here’s what they have to offer:

# FREE Version has the following features:

• Internal or External File linking type for CSS & JS.
• Placing your CSS & JS in Header or Footer.
• Add CSS & JS for both Front-end and Administrator Area.
• Add as many CSS & JS as you want.
• Enable or disable CSS & JS.

# Pro Version pricing starts at $58.50 and has the following features:

• LESS & SASS Preprocessors.
• Minify your CSS & JS code.

.btn {
  display: inline-block;
  color: #f00;
  background-color: inherit;
  font-size: 20px;
  font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial,
    'Lucida Grande', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  padding: 0.5em 1em;
  border: 2px solid #f00;
  margin: 5px 0 auto;
}

.btn:hover {
  background-color: #f00;
  text-decoration: none;
  color: #fff;
}

And here’s how the same code look when it’s minified:

.btn {
  display: inline-block;
  color: red;
  background-color: inherit;
  font-size: 20px;
  font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial,
    'Lucida Grande', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  padding: 0.5em 1em;
  border: 2px solid red;
  margin: 5px 0 auto;
}

.btn:hover {
  background-color: red;
  text-decoration: none;
  color: #fff;
}

Here’s the final result:

Input: 509 bytes Output: 393 bytes Saved: 29.52%

Now imagine the same thing but for the CSS of your entire site, it will make a difference.

• Preview your CSS & JS before taking it live.
• Target your CSS & JS on specific URLs.
• Code Revision.

# Conclusion:

If you’re super crazy about CSS, like to add multiple customs CSS & js to your site, make each page look different from the other and keep your site fast and smooth, then this plugin is a no brainier and you should get it right now.