The WordPress customizer

The quickest way to add CSS is to the WordPress customizer, this CSS is stored in the database so if you lose your database for what ever reason, you’ll lose your CSS. But then, you should be backing up your database regularly anyway. You are doing that, right?

I don’t like using this method for a lot of CSS because it’s a small little box without syntax highlighting.

But it does update changes live without saving so you get to see what your amendments are like in real time. Nice.

Nice way to use it is to make your changes then copy and paste into a main style sheet, that way you can test out the changes live. Super nice.

To get to this, go to the page you would like to change. Then at the top you’ll see “Customize”. Some themes have moved this, if it’s not, check your themes documentation. Then click “Additional CSS” in the left hand panel.

Via Child Theme

If you would like to add CSS to the Theme it’s great to do it via a child theme. The downside is having to refresh to see your changes.

You can do this via a local install then upload your changes, like is what I do. But it can get annoying because you need to sync a local install with the remote install. So you only really want to do this for lot’s of amendments to make the setup worth it.

But the good thing with this is the changes are not stored in the database and you can use your editor with all it’s syntax highlighting and error checking.

You can also edit via your child theme on the site directly using the inbuilt file editor, only you really should do this via a staging site so your visitors don’t see your messing around!

You can combine the previous method with this method, make the changes via the live customizer then paste the changes into the file editor.

From your dashboard go to “Appearance > Editor”. In multi-site you need to access it via the network dashboard and go to “Themes > Editor”.

CSS Via a page builder

If your running a page builder, some of them have CSS built in which is page specific. This is quite a nice way of making changes when you only want it on that page.

You can add CSS via a page by page basis with visual composer, see here:

http://vc.wpbakery.com/video-academy/add-custom-css-wordpress-page-visual-composer/

CSS Via WordPress Plugins

There are some nice plugins for adding CSS. Simple Custom CSS has syntax highlighting so that’s nice.

I run through the simple use here:

https://www.youtube.com/edit?o=U&video_id=u2bhrSym1ws

This CSS is added to the database so also will not be lost when updating your theme, however if you start a fresh install or lose your database, then the changes will be lost. But it’s a great way to quickly add just a quick bit of CSS without installing a child theme.

https://wordpress.org/plugins/simple-custom-css/

JS Via WordPress

For adding Javascript use can use https://wordpress.org/plugins/tc-custom-javascript/

Important note

Never make your changes by editing the theme files directly. These changes will be lost on update. Some will do this as a emergency fix knowing those changes will be lost - that’s ok. But otherwise, it’s a really bad idea and things get messy. When you update, what bits did you change?

By makes changes via a plugin or child theme, you’re changes won’t be lost on updates and provided the updates are minor, an update likely wont break anything.

Happy styling.