Your site is great but I bet you can improve it with some extra styling. Let’s take a look at how to add custom CSS to WordPress using standard and alternative methods.
Why Add Custom CSS?
- because you need to make a change that is not supported by the theme
- you have discovered a design flaw you need to correct yourself
- you need to add style to a new element
Nice! But first, let’s keep a backup of the site because, in the process, you may go way further than you initially expected. In this case, you may not remember all changes you made at the beginning. Similarly, if you have heavily modified a theme you may need to keep the original files stored somewhere to review or even restore them on the installation.
Add Custom CSS on the Customizer
This is the recommended way for most users. WordPress has a special location where you can add your custom CSS code. You only need to log in to Dashboard and navigate to Appearance > Customizer > Additional CSS. The location is also available on the front-end if you have allowed the Toolbar to show up on the viewing site. This option is available per user, so, if you need to change it just go to Dashboard > Users and then edit your profile.
The Customizer offers a simple yet well-rounded interface for everyone who needs to easily customize a WordPress site. It spreads the screen into two parts allowing for “live” reviewing the changes you make. The three small “screen” icons on the bottom allow switching between responsive states too. When you are ready just click on Publish and the changes will pass through the public site. If you close the tab without publishing, the changes will be aborted (although a notice will appear the next time you go there, reminding you that you have some “unfinished business” there).
Add Custom CSS on the child theme.
The child theme is an original concept of WordPress. It is somehow “a ghost instance” of the theme you have currently activated on the site. By default, it’s only a couple of files that contain information about the original theme, yet, in the process, you can add a lot more. The good news is that a child theme allows for changing or adding code to the theme without actually touching the original files. To add your custom CSS you only need to edit the style.css file that is located on /wp-content/themes/theme-name/. WordPress will use the code on the child theme instead of the original. This way you can do your tricks without creating a mess.
Add Custom CSS using the theme’s options
Add Custom CSS using a third party plugin
A simple search on the repository brings up several plugins for this use. This solution is very useful if you need to add Custom CSS which will be maintained even if you switch between themes; like when you are working on two children based on the same parent theme. If you are adding CSS rules for third-party elements (like plugins, not originally supported by the theme you have activated on the site) then, you can safely add your code there. Additionally, some plugins of this kind support multisite control which can be convenient for larger projects. Last but not least, adding Custom CSS this way allows for easily enabling or disabling the effects by merely activating or deactivating the plugin on the site.
Add Custom CSS directly (!) on the files of the theme
This method is for experienced developers only. Someone who can organize a working environment, and has full control of the workflow can go faster by deploying directly on the original style sheet. Usually, this person maintains the project using an external service (git) in order to have greater control over the installation.
Again, changing the original files of a theme will make an update much more complicated and we don’t recommend doing that. In fact, all the changes you make to the files will be overwritten by the new files of the theme. As you can imagine, all the work you have done will be lost. Therefore only developers who are using a theme as a base to build their own can use this method. And – notably – they will be maintaining all the code by themselves.
Extra: if you are using WPBakery Page Builder
The particular plugin has a special location on each page to add custom CSS. This is super-convenient if you need to add a special style to a single post or page without using the page-id. The location is on the Backend Editor of WPBakery Page builder. Just edit the post and click on the top right of the editor, on the gear icon and a new box will come up allowing for entering your custom CSS.
When you’re done entering the code, don’t forget to click on Save changes and then Update the page to let the new style apply.
Similarly, you can find a corresponding location for adding custom CSS in almost every other page builder.
Wait! Test before you go
Because CSS is a language that does not produce any error messages, it is not always easy to check the results. You need to review the browser’s inspector every time you make a change, to ensure your new style is working. In some cases, even the location of a rule (lower or higher on the sheet) can cancel its effect. A missing bracket can and will create confusion. Furthermore, your code may work on some screen sizes but not on others. Not to mention browsers. Therefore, when it comes to additional styling, testing your code on every possible computing platform and browser is of great importance.
Thankfully, you don’t need to have a stack of devices to test your code. You can use an online service like Smartbear CrossBrowser Testing that allows for live testing of a webpage on a variety of operating systems and browsers. With Smartbear CrossBrowser Testing you can safely test and add custom CSS to any WordPress site.
Do you enjoy how CSS works? Do you want to improve your skills? Here are some great sources for CSS on the web: