The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Use body_class() on the theme’s <body> element, then style against the classes WordPress generates for the current view. Add a static theme class by passing it to the function; add a conditional class with the body_class filter. The key caveat: specialized files such as page-about.php do not automatically get a unique body class derived from their filename.
Put body_class() on the body element
In a classic theme template, use the function directly in the opening body tag:
<body <?php body_class(); ?>>body_class() prints the class attribute, including classes WordPress derives from the current query and site configuration. It also accepts a string or array of additional class names. WordPress Developer Reference: body_class()
To add a class that should appear on every view using that body element, pass it as an argument:
#1 Best Overall
- Used Book in Good Condition
<body <?php body_class( 'site-shell' ); ?>>Keep theme-owned names meaningful and stable. A class such as has-landing-layout describes a styling state more clearly than a numeric page ID when the design intent is about a layout rather than one particular record.
What WordPress puts in the class list
The output is context-sensitive, not a fixed list that appears on every page. Depending on the query and site setup, get_body_class() can include classes for the front page, posts index, archives, search, pagination, attachments, 404 views, singular content, authors, categories, tags, taxonomy terms, page templates, logged-in visitors, admin-bar display, locale direction, theme identity, and more. Some classes incorporate IDs or sanitized names. WordPress Developer Reference: get_body_class()
Use a built-in class when it expresses the context your CSS needs. Before writing a selector, inspect the rendered <body> class list for the view in question: a class present on an archive or front page may not exist on a singular page, and vice versa. Check representative front-page, posts-index, singular, archive, search, 404, and custom-template views rather than assuming one page’s output applies everywhere.
Choose between a static class and the filter
| Approach | Use it when | Example |
|---|---|---|
Pass a class to body_class() |
The class belongs on every view rendered by that template. | body_class( 'site-shell' ) |
Add a class through the body_class filter |
The class depends on the current query or another condition. | Add has-landing-layout only for a chosen page template. |
get_body_class() returns the generated class names as an array and applies the body_class filter. A filter callback must return the class array; failing to return it can clear the classes. get_body_class() · body_class hook
Recommended Free Tools
For a conditional class, add to the incoming array and return it:
add_filter( 'body_class', function ( $classes ) {
if ( is_page_template( 'templates/landing.php' ) ) {
$classes[] = 'has-landing-layout';
}
return $classes;
} );The template path in is_page_template() must match the file path in the theme. Use a built-in conditional or template check where it fits instead of hard-coding assumptions about a page slug. Avoid adding a second class when a generated class already identifies the exact state your CSS needs.
Rank #4
- Used Book in Good Condition
Understand page-template body classes
WordPress does not derive a unique body class from every page-template filename. The Theme Handbook describes these patterns: Page Templates.
| Page setup | Template-related body classes |
|---|---|
Default page.php |
page-template-default |
Specialized page-{slug}.php or page-{ID}.php |
page-template-default; no unique class derived from that specialized filename |
| Custom page template | page-template plus a class derived from the template filename; the handbook example is page-template-my-custom-page-php |
A page also receives its post-type class, page, and a class such as page-id-{ID}. If a specialized page file needs its own styling hook, add a semantic class conditionally or use a custom page-template mechanism; do not expect a filename-specific class automatically.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →Use conditional tags after the query is ready
Conditional tags such as is_page_template() and is_front_page() test the current query. WordPress warns that query conditionals are only reliable after WP_Query is set up or when used from an appropriate action hook. They can work in a template location such as header.php, but not necessarily in footer.php. List of Conditional Tags · Theme Basics
For body-class logic, attach the filter in theme setup or another suitable point, then evaluate the condition when the filter runs against the front-end query. If a conditional unexpectedly returns false, check where and when it is being called before changing the condition itself.
Keep body-class selectors maintainable
- Prefer semantic theme classes for design states. Names such as
has-landing-layoutdescribe intent and are less tied to a particular page record thanpage-id-42. - Use generated context classes deliberately. A built-in archive, search, or singular class is useful when that query state is exactly what the style should target.
- Keep selectors scoped. A rule for one layout should not unintentionally change unrelated templates.
- Preserve the filter input. Append or otherwise adjust the supplied array, then return the complete class list.
- Inspect actual output. The class list varies with the current query and configuration, so confirm it in the rendered markup for the views your theme supports.
body_class() has been part of WordPress since version 2.8.0, according to its Developer Reference. WordPress Developer Reference: body_class()
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
