How to Add Custom CSS to Your WordPress Site

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

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

WordPress Customizer

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

Custom CSS and JS

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

Elements GeneratePress

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

  1. Optimize the Block Library StyleSheet
  2. Are CloudFlare APO and Full Page Caching the same?
  3. WP Rocket: Love it and Leave it
  4. Code Snippets: The War
  5. Perfmatters: Love it or Leave it
  6. How to Optimize GeneratePress for Core Web Vitals [100% Solved]
  7. How to Lazy Load Ads

JM

Sobre Jose manuel

I am José Manuel. I started a WordPress blog in 2011 as a hobby to use it a part of my teaching and I fell in love with blogging & WordPress.

I am writing about things I know and things that I am learning. I hope you find some of the things I write useful.

WPS

WPSurfer.com covers information about hosting, security, speed, SEO and monetization for WordPress sites

Contact

You can ask questions via Facebook or Twitter