Customisations: Tweaking your theme's CSS styles without editing theme files

I was hoping you could let me know what the best way to update the theme so I don’t lose my changes? What do you guys recommend?


  • Please note we are unable to support customisations that you or any third party developer make to your theme.
  • This tutorial is provided for information only and you should make sure you have a backup of your website that you know you can roll back to before proceeding.
  • If you are in any doubt on how to proceed or would like any assistance we recommend you contact a third party developer to help you as we will be unable to help you via our support desk.

If you need to make a small CSS (style) adjustment to your website you could edit your theme's CSS files via FTP or the WordPress admin.

But if you'd only like to make a small change or don't want to edit files directly you can use one of the following solutions to easily add one or more CSS rules to your website.

Plus, all without the risk of deleting any existing code or seeing your changes lost if there is an update to your theme in future.

With the Jetpack plugin using its Custom CSS module

If you're using Jetpack, Automattic's 'many plugins in one' solution you already have a Jetpack module that allows you to do this.

First you'll need to activate the feature by going to Jetpack > Settings from the WordPress menu and activating the Custom CSS module, it's not already.

2016-02-05 at 13.23.png

Once it's activated it'll look like this.

2016-02-05 at 13.27.png

(Your Jetpack plugin must be installed, activated and connected to WordPress.com to have this screen).

Once it's activated - or if it's activated already - you'll find under Appearance > Edit CSS from the WordPress menu.

2016-02-05 at 13.29.png

From here, you can simply type CSS rules into the editor that appears and save the stylesheet when you're ready to apply them.

2016-02-05 at 13.31.png

As long as you're writing correct CSS these will override any of the styles in your theme file.

If your styles don't show immediately try clearing any cache plugins or other solutions you're running on your site.

If you make a mistake, you should also have the option to rollback to any previous version of your CSS changes or simply delete all your CSS styles completely.

Without Jetpack via the Simple Custom CSS plugin

If you're not using Jetpack or you'd prefer not to you can use the Simple Custom CSS plugin instead.

This performs in a very similar way to the Jetpack solution but without having to install the heavier Jetpack plugin and connect your site to WordPress.com.

After installing and activating the plugin, you should see a new option in your WordPress menu.

2016-02-05 at 13.39.png

On the next screen you can write CSS rules straight into the editor that appears and hit Update Custom CSS when you want to apply them.

simple-custom-css.png

(If your website is using any caching plugins or services you may need to clear the cache after writing your changes to seem them on your site).

Dependencies

As long as you keep either of these plugins installed, active and up to date your CSS rules should keep working.

For obvious reasons, we recommend you only use one of these solutions at any one time!


This article originally appeared on ThemeValet.com 
https://themevalet.com/making-wordpress-css-adjustments-without-editing-theme/