Adding a custom CSS class to a WordPress block

Did you know that if you add a custom CSS class to a WordPress block, you will be able to get control over the styling of that specific block?

The process of adding a CSS class to a WordPress block is simple, and it can be done within the Editor, without a need of 3rd party plugins.

However, I would like to mention that changing default styles of a specific block is consisted of two steps:

1. Adding a custom CSS class to a block.
2. Applying styles for that specific CSS class.

In this article, I will guide you through both steps, so you can modify the styles of a block of your choice.

Add custom CSS class

Although, the Editor provides some style options for blocks, there are cases when you want to go beyond available options.

Let’s say, you have the Heading block on your page which you want to highlight by using unique styles. The first step will be to add a custom CSS class to your block:

1. Open the page or post you want to customize.
2. Select the block in the Editor that you would like to add your own CSS class to.
3. In the right sidebar, under the Block tab, locate the Advanced section and click on it.
4. In the section, find Additional CSS Class(es) field.
5. Enter the name of your custom CSS class. In this example, I am using special-title as my custom CSS class.
6. Update your page or post when you are ready.

After adding this CSS class to a block, you will see no changes in your block when viewing your actual page.

The thing is that we need to let WordPress know what kind of style changes we want to apply to the selected block.

Apply CSS styles

Now, we are ready to style a recently added CSS class. Here is a custom CSS that I will use for my special-title class:

.special-title {
    background-color: #09c;
    padding: 1em;
    color: #ffffff;
    text-shadow: 0 1px 10px #0a3d4e;
    text-align: center;
    border-radius: 80px 20px;
    border: 2px solid #0a3d4e;
}

Important: Never add custom styles to style.css in the parent theme. You risk to lose all your custom changes once a new version of the theme is released.

If you’ve not added a custom CSS to your site before, please check out our quick guide on how to add a custom CSS in WordPress.

Here is what I’ve got after adding a custom CSS to my WordPress site:

Custom CSS does not work

It is possible that some parts of your recently added custom CSS might not work. Depending on how your theme is designed, some parts of your custom CSS might be overwritten by the theme.

Please understand, we do not provide any help, with issues you might experience with your theme, in the comments below.

If you are using one of our professional WordPress themes, feel free to contact us and we will be happy to help you.

In other cases, please contact the author of your theme for a solution.

Custom styles are not shown in the Editor

That is a downside of this approach. The thing is that the custom CSS, you have recently added, does not get loaded in the Editor. It only applies to the actual page (front-end) of your site.