Adding CSS to WordPress

WordPress is an extremely powerful tool when it comes to working with CSS and styling / designing your website. In this post we’ll address the options that you have for adding CSS to your site using both the pre-installed tools and additional plugins and why you might want to do this.

The first place to start is with the in-built WordPress CSS editor to use this simply head over to:

Appearance > Customize > Additional CSS

This is a fairly basic CSS editing area however the great thing is it gives you hints and tips based on the code that you’ve entered and it shows the changes that you’re making in real time as you add the code which is super helpful.

You may however prefer to use external plugins for the many additional benefits and tools that they come with. Some great examples of these are:

Simple Custom CSS and JS:

This plugin at the time of writing allows you to add CSS, JS and HTML and to title each snippet of code that you add. This makes it great for adding multiple sections and blocks of CSS and organising it. For example say you want to style a specific element you’d simply add a block of code to this plugin, title it something appropriate and if you ever need to tweak the code for that element it’s easy to find.

Another great feature is the ability for users to toggle whether each code snippet is active, this can be hugely helpful if you want to regularly change styles, use different blocks of code at different times or simply enable code at a later date.

Custom CSS Pro:

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

This plugin is simply for CSS, the great thing about it is that it more closely resembles a desktop CSS editor more so than the native CSS editor. It gives helpful alerts and prompts and it highlights different sections of code really nicely.
Another great feature is the real time editing feature, this plugin allows you to code with a sidebar to the left of the screen and the changes are made in real time to right. Much like the native editor but full height. 
Simple Custom CSS:

This plugin is extremely light weight, it minimises the amount of scripts required to provide a CSS plugin and offers an extension of the native WordPress editor meaning you get that clean experience but with all the added benefits from the plugin. It’s great if you want those extra features without adding the extra weight many plugins add to a website.

Overall WordPress and the array of great plugins available means you can create a CSS editing experience that suits the way that you work without being forced to use either additional plugins or pre installed editors depending on your style.

Check out our article on adding code comments with CSS:

HTML, CSS, PHP, Javascript and Jquery Code Commenting

We’d appreciate a share or any comments if you found this useful, thanks!

Leave a Comment

Your email address will not be published. Required fields are marked *