Articles
My latest articles.
How to target every page except the Homepage in WordPress
Skills
When working with WordPress, one of its hidden superpowers is that it automatically adds helpful classes to the <body> tag of every page. These classes tell you what kind of page you’re on (homepage, post, page, archive, etc.), and you can use them to write very precise CSS selectors.
A common need is to apply styles to all pages except the homepage. Here’s how to do it.
Understanding WordPress <body> Classes
When WordPress loads a page, it inserts context-specific classes into the <body> tag. For example:
Homepage
<body class="home page page-id-2 ...">Notice the home class.
About Page
<body class="page page-id-7 ...">Notice there is no home class.
Single Blog Post
<body class="single-post postid-45 ...">
This behavior gives you a powerful way to write CSS that only applies in certain contexts.
Using the CSS :not() Selector
CSS provides the :not() pseudo-class, which allows you to exclude specific elements from your styling.
For example:
p:not(.highlight) {
color: gray;
}This would style all paragraphs except the ones with a highlight class.
Targeting All Pages Except the Homepage
Since WordPress always adds home to the <body> on the homepage, we can exclude it in CSS:
body:not(.home) {
/* Styles apply to every page except the homepage */
}If you want to specifically limit it to WordPress Pages only (and not posts or archives), use:
body.page:not(.home) {
/* Styles apply to all WordPress pages except the homepage */
}How It Works
body.page→ targets pages (like “About” or “Contact”).:not(.home)→ excludes the homepage.
So together:
- ✅ “About” page → styled
- ✅ “Contact” page → styled
- ❌ Homepage → not styled
- ❌ Blog posts → not styled
- ❌ Archives → not styled
Why This Is Useful
This approach is clean, scalable, and doesn’t require editing templates or adding custom PHP. It’s pure CSS that leverages WordPress’s built-in body classes.
Use cases include:
- Applying a different background to all subpages.
- Changing typography site-wide but keeping the homepage unique.
- Hiding elements (like breadcrumbs or sidebars) everywhere except on the front page.
Final Thoughts
By combining WordPress’s automatic <body> classes with the CSS :not() selector, you can easily create rules that apply to all pages except the homepage. This method is flexible, efficient, and theme-agnostic — no extra code or plugins required.
Try inspecting your <body> tag using your browser’s developer tools, and you’ll see exactly which classes you can target for even more control.