Opens in a new tab
Turquoise abstract wavy W logo on a black background
Turquoise abstract wavy W logo on a black background
White WP PowerSuite logo on a black background
White WP PowerSuite logo on a black background
[wpps_ai_summarize]
On This Page
Last updated: 09/09/2026

Custom Body Class

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

Overview

Add your own CSS class names to the WordPress frontend body without editing a theme template or maintaining a PHP snippet. Custom Body Class gives you one place to define site-wide class names that your stylesheet or frontend code can use as a consistent starting point.

Enter names separated by spaces or commas, and WP PowerSuite sanitizes them, removes duplicates, and adds the resulting classes through WordPress’s normal body-class output. Custom Body Class is a Free module for frontend styling hooks; it does not write CSS for you or assign different classes to individual posts, roles, or users.

Solid black square
Solid black square
Who is this for?
  • Developers wanting a stable site-wide selector for custom styles
  • Agencies using reusable styles across multiple WordPress builds
  • Designers who need a frontend layout flag without a template edit
  • Teams keeping global CSS selectors separate from content editing

Features

Site-Wide Body Classes
Add the same custom class names to supported frontend body output across the website.
Simple Class-Name Input
Enter multiple names using spaces or commas instead of writing HTML or PHP.
No template editsClean, Deduplicated Output
Normalize class names and remove duplicates before adding them to the body-class list.
No Theme File Changes
Use WordPress's body-class mechanism rather than directly editing the theme's body tag.
Frontend-Only Scope
Keep the WordPress administration body unchanged. An empty class list leaves the module with nothing to apply.

Add a Consistent CSS Selector Across WordPress

A global body class can be useful when a stylesheet needs a reliable way to identify a particular website configuration. For example, a developer could use a class such as client-portal or compact-layout as the starting point for a group of frontend rules. Instead of repeating that class on individual elements or placing custom PHP in a theme, Custom Body Class adds the chosen identifier through the normal WordPress body-class mechanism.
The result is a styling hook, not a completed design. Your existing CSS or frontend code decides what the class means. Adding compact-layout does not automatically change spacing, just as adding brand-accent does not select a color. The module's value is making the identifier consistent and editable from WP PowerSuite while leaving the actual design rules in the place where you normally maintain them.

Keep Site-Wide Flags Separate From Individual Pages

Some design decisions apply across a website rather than belonging to one page. A client build may use a shared component stylesheet that checks for a site-specific class, or a redesign may need a recognizable flag around a collection of new styles. Storing that flag at the body level avoids making every editor responsible for adding the same identifier to each post or page they create.
Custom Body Class deliberately applies the configured list site-wide. It does not provide conditions for a particular page, taxonomy, login state, or post type. A class named special-offer would still be a global class, not an instruction to find offer pages. This is useful when the requirement really is global, and it makes the boundary clear when a project instead needs individual-page or role-based targeting.

Maintain Class Names Without Editing Theme Markup

The module accepts a small, readable list instead of requiring a custom markup field. Separate names with spaces or commas, and WP PowerSuite cleans each class name and removes repeated entries before producing the final list. Up to 40 class names can be configured within the input limit, giving room for several intentional flags without turning the setting into a place for arbitrary HTML or large code blocks.
Because it uses WordPress's body-class output, the integration belongs to the normal theme-rendering workflow. A template that bypasses that output is outside the module's direct control. There is also nothing to run when the list is empty. That makes the configuration straightforward for a developer taking over a site: the setting contains class names, and their visual effect can be traced to the corresponding stylesheet rather than hidden template edits.

Choose Global, User, or Role-Based Classes

Global classes are useful when every frontend visitor should receive the same identifier. For account-specific styling, Username Body Class supplies classes based on the signed-in user's login and ID. For broader audience styling, User Role Body Class supplies role identifiers and a frontend guest class. Those modules answer different targeting questions and do not need to be simulated by manually entering a username into this global setting.
Custom Body Class also leaves wp-admin untouched. The user and role modules support administration as well as frontend output, but this module is intentionally limited to public theme output. Choosing the right source of classes keeps a styling system understandable: a global marker for the site configuration, a user marker for a specific account, or a role marker for an audience. None of those visual selectors changes WordPress permissions.

Pair the Class With the Styles You Already Maintain

A class becomes useful when your stylesheet uses it to target the intended elements. Custom Body Class does not contain a CSS editor, generate design rules, or remove other body classes supplied by WordPress. You can keep styling in your theme, another established stylesheet, or WP PowerSuite's Code Snippet module when that is how you manage custom CSS. The class simply gives those rules a consistent parent selector.
This separation is particularly useful for agency handovers. Editors can continue managing content, while the site's design system uses a clearly named body marker. Avoid treating that marker as a security rule: visually hiding an element through CSS is not the same as restricting access to the underlying content. Use the module for styling and frontend organization, which is the role its configuration and output are designed to serve.

Use Cases

  • Reusable Agency Styles
    Identify a site's design variant with a global class used by an existing shared stylesheet.
  • Custom Layout Flags
    Add a frontend marker for a collection of spacing, typography, or component rules.
  • Theme-Independent Configuration
    Maintain the chosen class names in WP PowerSuite instead of embedding them directly in theme markup.
  • Frontend Development
    Give custom CSS or frontend code a predictable selector without adding the same class to every content item.

Frequently Asked Questions

Related Modules

Discourages text selection and copying for chosen roles—gentle content protection, not airtight security.
Disabled
Promotes the first in-article image to featured image when none is chosen.
Disabled
Turn off selected keyboard shortcuts for certain roles to gently discourage copying or inspection on the front end.
Disabled
Share expiring preview URLs for drafts—no login for viewers, optional search-engine hints in settings.
Disabled
Publishes overdue scheduled posts on an hourly WP-Cron job, with a throttled wp-admin backup when cron is unavailable.
Disabled
Body classes for logged-in username and user ID—useful for theme tweaks and personalization. Privacy note: the username and ID appear in the...
Disabled
Duplicate a menu and all its items in one click from the Menus screen.
Disabled
External links in content open in a new tab with privacy- and SEO-friendly rel attributes.
Disabled
Comments off everywhere—cleaner for brochure sites, landing pages, or catalogs.
Disabled
Dashboard widget with content and user counts, including drafts, published items, and custom types.
Disabled