Custom Body Class

Adds custom CSS classes to the front-end body for easy styling and layout flags—no template edits.

Overview

Custom Body Class merges additional CSS class tokens into WordPress’s standard body_class() output on public pages. Enter a list in Advanced Settings usingcommas or spaces—after sanitization, those names appear on the opening body tag so your stylesheet can branch on campaign skins, seasonal branding, partner white-labels, or feature flags without redeploying PHP templates.

This complements per-user or per-role body class modules: here the list is global for all visitors, ideal when marketing turns a toggle once for the whole frontend rather than per account.

Who is this for?

Agency retainers juggling multiple visual identities on one codebase can stash body.client-acme alongside scoped SCSS. Product teams running slow A/B CSS-only tests can pair this with analytics elsewhere. Multisite super-admins can differentiate networks at the HTML root when child themes are not practical on every blog. Note: classes are global—avoid embedding secrets or PII in class names.

Features

body_class Filter Integration

Hooks WordPress APIs so output stays compatible with SEO plugins, accessibility fixes, and other filters expecting standard class lists.

Sanitized Tokens

User input passes through WordPress-style cleaning so illegal characters do not break HTML validity.

Comma or Space Entry

Editors can paste natural lists without memorizing delimiters.

Instant Updates

Save Advanced Settings and refresh; no build pipeline required.

How It Works

Enable the Module

Enable "Custom Body Class" in WP PowerSuite.

Open Advanced Settings

Enter class names such as campaign-spring, layout-wide-hero, or partner-x.

Save Settings

Changes apply on next frontend request after caches clear.

Verify Markup

View source or inspector on the homepage and inner pages—body should list theme defaults plus your additions.

Write CSS

Target body.campaign-spring .hero { … } in child theme or Customizer Additional CSS.

Performance Note

Adds a handful of short strings per response through a core filter—negligible overhead. Full-page caches will freeze class lists until purge; plan purges when toggling campaigns.

Installation & Activation

Install WP PowerSuite

Activate the plugin.

Enable Custom Body Class

Toggle on from module list.

Confirm Theme Supports body_class()

Older themes missing this call need a header.php fix before classes appear.

Coordinate with Caching

Purge edge caches after class changes so CDN HTML matches origin.

Requirements

PHP 8.1 or higher WordPress 6.0 or higher Permission to manage options (Administrator) Theme must call body_class() in header template

Use Cases

PromoToggle
Seasonal promo banners toggled by one body flag.

CoBranding
Partner co-branding where legal requires distinct footer spacing.

CoBranding
Slowly rolling out variable fonts under body.typography-v2.

Frequently Asked Questions

Does this change the admin body?
This module targets front-end visitors. Use Username Body Class or User Role Body Class for logged-in differentiation.
Can I add multiple experiments at once?
Paste multiple tokens; CSS specificity and order determine winners—document combinations for your team.
Are class names validated against BEM?
Sanitization follows WordPress slug rules; avoid spaces inside a single token.
Will this affect AMP or feeds?
AMP templates may omit custom classes; feeds are XML—scope expectations accordingly.
Can I remove default theme classes?
No—this module only appends; strip core classes only via child theme filters.

Troubleshooting

Classes do not appear
Confirm body_class() exists, no optimization plugin strips attributes, and caches cleared.

Unexpected classes after import
Re-save Advanced Settings on staging before pushing database snapshots.

CSS not applying
Check selector specificity vs theme !important rules; prefer higher-specificity chained selectors.

Login

On This Page