Custom CSS

The Custom CSS Editor allows you to customize the appearance of your theme without the need to create a child theme or worry about theme updates overwriting your customizations.

To enable this feature, visit  Jetpack → Settings → Writing in your site’s dashboard. Scroll down to the Theme Enhancements section and toggle on the Enhance CSS customization panel option.

Starting with WordPress 4.7, you can now add custom CSS to your own theme directly from the Customizer. Just choose the Additional CSS tab when customizing your current theme to get started!

Please note that the Custom CSS feature in Jetpack is now only available on sites that do not utilize block-based themes. Block-based themes have an even more powerful tool at their disposal – the site editor.

Jetpack’s Custom CSS feature allows you to add more features to that CSS editor, as explained below.

Adding Custom CSS

First, access the CSS editor via Appearance → Customize → Additional CSS.

If this is your first visit to the CSS Editor (or you have not yet added any custom CSS code), you will see a placeholder message in the editing window. Please review the message, as it contains some helpful tips to help you get started.

When you’re ready to begin adding your custom CSS code, simply remove the message to get started or add your CSS after it.

Editing Options

You have a few options when editing your stylesheet, and these can be found directly below the editor:

• Preprocessor: the CSS editor has support for CSS preprocessors LESS and Sass (SCSS Syntax). This is an advanced option for users who wish to take advantage of CSS extensions like variables and mixins. See the LESS and Sass websites for more information.
• Add-on: when making changes to your site’s design, you’ll be adding your customizations on top of the existing theme stylesheet by default. You can, however, choose to replace the existing theme’s stylesheet with your own CSS thanks to the Start Fresh option. This second option should be used if you want to start with only the theme’s HTML structure and recreate all of its CSS from scratch. Refer to the theme’s original stylesheet for reference, and make sure you have all rules/styles accounted for. If you are missing certain elements, the public view of the blog may appear skewed. Only the CSS code in the editing window will be applied to your blog with this option.
• Media width: this option should be used if you have modified the width of the primary content area using custom CSS. The “Media Width” setting is used as the default size for full-size images when they are inserted into your blog. Note that it will not affect the size of some images you added before changing the setting, depending on how they were inserted, and you may have to re-insert some of them after changing the setting.

Previewing and Saving

When editing your CSS, you’ll be able to preview your changes before actually saving them – regardless of your skill level.

If you like what you see and wish to save the changes, click the Save and Publish button at the top of the customizer window.

CSS History

CSS Revisions show prior versions of your custom CSS. Each time you save your changes, a revision is saved. Jetpack will store the last 25 CSS revisions made to any theme on your blog.

To view these revisions, you can click See Full History at the bottom of the Additional CSS window in the Customizer.

That will open the full custom CSS revisions history for the selected theme.

To compare CSS Revisions, select a revision date using the slider at the top of the Revisions screen. The revision you selected will be shown side-by-side with the current version highlighting the differences between the two. A red highlight indicates something was removed while a green highlight indicates something that was added.

To restore a previous version of your custom CSS, click Restore for that date and the custom CSS is reverted back.

Notes

Jetpack will include the custom CSS as an in-line stylesheet inside the document by default. However, if the custom CSS exceeds 2000 characters in length, Jetpack will generate an external stylesheet and link to it.

Full Site Editing

If you don’t see Customize listed as a submenu item under the Appearance menu, your theme likely uses the Site Editor instead of the Customizer. This might be the case if you are using a newer WordPress theme developed from 2023 onward. 

You will need to use the Customizer to access Jetpack’s additional CSS features. If the Customizer isn’t listed on the Appearance menu, you can access it manually by copying and pasting the URL below into your browser. Just replace ‘example.com’ with your own website’s domain name.

Privacy Information

The Custom CSS Editor is deactivated by default. To enable this feature, visit  Jetpack → Settings → Writing in your site’s dashboard. Scroll down to the Theme Enhancements section and toggle on the Enhance CSS customization panel option.