Jetpack Custom CSS comes to WordPress
The Jetpack plugin from the folks at WordPress includes (as of now) 15 modules to extend the control, presentation and reach of your WordPress website. The most recent addition—Custom CSS—adds one of the most useful features for designers and webmasters who have some CSS (Cascading Style sheet) chops. Once activated, the Custom CSS module adds a new link under the Appearance tab called “Edit CSS”. What you’ll find is a simple CSS editor that loads after the website’s style.css file, which means that any style rules you include in the CSS editor will override the original style sheet. When I first started working with WordPress about four years ago, I would have paid a mint for this convenience, and for many WordPress users (both .com and .org) this addition will make life more interesting and less frustrating.
Why write a Jetpack Custom CSS review?
Virtually everything you see on a modern website is controlled by CSS styling rules. With CSS, you can change colors, fonts, spacing, page widths, create special effects and much more. Some of the rules are easy to learn and use while others are quite complex. But when it comes to making many minor changes, a little bit of CSS know-how can go a long way toward creating the customized webpage that you desire. For instance, you might want to create a product page and use a color scheme that matches the product’s branding, or you might want to change the presentation of a particular category of post. There are a million and one things you can do to improve your website with a bit of CSS. For anyone who want a little web style freedom, read on…
Jetpack Custom Style features
What do you get with this module? Here’s the goodie list:
• Syntax highlighter with error validator (the program deletes invalid statements)
• Saved revisions
• Preview button
• Add styles after the main style sheet or replace it completely
• Check original style sheet
• Tutorial link
AIM tested styles
How useful is this feature? Let me put it this way; we built a similar CSS editor nearly two years ago, and we’ve included it in all of our Netoro theme and new ThemeBlocks website editor projects. The ability to make quick style changes without digging through the style.css file is a huge time-saver, and even more critical is that both the AIM solution and the Jetpack Custom CSS are persistent across theme changes and updates. That means you won’t lose the custom style changes for your website when your theme is updated. We tested Jetpack Custom CSS on a ThemeBlocks site, a Netoro site, and a Twenty-Eleven site without any issues. My single complaint is that the code validation doesn’t correct or flag an error; it removes the invalid declaration completely. I expect that will lead to some confusion.
AIM clients already have style
One note we should add for any AIM clients reading this post is that they already have the capability to add custom styles, which is accessed through the Custom Styles tab of their dashboard. Since the AIM Custom Styles dynamic style sheet is loaded after the Jetpack Custom CSS style sheet, the Jetpack Custom CSS won’t affect styles declared in the AIM Custom Styles. Additionally, the AIM Custom Style solution is a dynamic, post-based function that allows users to create and publish multiple style sheets, change published status, export and import files and much more that the Jetpack Custom CSS module cannot do at this time. If you’re not an AIM client, you might be interested to know that we’re considering sharing our solution as a plugin with the wider WordPress community; so if you’d like to see it, please let us know.