How to add Custom CSS in WordPress website?

Graphic showing how to add custom CSS in WordPress with CSS and WordPress logos.

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:

Screenshot of the Mini Plugins WordPress dashboard showing site editing options and additional CSS settings.
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:

Screenshot of WordPress customization interface showing CSS editing options.
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.

Screenshot of a WordPress page displaying plugin functionality information and a call-to-action button.
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.

Screenshot of WordPress customization panel showing styles and additional CSS option.
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”

WordPress dashboard showing the Code Snippets section with options for adding 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!

Comments

Leave a Reply

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