How To Add Registered Styles To WordPress

(I realize I made a typo in the video in the CSS section, #00; should be #000;)

Using Registered Styles In WordPress

In this video, I show you how to add a registered style to a wordpress paragraph. By doing this, it’s easy to create reusable elements that you or your clients can select visually. I create a paragraph registered style in the video but it can be used for headings, groups, and more.

Code for adding registered styles

Add the following code to functions.php (or another globally included file):

/**
 * Scottsweb.dev
 * Add a registered style to a paragraph
 * You could also do a heading with core/heading, a block group with core/group, etc
 */
register_block_style(
	'core/paragraph',
	array(
		'name'  => 'yellow-paragraph',
		'label' => 'Yellow Paragraph'
	)
);

Define the CSS for your registered style

Then, in your css, define the style:

.is-style-yellow-paragraph {
   background-color: yellow;
   padding: 0.5rem;
   color: #000;
   border-radius: 6px;
}

That’s it! You now have a registered style that you can use over and over again by clicking a button. As always, if this video was helpful, leave a like and subscribe!

Unrelated

If you’re looking for a CDN to serve your visitors a super fast website, check out how to connect your wordpress site to Bunny CDN.