Should post_class() and body_class() be used in the “page.php” template?

  • I am building a custom WordPress theme for one of my clients and I noticed the new post_class() and body_class() functions in WordPress 2.8 and thought I would take advantage of them. I like the idea behind them and they should lead to some cool ways of creating custom themes, but if I use the body_class() on the <body> tag and post_class() on the “post” <div> on a Page (page.php) I run into problems.

    The Default WordPress theme doesn’t use the post_class() in the “page.php” template and I am guessing this is because they ran into the same problem I did.

    If you have the post_class() and body_class() function on a Page then your <body> tag will be assigned the “page” CSS class and your post <div> will also be assigned the “page” CSS class. I know there are workarounds by using multiple CSS selectors in my “style.css” file to narrow it down to the exact “page” CSS class I want to style, but it would be easier and more straight forward if both of these functions didn’t assign the same CSS class name when used on a Page.

    On single posts (single.php) and other pages (index.php) under the default theme I see that they are using both of these functions together without any problems.

    1.) Should I never use both of these in my “page.php” template file?
    2.) Is this a bug and will it be addressed in a future update?
    3.) Am I using the post_class() and body_class() functions in a way they were never expected to be used?

    I am just trying to find some direction on if I should consider using both of these function on Pages or if I should use the Default theme method for “page.php” and leaving the post_class() function out completely as shown below:

    <div class="post" id="post-<?php the_ID(); ?>">

Viewing 4 replies - 1 through 4 (of 4 total)

  • 1. Why? You can use the same class multiple times on the same page.

    2. I don’t think it’s a bug. Classes are just hooks for CSS. You either use them, ignore them or not output them at all.

    3. No. You can use them in any way you want. How you hook specific CSS onto the different classes is entirely up to you.

    Thread Starter cnc137

    (@cnc137)

    True. True. True.

    But, if I style a CSS class of “.page” thinking that it will only be assigned to the “post” <div> and then it is assigned to the <body> tag also when I load the Page it messes up everything.

    I know I can ignore them, but I was hoping I could style the “.page” <div> the same as I have styled the “.post” <div>, but I guess using the post_class() function to have it auto assign a class to the section like it does for post for the page won’t work.

    I was just didn’t want to have extra CSS classes on my page to style things when I could’ve maybe used what post_class() generates instead.

    Why have these functions if we can’t take advantage of them? Unless I am totally misinterpreting what they are supposed to be used for in the first place.

    Remember you can selectively style on body.page and div.page and have different CSS for each one.

    Thread Starter cnc137

    (@cnc137)

    Yes, I know there are workarounds, but I was hoping to style “.page” like I did “.post” and have it look the same for my Pages and Posts. When I use both body_class() and post_class() on the same page other than a Page then it only puts the .post class on the <div>, but on the Page it doesn’t put .post anywhere unless I specify post_class(‘post’) on the “page.php” template file, but that kind of defeats the purpose.

    Here are some samples:

    Homepage (index.php Template)

    <body class="home blog logged-in">
    <div class="post-19 post hentry category-uncategorized" id="post-19">

    Single Post (single.php Template)

    <body class="single postid-19 logged-in">
    <div class="post-19 post hentry category-uncategorized" id="post-19">

    Page (page.php Template)

    <body class="page page-id-2 page-template page-template-default logged-in">
    <div class="post-2 page hentry category-uncategorized" id="post-2">

    Notice how there is no “post” class assigned to the <div> for the Page, but the “page” class is assigned to the <body> and <div>. Also notice that there is no “post” class assigned to the <body> in any of these examples. It would be nice if the <body> tag for a Page would have a different class defined or if the <div> would have “post” assigned to it instead of duplicating the “page” class.

    I almost wonder if the <body> tag should have an ID assigned to it instead of a class to define it, since you will only have one <body> tag per page.

    I guess I will just work around this and style each section myself and maybe even remove these function calls. I was hoping that I could tap into these functions to handle the class definitions of these sections and follow what the WordPress core is using instead of going out on my own. ??

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Should post_class() and body_class() be used in the “page.php” template?’ is closed to new replies.