WordPress.org

Ready to get started?Download WordPress

Forums

Posts grouped by date - how to set them off with graphics? (9 posts)

  1. cosleia
    Member
    Posted 9 years ago #

    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.

  2. Ming
    Member
    Posted 9 years ago #

    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>
    </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 http://ala.com (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.

  3. cosleia
    Member
    Posted 9 years ago #

    Thank you very much for your advice concerning CSS. This article at alistapart.com 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.

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

  5. cosleia
    Member
    Posted 9 years ago #

    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.

  6. cosleia
    Member
    Posted 9 years ago #

    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); ?>

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

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

    Put this after the loop (after the endwhile):

    FINAL FOOTER CODE

    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!

  7. Lorelle
    Member
    Posted 9 years ago #

    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!

  8. Jonathan Dingman
    Member
    Posted 8 years ago #

    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

  9. Jonathan Dingman
    Member
    Posted 8 years ago #

    Update: MCincubus was kind enough to write a more friendly piece of code. you can view it here: http://codex.wordpress.org/User:MCincubus/group_by_day

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

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.