Put <body > in your classic theme’s body element. WordPress then prints a context-aware class list that CSS can use for front pages, archives, singular content, templates, searches, 404s, and other states. Add a permanent theme class as an argument, or add conditional semantic classes through the body_class filter while always returning the incoming array.
Place body_class() in the body element
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minutePC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11In a classic theme, add the function to the opening body tag, normally in header.php:
<body <?php body_class(); ?>>body_class() prints the element’s class attribute and accepts an optional string or array of additional classes. It has been available since WordPress 2.8.0. See the function reference.
For a class that should appear on every front-end view, pass it directly:
<body <?php body_class( 'site-theme' ); ?>>You can also pass an array:
<body <?php body_class( array( 'site-theme', 'has-wide-layout' ) ); ?>>How WordPress builds the class list
body_class() obtains its values from get_body_class(). That function returns an array, adds classes describing the current query and site configuration, applies the body_class filter, and returns unique class names. Details are in the get_body_class() reference.
#1 Best Overall
Depending on the request and configuration, generated classes can describe:
- Front page, posts index, privacy-policy page, archives, date archives, search results, pagination, attachments, and 404 responses.
- Singular content, post types, post or page IDs, authors, categories, tags, taxonomies, and sanitized names.
- Page-template state, logged-in visitors, the admin bar, custom-background or custom-logo support, responsive embeds, and active or child theme identity.
- Right-to-left locale and other state-specific details.
There is no single universal class list. The exact output changes with the current query and the site’s settings, so inspect the rendered HTML for each view you support.
Add semantic classes with the body_class filter
Use the filter when a class depends on a query or template condition. The callback must return the complete class array; omitting the return clears the classes WordPress generated. The hook reference documents this contract.
add_filter( 'body_class', function ( $classes ) {
if ( is_page_template( 'templates/landing.php' ) ) {
$classes[] = 'has-landing-layout';
}
return $classes;
} );The path in is_page_template() must match the template path used by your theme. A semantic name such as has-landing-layout keeps CSS tied to the design concept rather than to a page ID.
Free tools Windows power users keep installed
One-click scans. No signup required.
Static argument or filter?
| Approach | Best for | Scope | Important detail |
|---|---|---|---|
Pass a string or array to body_class() |
Classes that are always present | Global | Simple and visible at the body element |
body_class filter |
Classes based on query, template, or visitor state | Conditional | Return the original array after adding or removing values |
| Built-in generated classes | States WordPress already describes | Context-dependent | Prefer these when they express the CSS condition you need |
| Theme-owned semantic classes | Design concepts such as a landing layout | As narrow as the condition | Use stable names instead of numeric IDs |
Understand page-template body classes
Page-template naming is a common source of incorrect selectors. The Theme Handbook’s Page Templates documentation distinguishes three cases.
Rank #2
- Used Book in Good Condition
Default page template
A page rendered by the theme’s standard page.php receives classes including page, its page-id-{ID}, and page-template-default.
Specialized page-{slug}.php or page-{ID}.php
These filename-based templates also receive page-template-default. They do not automatically receive a unique body class derived from the specialized filename. Therefore, a selector such as .page-template-page-contact-php is not a reliable assumption for a page-contact.php file.
Custom page template
A custom template declared with a template header receives page-template plus a class derived from its filename. The handbook example is page-template-my-custom-page-php. Verify the actual rendered class when naming selectors, especially after moving a file or changing its header.
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 →Scan for outdated or missing drivers - takes under a minuteDriver Scan →If a specialized page needs a guaranteed, readable hook, add one through a conditional filter:
add_filter( 'body_class', function ( $classes ) {
if ( is_page_template( 'templates/contact.php' ) ) {
$classes[] = 'has-contact-layout';
}
return $classes;
} );Use conditional tags at the right time
Conditional tags such as is_front_page(), is_search(), is_404(), is_singular(), and is_page_template() answer questions about the current query. They are safe only after the query has been set up or from an appropriate action hook. WordPress explains this timing rule in its List of Conditional Tags.
In a normal front-end template location such as header.php, the main query is available when the body is rendered. A conditional may not work as expected in an earlier bootstrap location, and the Handbook notes that conditional tags can work in a template location such as header.php but not necessarily in footer.php. Keep query-dependent class decisions in the filter or a hook where the query is known to exist.
Prefer a built-in condition or template check over guessing from a URL slug. For example:
add_filter( 'body_class', function ( $classes ) {
if ( is_search() ) {
$classes[] = 'is-search-results';
}
if ( is_404() ) {
$classes[] = 'is-error-page';
}
return $classes;
} );Scope CSS without creating accidental side effects
Choose stable names
Use names that describe the design state: has-landing-layout, is-search-results, or has-sidebar. Numeric classes such as page-id-42 are useful for one-off exceptions but couple the stylesheet to content that can be replaced or migrated.
Use the narrowest useful selector
A body class is a high-level scope. Combine it with a component selector when possible:
.has-landing-layout .site-header .primary-nav {
/* Landing-page navigation styles */
}Avoid broad rules such as .page p when they could affect every paragraph in unrelated page templates.
Do not duplicate context needlessly
If WordPress already supplies a class that exactly expresses the state your CSS needs, use it. Add a theme-owned class when it conveys a separate design decision or creates a more stable contract for your stylesheet.
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 →Inspect the generated classes in real views
Because the list is query-sensitive, check representative rendered pages in browser developer tools. At minimum, inspect:
- Front page and posts index.
- A singular post and a standard page.
- An archive, date archive, search-results page, and 404 page.
- A page using each custom template your theme supports.
- Logged-in and logged-out views if admin-bar styling matters.
Confirm the exact class spelling before writing selectors. This catches the specialized-template exception, differences caused by child themes, and classes that appear only when a site feature is enabled.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Common mistakes and fixes
Replacing the body class output
Writing a literal class="my-class" instead of calling body_class() removes WordPress’s context classes. Keep the function in the body tag and pass additions through its argument or filter.
Forgetting to return the filter array
This callback is broken because it returns nothing:
add_filter( 'body_class', function ( $classes ) {
$classes[] = 'has-landing-layout';
} );Always finish with return $classes;.
Assuming every page filename creates a unique class
page-{slug}.php and page-{ID}.php use the default template body class pattern. Use a declared custom template or a filter condition when you need a dependable unique class.
Calling conditionals before the query exists
If a conditional always evaluates incorrectly, move the logic to the body_class filter or an action hook that runs after WordPress has set up the query.
Testing only one page
A class list that looks correct on the front page may differ on archives, searches, 404s, or child-theme views. Validate every context that has a distinct design.
A maintainable pattern for a classic theme
Keep the body tag simple, use built-in classes for ordinary WordPress states, and centralize theme-specific conditions in one filter:
Recommended Free Tools
<body <?php body_class( 'site-theme' ); ?>>add_filter( 'body_class', function ( $classes ) {
if ( is_page_template( 'templates/landing.php' ) ) {
$classes[] = 'has-landing-layout';
}
if ( is_singular( 'portfolio' ) ) {
$classes[] = 'is-portfolio-item';
}
return $classes;
} );This separates an always-present identity class from query-dependent states, preserves WordPress’s generated context, and gives the stylesheet semantic hooks that are less fragile than content IDs.
Quick Recap
Reference checklist
- Use
<body <?php body_class(); ?>>in the classic theme’s body element. - Pass a string or array for classes that are always present.
- Use the
body_classfilter for conditional classes and return the full array. - Remember that default, specialized filename-based, and declared custom page templates have different class patterns.
- Run conditional tags only after the query is available.
- Prefer semantic, stable names and narrowly scoped selectors.
- Inspect rendered output across representative queries before finalizing CSS.
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.
