WordPress introduced the body_class() template tag in 2.8 to help theme authors style more effectively with CSS. You may not have needed it before, but the body_class template tag is so incredibly handy and versatile that it’s worth knowing how to use.
Why the body_class() tag is needed
In WordPress there is generally one body tag in your header.php file and numerous other templates that share the same header. This makes it tricky to add unique classes to the body tag based on the user’s location in the site. With static html files you can simply add in a body class depending on the needs of your page. However, with WordPress you will need a little help. The first time I needed to use it was in working on a site that required different background pages for each category archive page. The body_class() template tag saved the day.
How to use the body_class() template tag
Adding body_class() to your theme is very simple. Open your header.php file and replace the
tag with:
1 |
<body <?php body_class(); ?>>
|
Now when you view the source of your page, you should see a new output for the body tag, similar to this:
1 |
<body class="home-page logged-in chrome">
|
If you’re viewing a category archive page, it may look similar to this:
1 |
<body class="logged-in archive category category-art chrome">
|
Now that you have this output you can use the new CSS classes to customize the page, ie. :
1 2 3 |
body.chrome {
width: 980px;
}
|
Many times these new outputs are enough to work with for you to create custom backgrounds, target specific browsers, or change the style based on if a user is logged in or not.
How to further customize the body_class() template tag
An extensive list of classes is available for you to use to fine-tune your body tag. Select one or more and then add them to the tag.
- rtl
- home
- blog
- archive
- date
- search
- paged
- attachment
- error404
- single postid-(id)
- attachmentid-(id)
- attachment-(mime-type)
- author
- author-(user_nicename)
- category
- category-(slug)
- tag
- tag-(slug)
- page-parent
- page-child parent-pageid-(id)
- page-template page-template-(template file name)
- search-results
- search-no-results
- logged-in
- paged-(page number)
- single-paged-(page number)
- page-paged-(page number)
- category-paged-(page number)
- tag-paged-(page number)
- date-paged-(page number)
- author-paged-(page number)
- search-paged-(page number)
The body_class() template tag will save you from having to use lines and lines of conditional statements or any of the other complicated methods you used to use to make the body tag accessible by CSS. Once you harness the power of the body_class() tag, an unlimited number of customizations will be available to you.
Not sure I’m following this. So for example I can do this?
category.chrome {
font-size: 11px;
}
then find a category tag
<category >
No, it’s going to be a class that it adds to the body tag. Check to see what new classes your body tag has in it and use one of those.
Thanks.
I have used some of the wp tags/hooks before but not this one.
Thanks for a good article. Will look for more tips here.
Mahalo,
Is there a way is apply this on each page of a wordpress theme?
I was able to have a specific div on the home page, then I created another div
.page #myheader
But that only changes the div on the pages that are not my home page.
Can I add a specific
.page about-us #myheader
.page who-we-are #myheader
and so on. . . so that each page will change with the style I create. I tried many alternative style names, but no luck!
Any help would be appreciated!
thanks!
James
Incredibly handy. Will use it alot. Almost like when I learned to use wp_query etc.
Thanks
Nice post, learned a few new things! keep the good work up