This guide is for those who wish to add new CSS code to a WordPress website, without tampering with files. Yes, it sounds simple, but is often deemed insignificant.
You'll get a great insight into the proper area to place your CSS code depending on your code's circumstances. This will also keep it maintainable for future administrators/developers to your website, so that code is not overwritten.
Maintainable would describe as the code being easily cleared out if that specific plugin is deactivated, that theme is no longer used, or that post/page is removed. This will extensively reduce bloated code and 'rogue code'.
We've easily had that gut feeling of 'where could I place this code properly?', but just thought that anywhere will do. That isn't a great idea even if you are a developer tasked to add minor style updates to a client's theme.
It's great that WordPress powers nearly 30% of the web, but with that comes a whole bunch of inconsistencies in code and 'quick fixes'. I work for a digital marketing agency as a lead web developer and have seen scores of instances where a client would need a minor style update in one place, plus another little style update on another, possibly to deal with a plugin's styling. No, these two shouldn't go together. And it eventually adds up to bloated code!
This guide will get you up to speed towards confidently placing maintainable CSS code depending on what you'll have to be adding a style for.
Ask Yourself These 2 Easy Questions First
To begin, ask yourself these questions first:
Sometimes you can get conflicted between differences between a theme and a plugin. Some themes might come with their own bespoke plugin that's only available with the theme, probably found in an
/inc/ folder within the theme.
In that case, let me address that if the file is found in the theme's folder, then you're going to edit the CSS of a theme.
1) Am I Editing CSS of a Theme?
You need to know where to best add CSS to your theme. We're speaking about future-proofing for months and years to come.
So, check which fits your case:
a) Using a Custom theme, or
b) Using a Purchased theme
a) Using a Custom Theme
If you're working with a custom theme, it is common for it to contain preprocessing files e.g. through a
scss folder so it is advisable not to add CSS to the theme's files otherwise they may get overwritten should a theme developer be working on the theme files again. They might not realise that you've stuffed code somewhere in the CSS theme file/s.
Instead, add your custom CSS via the Customiser, found in Appearance > Customise. If ever the custom theme developer would make changes to the theme or release an update, then your new CSS will not be overwritten. Possibly the theme developer will include your code if he/she finds it on the Customiser, and nothing has been harmed!
b) Using a Purchased Theme
If you use a Purchased theme e.g. a theme on Themeforest.com or Elegant Themes to name a couple, then you may find that your theme contains a Custom CSS option. Make use of that, since it is understandable to have your own Custom CSS found within the theme itself rather than within the Customiser.
In most purchased themes you can find this under Theme Options > General Settings, and scroll down and find Custom CSS. If not, please refer to your Theme's documentation/guide on where to add Custom CSS.
2) Am I Editing CSS of a Plugin?
Plugins would most likely contain a CSS selector ID of their plugin namespace. This will make it easier to identify what the styling is intended for.
For example, a widget plugin called 'Foobar' could use
<div id="foobar"> as its wrapper. That way, you can style its inner elements, like selecting its children
Once you've written up the understandable CSS code, we'll need to find a place to save it.
The Plugin Might Offer a Custom CSS Box
At times a plugin may already offer you its own Custom CSS box for you to add CSS.
This is intended for plugin styling so that if the plugin is deactivated, so does the styling related to it!
Also, should a new theme be used, your plugin styles will not disappear.
The Plugin Doesn't Have a Custom CSS Box
But the plugin might not offer custom CSS, or it might happen to be a Pro-only feature.
You can then treat your CSS code as if you were editing CSS of a theme (please see #1) to guide you whether or not you are using a custom theme or a purchased theme, since this may differ where you best place your CSS code.
Site Builder Plugins
If your website has a site builder like Visual Composer, Beaver Builder, Elementor, or the Divi Builder, I would advise only adding your code to the site builder plugin's Custom CSS if that code is specific to the page or post. This is an advantage to site builder plugins since you can find the custom CSS within that page/post, rather than blatantly specifying the post/page via CSS.
For example, not making use of adding CSS within the post/page will result in an arbitrary
But making use of the site builder plugin, you can easily identify
.child within your page's site builder Custom CSS box.
If the post/page gets deleted, so will your added code specific to this post/page!
Making WordPress sites more manageable and neater
Properly finding the right area to place your CSS code will make it a lot less bloated as time goes by. WordPress is a powerful open source CMS run by an active community of developers and site owners, and with this comes the uncertainty of properly maintained code.
We might as well best make use of the platform's features to our advantage, like appending the custom CSS to where it's best to be found — right next to itself.
Thank you for reading! If you liked this article you might also like How to Install a Collection of WordPress Plugins which is definitely better than individually uploading plugins… And what more if it's on a regular basis (e.g. new projects)?