Best Custom CSS Plugin for WordPress. Period.

This plugin is perfect. I’ve been using Jetpacks Custom CSS module for a while now but I don’t really use Jetpack for anything else. For my needs, it’s overkill so I went on a search for a better / more lightweight solution.

Insert Simple Custom CSS

A. It uses your browsers “find bar” functionality (which is HUGE!!)
B. The syntax highlighting out of the box is better than Jetpack’s Custom CSS module
C. This plugin isn’t bloated and cumbersome like Jetpack

One of the things I dislike most about Jetpacks Custom CSS module is you can’t use your browsers find bar (command+F) to find lines, ID’s or classes. Instead, you have to remember the line number you’re on before a page refresh and scroll back down to edit it again. Pretty time consuming I must say.

Theme Junkie Custom CSS is the second best plugin I found, but it also doesn’t support your browsers find bar which is why I think Simple Custom CSS is a superior solution.

Two suggestions:

1. Update this plugin so that “Last Updated” on www.ads-software.com doesn’t say “2014-11-25.” I don’t think I’m the only WordPress designer that’s hesitant to use themes and plugins that aren’t actively being developed. When I go on a search, this is the first thing I look at.

2. The only thing I can see where Jetpack and Theme Junkie Custom CSS outshine this plugin is the width of the editor. The developer has made it very narrow horizontally (max-width: 831px / width: 95%) and I think this should be adjusted in the next update.

If you open FTP or File Manager and navigate to wp-content > plugins > simple-custom-css > codemirror > codemirror.css, you’ll see:

.CodeMirror {
/* Set height, width, borders, and global font properties here */
font-family: ‘Consolas’, ‘Monaco’, monospace;
height: 100%;
min-height: 60px;
border: 1px solid #ddd;
background: #f9f9f9;
max-width: 831px;
width: 95%;
margin-right: 0;
}

In my opinion, this should be changed to:

.CodeMirror {
/* Set height, width, borders, and global font properties here */
font-family: ‘Consolas’, ‘Monaco’, monospace;
height: 100%;
min-height: 60px;
border: 1px solid #ddd;
background: #f9f9f9;
max-width: 98%;
width: 100%;
margin-right: 0;
}

Besides that, it’s perfect.