Add CSS class to WordPress block

Be able to add a custom CSS class to a WordPress block gives a control over the styling of that specific block.

You can add a CSS class to a WordPress block in the editor, without a need of 3rd party plugins.

However, changing default styles of a specific block requires two steps:

1. Add a custom CSS class to a block
2. Apply styles for a specific CSS class

In this article, you can learn both steps, so you can modify the styles of a block of your choice in WordPress.

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 custom changes once after theme update.

If you never used a custom CSS on your site before then check out a 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.