How To Add Custom CSS In WordPress

You might want to change some things in your WordPress theme, customize it according to your needs.

Adding custom CSS in WordPress is one of the choices for doing so, since adding too many plugins can slow down your site.

There are 2 ways in which you can add custom CSS in WordPress. Let’s have a look at them?

Table Of Contents

2 Easy ways to add custom CSS in your WordPress Site

1. Using the theme customizer

You wouldn’t believe how easy this is.

Go to your WordPress admin dashboard > appearance > customize.

how to add custom css in wordpress, what is custom css in WordPress, what are WordPress plugins, theme customizer in wordpress — WordPress Dashboard > Appearance > Customize

You will be redirected to the theme customizer window. On the left, you can see different items on your site whose attributes you can change.

how to add custom css in wordpress site — Additional CSS option in Theme Customizer

For example, headings, fonts, colors, featured images, etc. Scroll down and in the end, you’ll see additional CSS, click on it.

Here you can add your custom CSS and see the live preview of the changes with it. Live preview works for any changes you make on your site in the theme customizer window.

When you’ve added the code, save and publish to apply the changes to your live site.

Quick note: One con of this method is that the additional CSS is only saved with a particular theme that you’re using currently. Add the code in the child theme, not the parent theme.

If you change your theme in the future, you have copy-paste the CSS in the new theme’s additional CSS option.

I would recommend saving the code on your system in a document for safe-keeping.

The second method works irrespective of the theme you’re using.

2. Use a Plugin

Install and activate the Simple Custom CSS plugin.

After activating the plugin go to Appearance > Custom CSS. Write down your code here and click on Update Custom CSS to save and apply your custom CSS in WordPress.

Which method should you choose? Adding custom CSS using theme customizer or a plugin

Beginners might not be familiar with a child theme. Using the Simple Custom CSS plugin lets you apply the custom CSS code to your WordPress site more freely.

You can switch between WordPress themes without worrying.

Recommendations of places from where you can learn CSS:

FAQ

What are parent and child themes?

A child theme in WordPress is a sub-theme that inherits all the functionality, features, and style of its parent theme. It is a safer option to make edits to the Child themes.

What can you do with custom CSS?

You can make all kinds of design changes with CSS: font, colors, spacing, etc.

Do I need extensive knowledge of CSS to be able to use this feature?

No, not really! Consider referring to Codeacademdy, W3Schools.com for CSS tutorials.

Do all the themes have the additional CSS option available?

Additional CSS option is on the WordPress software itself, independent of the kind of theme you’re using.