Add Custom Body Class to Post/Page

Sometimes you want to target a specific Post or Page with CSS. That’s understandable.

WordPress adds the Post ID of your post or page to the <body>’s class attribute but that can be limiting and confusing to use in your CSS file.

Instead, you can add your own custom class to any Post or Page when you create it.

Beneath the visual/text editor on the “Edit Post” or “Edit Page” screen, there will be a meta box called “Volatyl Quick Settings.” There, you can add classes to the “CSS Class” field.

Volaty Quick Options

Treat this text field just like you would the value of a class attribute. Do not add periods. Separate multiple classes by a space. Classes cannot start with numbers.

Why add a body class to a Post/Page, though?

One great way to use this feature is to set a body class for a special kind of post.

For example, say your readers know you to publish a “Weekly Roundup” post every Friday, regardless of the other posts you publish throughout the rest of the week.

If this is a special post, you may want it to have different styling. You could add something like this to your child theme‘s style.css file:

/* Weekly Roundup Styles */
.weekly {
	background: lightyellow;
}

With that CSS in place, every Friday when you post your Weekly Roundup, you can simply add “weekly” to your CSS Class field when you publish the post. Nifty.

Return to docs