Grow your CSS skills. Land your dream job.

WordPress: Multiple loops or 1 loop with multiple display options?

  • # May 20, 2012 at 4:15 am

    Hi everyone

    I’ll start by saying, this site is such an inspiration for me: An amateur developer who is hoping to learn the skills to start sharpening people’s websites.

    I’m trying to construct a custom front page for a blog. I’m new to this, but fairly confident. What I’d like is for you to guide me in how best to use the WordPress loop to accomplish the following:

    All the items detailed below come from the whole posts database – at this stage, I don’t want to filter by category or date. Each section simply shows the next post(s). My question entirely relates to the front page.

    The front page will have the latest article, with a custom excerpt (I’ve written the function – it shows around 250 characters and doesn’t strip out the important HTML tags, so it’s more sophisticated than the_excerpt()).

    Underneath that is a 2-column setup – it displays the next two latest posts, one on the left and one on the right. This has a standard excerpt, with excerpt_length filtered in to give us 100 characters. The CSS works fine – around 46% left and right, and a custom function to display a small category-related thumbnail.

    Under this is a 3-column setup, again displaying the next 3 posts, but obviously smaller. And there’s barely any excerpt, but all the tags, comment count, etc.

    Then under this is another 2-column setup, with each column containing 4 post titles and tag details only.

    I have also done some custom code because I want the titles, comment details, author details etc. to line up horizontally – so far, I’ve only done this with the 3-column setup. For example, if it has one post with a 2-deck title and the one on the right has a 1-deck title, the 1-deck excerpt body will still line up with the one next to it. I do this by running the query 3 times: Once for the title, once for the tags and once for the excerpt, each contained in a div.

    Right now, this is roughly how it works:

    div for main article

    query_posts(‘showposts=1′)

    Code to display the first article.

    /div

    div for 2 columns, 1 post in each column

    query_posts(‘showposts=2&offset=1′)

    Code to display the second 2 articles.

    /div

    div for 3 columns, 1 post in each column

    query_posts(‘showposts=3&offset=2′)
    Code to display the title
    rewind_posts();

    query_posts(‘showposts=3&offset=2′)
    Code to display the meta stuff
    rewind_posts();

    query_posts(‘showposts=3&offset=2′)
    Code to display the small excerpt

    /div

    div for 2 columns and 4 post titles

    query_posts(‘showposts=4&offset=7′)
    Code to display 4 titles

    query_posts(‘showposts=4&offset=11′)
    Code to display 4 titles next to the other 4.

    /div

    OK, I hope I’ve made that simple enough. I didn’t create a new object or do any other playing around – the first ‘query_posts()’ that you see is the first PHP interaction with the loop in my template.

    I’ve got 2 issues I need your expert guidance on:

    1) is this the right way, performance-wise (and logic-wise) to achieve what is essentially 1 loop but with different display parameters? I’ve sometimes wondered if I should simply run this with a while {} loop – while ($post_count = 1) {display the single excerpt}, while ($post_count > 1 && $post_count < 4) {display the 2 excerpts in 2 columns} etc. But I'm not clear how to do that, or whether there is a performance gain. My loop seems fairly simple, but something doesn't feel right about what I'm doing.

    How would you do this? Am I right in thinking that this isn’t really multiple loops? Am I further right in thinking that this is really just a formatting issue, rather than a loop issue?

    2) A more general table-style question: Using the 3-column example, I have 3 parts of the data that could cause the adjacent columns not to line up – some headlines being longer than others, some items having more tags than others, and some excerpts being longer than others. In order to make sure that each section starts horizontally in the same place as its neighbours, I create a div to contain the lot, then a div to contain the titles, then the titles in sub-divs, and so on. This works great and things display nice. But is that the right way in CSS/PHP/HTML to display WordPress data like this, or is there a better way? I really like the space that you get when you line things up like this as well – a lot of bonus white space.

    Thanks in advance for your help. I’m happy to post my code. The site right now is on a private setup so it’s not publically accessible.

    # May 20, 2012 at 9:59 am

    1) I’m not sure if this is the “right” way but I would do it like this myself too. An alternative way is to just write out 10 posts, and then depending on the post count, write out opening divs and/or closing divs (for example, after the second post, write a closing div and a new opening div for the 2-column structure), but that gets kind of confusing very early on.

    So yea, I’d start with the divs, and then fill them with the appropriate posts like you did.

    2) If you want all your posts to line up like that, I’m almost inclined to suggest to use tables, since it’s basically a table structure that you want. But apart from that, your approach seems fine — give everything a fixed height.

    If you’d feel really adventurous you could use some jQuery to determine the highest of the three posts and then make the other two the same height. For example, the height of the title in the first column is 32px (cause it’s two lines), then the title in the second is 42px (because it has 3 lines), and then title in the third column is 16px (cause it’s one line); then make all three titles 42px and they’re lined up.

    I think you’re doing it right, I would probably do it the same way.

    # May 20, 2012 at 11:45 am

    Hi Senff. Thanks for a thoughtful response :)

    The way I’ve done the loop seems to work fine, which made me suspicious haha. I actually think that even with Chris and co’s brilliant work on WordPress, there’s still a bit of mystery about the loop. I was stumped for ages, if I’m honest! Your comment about looping through 10 posts, changing my markup depending upon what it’s doing, is the way I *think* I should do it – but it actually means more code. It would make much more sense once it’s complete, but I suspect I’d get fed up before then.

    When it comes to point 2, I’m actually not doing any measurement. I’m simply DIVing it up and including an :after bit of clear:both stuff to draw the div down.

    By doing that, the containing div is already as tall as the tallest element, so I don’t even have to care about box sizes.

    But it still seems a bit unprofessional! When I read your comment about it, it made much more sense than my thinking. But maybe this is “newbie’s curse”: Assuming that my simple solution must somehow not be right.

    Given what I’ve said – that I just do a div, with 2 divs inside it, floated left and 46% wide, for the title, then a clearfix, then a div with 2 divs inside it etc for the excerpt, and this lines everything up without me using any height specified, do you think I should do more to *guarantee* the height of the boxes? I guess my instinct is “if it works with the bare minimum of code, don’t add more”. But:

    I’m intrigued by your suggestion about JQuery. I’ve been avoiding it, but suddenly yesterday I realised the beauty of JQuery and plan to learn it (and use it wisely!). If you could give me a little more information about what I might want to do to check for element sizes, I’d be really grateful. I’m not asking for code, just something to make me think.

    I’m very new to this, as I’ve said, and I’m so grateful for the community out there. That’s the real benefit of open-source: The mindset that goes with it, the willingness to share. I’m in my 40s and a manual worker, so this is a completely new thing for me.

    I’m having an absolute ball playing with it though.

    Yesterday I finally cracked something I’ve been trying to do for ages – on the front page, where you have your excerpts and, say, “24 comments”, I’ve always wanted it to tell me how many unread comments there are and to offer me a link to take me to the first unread comment.

    I guess I spent 20 hours coding it in total, but I cracked it and I’m so happy. The test site now says “24 comments (11 unread)”, and if you click on the “11 unread” you get taken to the first unread post. I’ve seen plugins that will add a CSS class to it, but I wanted a front-page display item. My one adds a cookie showing the last post displayed, and when you visit the home page it quickly loops through the comment ID for each excerpt displayed, pulls out the URL for the first unread one and serves it up as a link. My plan is to add a “bookmark” link under each comment (the site can get hundreds of comments – it’s a political site) with JQuery/Ajax, if I can ever get my head around it, because the unread comment count assumes that if you displayed the page, you read all the comments. I want the user to have more control.

    Stuff like that, and the backup and inspiration provided by you guys, is making me want to dig in even more. I’m spending loads of time on the redesign, because the (very busy) blog is run by a friend who was still on WordPress 2.3 with the old v1.5 default theme – so the stuff I’m adding is a lot of fun.

    Thanks again – even if I end up doing this wrong, your post has given me a bit of confidence that I’m on the right track. Once the site is more than a playground and I can upload it to a public server for testing, I’ll post the link in here. You’ll all probably hate the politics (we’re all British left-wingers!) but I wanna make it a design to be proud of.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".