Support » Fixing WordPress » Posts grouped by date – how to set them off with graphics?

  • Hello πŸ™‚

    I’m in the process of creating a WordPress theme, based on the template I’m currently using with Blogger. You can see my existing template here; what I’ve been working on is up here, but it’s always changing so I can’t guarantee what you’ll see.

    I’m a complete newbie at PHP and CSS, so I’ve been modifying the default theme/template and just watching what happens to the page when I do so.

    In Blogger, there are tags called <BlogDateHeader> and <BlogDateFooter>. These tags allowed me to create a table for each day’s posts. I like how this looks, having each day marked off in its own table, and I would like to do this in WordPress, but I’m not sure it’s even possible.

    (I would love to render everything purely in CSS and avoid tables, but I don’t think there is a way to do that without CSS3’s border-image function, which isn’t implemented yet.)

    So, my question is, can what I want to do actually be done? I have tried using the_date for this, e.g.:

    <?php the_date('l, F j, Y',$beforedate,$afterdate); ?>

    where $beforedate and $afterdate contain the table information that goes around the date, but there are two problems with this: 1) I cannot seem to format the look of the date text when using this kind of parameter; 2) I can’t close the tables. If I put tr, td, and table closing tags before each new date header, then I end up having extras at the top of the page. I guess I need a way to tell php not to display the tags if it’s the first post on the page, or something similar.

    Can this be done? I would really like to keep the unique look of my blog.

Viewing 8 replies - 1 through 8 (of 8 total)
  • This is possible in CSS. What you have to do is think like a table πŸ™‚ By that I mean you’re using table cells as ‘hooks’ – ie somewhere to place the appropriate background image. So you have to convert <td> elements to css elements.

    <div class="dailypost">
    <div class="top">Today's date</div>
    <div class="middle">Post Text</div>
    <div class="bottom">...</div>

    Then what you could do is add all the images together into three strips. So you’d have left corner + top bar + right corner as one image and set it as the background of top. Do the same for the middle and bottom. That’ll give you the same effect. Keep in mind the one image per row only works for fixed width layouts because the image is premade at one size. To do it in a liquid layout, like you’re currently doing, you need to add a few more hooks. I can’t remember the exact article but you should check (A List Apart). I know it’s had articles about this in the past.

    Sorry that doesn’t directly answer your question. Just wanted to show you some CSS alternatives.

    Thread Starter cosleia


    Thank you very much for your advice concerning CSS. This article at seems to discuss exactly my issue.

    I am still unclear on whether or not there is a way to have a “date footer” in WordPress, however. I don’t want there to be a box around every post, but around every date. Each date has multiple posts in it. In Blogger, this was easy, because there was a tag for it. Essentially, I am unclear on what I could mark in my index.php as the date footer, something that would only show up at the end of a group of posts that all occurred on the same day.

    Thanks for any help.

    Why not use the same blogger template & css file, and replace the blogger tags with The Loop?

    Thread Starter cosleia


    As far as I’ve been able to tell, The Loop does not have an analogue for Blogger’s <BlogDateFooter> tag. If I’m wrong, please let me know, because that would solve all my problems.

    Thread Starter cosleia


    Okay, my friend (are people who read each other’s blogs considered friends?) Derik DeLong helped me out with this problem, and I thought I’d share his solution with you.

    Put this before the beginning of the loop:

    <?php $firsttime = true; ?>

    Put this at the beginning inside the loop:

    <?php $newdate = the_date('',' BEFORE','AFTER', FALSE); ?>

    if ($firsttime) :
    $firsttime = false;
    elseif ($newdate != "") :
    <?php endif; ?>

    <?php if ($newdate != "") : ?>
    <?php echo $newdate; ?>
    <?php endif; ?>

    Put this after the loop (after the endwhile):


    This has done the trick, and all I need to do now is tweak some CSS to get it all to look right. Thanks to Derik for his code-mastery!

    If this is really working for you, I’d like to consider adding it to the Codex in a bunch of “examples of the Loop” that I’m collecting. If it’s okay with you. This is brilliant!

    I’m trying to get this code working, but really I’m just completely confused where to put anything in the index.php

    Can you possibly clarify your post so that it is much clearer about how to use it? That would be much appreciated. Thank you

    Update: MCincubus was kind enough to write a more friendly piece of code. you can view it here:

    It’s very straight forward and easy to work with.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Posts grouped by date – how to set them off with graphics?’ is closed to new replies.