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.

Adding a CSS class to a WordPress block can be done directly in the editor, without relying on third-party plugins. To edit the default styles of a specific block, however, 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

While the editor offers some styling options for blocks, there may be times when you want to customize further.

Imagine having a Heading block on your page and wanting to add a personal touch with unique styles.

The first step is to add a custom CSS class to the 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.
Preview of the Editor: Adding a custom CSS class to the selected block

Adding a CSS class to a block in WordPress won’t immediately reflect the desired style changes. To apply custom styles to the block, you need to specify them in WordPress.

Apply CSS styles

With the CSS class added, we can now apply custom styles. Here is an example of custom CSS for the 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: Avoid adding custom styles directly to the parent theme’s style.css file. This increases the risk of losing all custom changes during a 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 the result of adding custom CSS to my WordPress site:

This is an example of customized Heading block using the Prosperity theme.

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, contact the author of your theme for a solution.

Custom styles are not shown in the editor

One drawback of this method is that the custom CSS you have added will not be visible in the editor, but only applied on the front-end of your website.


2 responses

  1. Sven Avatar
    Sven

    There is no advanced settings for the page title? How do I enable that?

    1. Taras Dashkevych Avatar

      Hello Sven,

      If you are referring to the page title that appears at the top of the editor then unfortunately, you cannot enable advanced settings for it because it’s not a block. It’s just a regular option, used for setting the page title.

      You can see the list of all added blocks to your page by using the List View option, in the top toolbar of the editor (three lines icon, next to the “i” icon ).

      Kind regards,
      Taras

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.