How to add Custom CSS in WordPress website?

Sometimes while using Mini Plugins or any plugin, or theme, or in general you might need/want to do some design customizations – in this case, writing custom CSS is the ideal way in WordPress.

If you’re a website owner and know a little bit of WordPress and technical stuffs, but don’t know CSS — it’s a great time to learn CSS. CSS describes how to layout is displayed. Basically, CSS lets us change colors, add cool fonts, and make things look nice and stylish.

In WordPress, you can easily add CSS code. Let’s see some of the ways:

Using Additional CSS section in customizer

There are a few ways to add custom CSS in WordPress. The easiest way is to add via customizer. Here’s how you get the section. Go to:

https://yoursite.com/wp-admin/customize.php

And there you’ll see the “Additional CSS” Section usually at the bottom. See screenshot below:

Additional CSS settings in Customizer

Once you click on the Additional CSS section, you’ll get a block to enter the CSS you desire to add as you can see in the screenshot below:

Additional CSS code section in Customizer

There you can write CSS and it’ll preview live. For example you can add the following CSS code and check instantly. It should make the background color red.

body {
  background-color: red;
}

Using Site Editor

If you’re using some modern WordPress themes like Ollie that support Full Site Editing, it’s even easier to add the Custom CSS. You can click on the “Edit Site” button and then the icon (outlined in red) in the screenshot.

Styling in Site Editor

Similar to the customizer described above, you can see the Additional CSS section at the bottom, where you can add the CSS code.

Additional CSS in the site editor

Using Plugin

You can also add custom CSS using a plugin. There are many plugins that allows you to add custom CSS. For example, WPCode — the functionality to add custom CSS is available in free version as well.

Once you install the plugin, you’ll see the main menu “Code Snippets”

Code Snippets menu

With the plugin you can add additional CSS. It has additional features such as where to display the CSS, exclude specific pages to take effect etc. While I haven’t particularly used this plugin much, you can go ahead and explore it.

That’s all I have to say. Hope this helps!

author avatar
Sanjeev Aryal
Sanjeev Aryal is the creative mind behind Mini Plugins, a brand dedicated to developing lightweight, efficient WordPress plugins. He also writes occasionally and contributes to WordPress community.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *