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:
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:
- Open the page or post you want to customize.
- Select the block in the Editor that you would like to add your own CSS class to.
- In the right sidebar, under the Block tab, locate the Advanced section and click on it.
- In the section, find Additional CSS Class(es) field.
- Enter the name of your custom CSS class. In this example, I am using
special-title
as my custom CSS class. - Update your page or post when you are ready.
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:
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.
Leave a Reply