How to Add Custom CSS to Wordpress

How to 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:

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

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

  1. LESS and SASS Preprocessors
  2. Minify your CSS & JS code
  3. We all want our site to be the fastest, and Minifying your CSS is important. with this plugin, it’s built right in so you don’t have to worry about a thing

    For example, here’s the CSS code for the button that I use on this site1:

    .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:.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.

  4. Preview the code before taking it live
  5. We all like to preview our work before taking it live, and with this option, you can do the same for your new CSS code to make sure that it won’t break the style of your site.
  6. Target your code on specific URLs
  7. Want a specific article to look a bit different than the rest of your site? No problem, just add your custom CSS for that article and target it with this option and you are good to go.


    Here are the available rules:

    • All Website
    • First Page
    • Contains
    • Not contains
    • Is equal to
    • Not equal to
    • Starts with
    • Ends by
  8. Code Revision
  9. Did you deleted something important? With this option, you can go back in time and see a comparison of what has been deleted and restore it in one click. No questions asked, no string attached.

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 brainer and you should get it right now.

WordPress Repo Official site


  1. Modified version of Brian’s button from Woorkup.com