Developed by guys at Automatic, Jetpack is a cool WordPress plugin that brings a lot features from WordPress.com to your self-hosted site on WordPress. I can name here a list of features that would make our life whole lot easier in managing our WordPress site, such as: Site statistics, Carousel for image galleries effect, Publicize, Mobile theme and so on. Seriously, lots of them are amazing and you should check them out.
In the scope this article, I will talk about one feature that we would highly recommend for our users to use, it is Custom CSS.
What does Custom CSS do?
The Custom CSS editor supports you in customizing the appearance of your site without altering the theme or creating child theme or worrying about theme updates overwriting your customization.
Do I need it?
It’s not compulsory and totally up to your choice, but here are the benefits:
- Convenience: When you activate the Custom CSS feature, you will have the CSS Stylesheet Editor in the admin-panel where you can freely input your custom codes and start customizing your theme appearance. Especially when you use a WordPress theme for your site, then you do not have to alter any stylesheet file of the theme.
- Safety: without altering your existing stylesheet file, Jetpack Custom CSS saves your custom codes in your database. Because of that, it is extremely safe to work on Custom CSS. You can remove any changes you make without breaking your site, and even when deactivate or uninstall Jetpack, these changes are still there in your database.
- Furthermore, updating themes is always a problem as it would turn your hours of coding to zero. But, using Jetpack Custom CSS would save the day and your precious codes are safe in your database.
For those benefits, recently we have been introducing this feature as part of our solution in supporting users’ customization questions. We recommend our users install Jetpack plugin and activate this feature before implementing any custom code.
Getting started
1. First you will need to install Jetpack onto your WordPress site. Jetpack itself is available for free download and along with some features, including Custom CSS. Simply download and install Jetpack like any WordPress plugin.
2. There are 2 ways you can do to activate Jetpack plugin:
- Connect with your WordPress.com account. If you don’t have one, you can easily create one during the connection process.
- Development mode: if you wish to use Jetpack without connecting to a WordPress.com account, you can use Development mode on local. Add the following define into your wp-config.php file:
define( 'JETPACK_DEV_DEBUG', true);
You can read more here. http://jetpack.me/support/development-mode/
3. Once Jetpack is activate, go to Jetpack dashboard and look for Custom CSS feature and activate it.
4. Now you will have the CSS Stylesheet Editor in Appearance > Edit CSS
Make sure that you preview an changes you make and click Save for changes to be applied.
CSS Revision module
Right in the Editor, CSS Revision module shows backup copies of your custom CSS everytime you click Save Stylesheet. Jetpack will store up to 25 revisions, you can click Restore to revert changes and get back to previous version.
That’s overview about this cool feature Jetpack Custom CSS. Are you using the plugin? We would love to hear your thought.