Do you sometimes want to change certain aspects of your website’s appearance but you don’t know how?
There is a solution for that – you can add custom CSS to your WordPress site!
There are several ways to add custom CSS but some options will help those style load where they are needed
Table of Contents
Should I use the WordPress Customizer?
I like using the WordPress customizer when I am testing some custom CSS.
I would use the customizer if the styles are needed on the entire site.
I discourage user from using the customizer when they are adding styles that apply to certain part of your site.
If you are using some custom CSS to change how your sidebar works or looks, you don’t need to add that custom CSS to page, homepage where you don’t have a sidebar
There are lots of plugins that do pretty much the same thing that the wordpress customizer does so stay aways from those if you need to add custom CSS only where is needed
What about Simple Custom CSS and JS?
This is king of adding Custom CSS because it has more than 400 thousand active installations
The Simple Custom CSS and JS will give more options to add custom CSS and JS.
You can add the custom CSS to the header or footer, add it to the dashboard or front end.
You can add it in the HTML, a way known as internal stylesheet or you can create an external stylesheet
You need to pay for Premium if you want to add the CSS to specific pages.
I don’t really like the pricing of the plugin. $49 a year seems a bit expensive.
You can use an online CSS minifier if you want to minify the code so don’t buy Premium based only on that pro feature.
Other Custom CSS Plugins
These plugins don’t add much to the conversation, since they are way too simple.
- Simple Custom CSS by John Regan is a simple plugin to add CSS. Despite how simple the plugin is, the plugin has more than 200 thousand active installation.
- SiteOrigin CSS is another simple plugin to add custom CSS. It has more than 200.000 active installation and there is not much to say about it because there is nothing to configure
- Custom CSS Pro by WaspTheme has 8000 active installations and it is another simple custom CSS plugin
What About Elements from GeneratePress?
The Elements section from GeneratePress doesn’t have the option to create an external file if you want to go that route.
You can easily choose between adding the custom css in the footer or header and you have several options to choose where you want your CSS to be added
This is the option that I use since I have been using GeneratePress for quite a while.
More about Site Speed
These are some post about how to optimize WordPress Site for speed that you might want to read
