5 Ways to Add Custom CSS to Your WordPress Website

>5 Ways to Add Custom CSS to Your WordPress Website
  • 5 Ways to Add Custom CSS to Your WordPress Website

At some point, you’ll most likely want to make some customizations to your WordPress website: changing a background color, adding some more padding, changing the font size, etc.

I see a lot of people on the WordPress forum asking for design changes, which require custom CSS, but most of them don’t know how to add it.

So, in this article, I’ll show you 5 different ways to add custom CSS to your WordPress website.

1. Adding custom CSS via Additional CSS

This is the easiest and fastest way, and everyone who has WordPress 4.7+ has access to it.

What you need to do is to:

1. Go to Appearance -> Customize. You should also be able to access “Customize” from the top of your admin bar when viewing a page;.

Wordpress Customize

2. Click on Additional CSS.

Additional CSS

3. Enter your custom CSS code on the left.

Adding custom CSS in WordPress

And that’s it! If the code worked, you’ll notice the change in real-time.

As you can see in my example, I added a gray background to the entry header.

In order for that change to remain, you have to click the Save & Publish button.

You can also check our video tutorial below.

2. Adding custom CSS via Theme Options

Most themes come with a Custom CSS box in their settings, where you can add your code, as you saw above.

In most cases, you can find your theme’s settings by going to Appearance -> Theme Options.

A lot of themes nowadays have started to implement their settings into WordPress’ “Customize” feature, so there will be no separate theme options.

3. Adding custom CSS via Theme Editor

WordPress has another built-in feature, called “Editor”, where you can edit your theme files. You’ll find it by going to Appearance -> Editor.

Once there, you need to add the CSS code in your style.css file.

WordPress theme editor custom css

I strongly recommend that you use a child theme and edit the child theme’s style.css file, otherwise your changes will be lost with the next update.

Also note that you might have some security tweaks, especially if you’re using a security plugin, such as iThemes Security, that have an option to disable the “Editor” part, so you won’t be able to edit your files from within WordPress.

You can also check our video tutorial below.

4. Adding custom CSS via FTP

This is a bit more advanced because you need to access your files via FTP.

Once you’ve accessed your FTP, you need to go to public_html/wp-content/themes/your-theme-name-child/style.css.

Then you just add your code in that file, like you’ve seen above. Save, and you’re done!

5. Adding custom CSS via plugin

I really don’t recommend using a plugin for this, especially when you have 4 other options, the first 3 being very easy.

The fewer plugins you have, the better, so if a plugin isn’t really necessary, you should avoid using it.

But if you still wish to install a plugin for this, then I’ll recommend one: WP Add Custom CSS

WP Add Custom CSS is a simple, yet flexible plugin. It lets you add custom CSS to the whole website or to individual posts, pages and custom post types (such as Woocommerce products).

That’s a wrap

Hope you found the post useful and comprehensive!

Don’t forget to share it with your friends!

If you have any questions or thoughts, drop a comment, contact us, or leave a message on our Facebook page.

WP Rocket - WordPress Caching Plugin
By |2018-09-13T15:37:03+00:00September 6th, 2017|Customization|0 Comments

Leave A Comment


- Get guides and offers right into your inbox -

The type of emails that you would like to receive (multiple selection allowed):

You can unsubscribe at any time by clicking the link in the footer of the emails. For more information, please check the privacy policy.

I use MailChimp as my emailing service. By subscribing, you understand that your email and preferences will be transferred to MailChimp. Learn more about MailChimp's privacy practices here.