Title here
Summary here
Custom Body Classes
Add custom CSS classes to the body tag on every page of your site. Use these classes as CSS hooks for advanced styling, theme modifications, or conditional designs.
Use Cases
- Add a “dark-mode” class to enable site-wide dark theme CSS
- Apply a “special-layout” class during promotional periods
- Add classes for A/B testing different designs
- Create hooks for custom CSS without editing theme files
How It Works
- Enable the module in Switchboard
- Enter your custom class names (comma-separated)
- Classes are automatically added to the
<body>tag on all pages - Target these classes in your CSS for custom styling
Where to Find It
Location: Configure class names in the module settings. Classes appear in the body tag on all frontend pages.
Settings
| Setting | Description |
|---|---|
| Custom CSS Classes | Comma-separated list of class names to add to the body tag |
Adding Classes
Enter class names separated by commas or spaces:
dark-mode, custom-layout, special-pageAll three classes will be added to every page’s body tag:
<body class="... dark-mode custom-layout special-page">CSS Examples
Dark Mode Toggle
Add “dark-mode” class, then use CSS:
/* Normal styles */
body {
background: #ffffff;
color: #333333;
}
/* When dark-mode class is present */
body.dark-mode {
background: #1a1a2e;
color: #e0e0e0;
}
body.dark-mode a {
color: #64b5f6;
}Seasonal Themes
Add “holiday-theme” during holidays:
body.holiday-theme {
--primary-color: #c41e3a;
--accent-color: #228b22;
}
body.holiday-theme .site-header {
background: linear-gradient(135deg, #c41e3a, #228b22);
}Layout Variations
Add “wide-layout” for a different layout:
body.wide-layout .container {
max-width: 1600px;
}
body.wide-layout .sidebar {
display: none;
}Valid Class Names
Class names must follow CSS naming rules:
| Valid | Invalid |
|---|---|
custom-theme | 123-theme (can’t start with number) |
myClass | my class (no spaces in name) |
dark_mode | dark@mode (no special characters) |
theme-v2 | theme/v2 (no slashes) |
The module automatically sanitizes input, so invalid characters are removed.
Combining with Other Modules
This module works well with:
- User Role Body Classes: Add role-specific styling
- Custom Frontend CSS: Write CSS targeting your custom classes
- Conditional Redirects: Different experiences based on classes
FAQ
Do classes apply to the admin area?
No, custom body classes only apply to the frontend. The WordPress admin has its own body class system.Can I add classes conditionally?
This module adds classes globally to all pages. For conditional classes based on page type, user role, or other conditions, use the other body class modules or custom code.Will this conflict with my theme’s classes?
No, your custom classes are added alongside existing classes. They don’t replace or interfere with theme or WordPress core classes.How many classes can I add?
There’s no practical limit. Add as many as you need, separated by commas.Use descriptive class names that indicate their purpose. “promo-banner-active” is clearer than “class1” when you revisit your CSS months later.
These classes apply site-wide to every page. For page-specific classes, WordPress already adds classes like “page-id-42” or “single-post” that you can target.
PRO
Upgrade to Pro
Get access to all 147 modules with a single license