I’m busy trying to put together a 3x3 magazine-style layout for the home page of my blog.
I want the divs containing each post to flow vertically so there aren’t big white spaces beneath each row of 3. It seems like the easiest way to do this would be to have three columns and fill each of these (which will stop there from being a big space beneath each post-block) and then place these three columns side-by-side.
The problem is that the wordpress loop needs to pull posts sequentially. I don’t know how to change the order of the wordpress loop and, even though I’ve tried some PHP trickery using counts and for loops, I can’t seem to get it to work.
Any thoughts / advice on a basic wordpress loop / css way to make it work would be muuuuch appreciated as it’s driving me crazy!
I’ve attached an image to illustrate what i’d like
Hi,
It looks like you’ve gotten it fixed, if what I understand you wanted to do. Yes? If so, what was the solution?
I’m intrigued by what you’ve done altogether and would like to develop something like it.
Could you please share some of the key points you’ve done? I’d like to try to integrate those with my limited understanding of the PHP and way WP connects with it.
Thanks for your consideration.
I review the website and there is a simple solution for that, you just go in Style sheet at line number 47 and fix the height at div.post-block, so the post height should be same for all.
Your HTML creates rows using DIVs which prevents you from ever doing what you want to do. There will be no CSS option for you without a rewrite of your templates that output the HTML. I don’t know if there is a CSS-only option that would be able to do what you wanted to do. Paul O’B here at Sitepoint might know.
As for creating a loop using PHP to do what you want to do, yes that would be possible. A way would be to unwind the posts array Wordpress creates using a loop and put the posts into three separate arrays for each column.
You could have a counter inside the loop keeping track of which column you are on (1, 2, or 3), incrementing on each iteration. An if condition tests which iteration the counter is on and if it reaches 3, the counter is reset to one.
When the loop is on 1, an array such as $col1 is set equal to the post. Using the brackets without an index will automatically index the array so you don’t need to. $col2 is set equal to the post when the counter is on 2, $col3 is set equal to the post when the counter is on 3, and when the counter reaches 3 the loop is reset at the bottom to 1. The counter isn’t the control for the loop.
I’ve never tried anything like this, but I know it can be done. There is always a way. I’m not familiar enough with how to interface with Wordpress’ posts to do this. But it can be done.
