Hello,

I have created a two column post layout on my site by placing . As is stands now my site displays the same posts side by side (did so by adding two postformat.php in the content div).
11
22
33
..
..

Like I said, the same post are displaying side by side- which I do not want. I'd like it to display posts as such:
12
34
56
..
..

Any ideas?

Thanks,
Eugene.

I'm pretty sure this has been asked and answered on this forum. It was a while ago, but you should be able to find it if you dig.

I've been digging and searching. I've found related threads- some seem to be related to another theme tho. What thread you are talking about?

I've read this thread, which I believe is similar to what I am trying to accomplish.

Jerryc, In one of your post in this Thread: 3 Column Post

You said: The grid part is pretty easy with MZ. You'd edit whatever main template you were using. Here is a basic post and a more advanced one on grid layouts.

To make the posts layout into the grids will probably require some advanced php. You may want to see the last post in this thread.

You'd probably first sort your posts in reverse chrono. Assuming you'd want your posts to lay out 1, 2, 3 across the first row, then 4, 5, 6 below that, you'd use a "for" loop, starting with the latest thread, and increment your counter by 3, so your first column would have posts 1, 4, 7 .... In the second column, you'd start one higher, so you'd have posts 2, 5, 8 ..., and one higher for the third, ending with 3, 6, 9 ....

P.S. Remember, PHP starts counting array items at 0, so you'd really have 0, 3, 6 ... in the first column, etc.
--------
I'm not quite understanding. How to I change the PHP to start counting in the arrangement that you have stated?

Any help would be appreciated.

Thanks

I'm going to have to call on other members of this forum to give you the other pieces. While I know quite a bit about html, php, and css, I'm rather new to WP and know almost nothing about posts. I only use WP for pages.

@jerryc: a page is just a special type of a post

Originally Posted by juggledad

@jerryc: a page is just a special type of a post

Yes, but excerpts of them don't get listed on the home page, which is what the poster wants to do, only in columns, and I can't help on this anymore than I have. Do you have some ideas on how to increment posts so they line up in columns, juggledad? This has been asked before, and I expect others will ask it again.

@jerryc

but excerpts of them don't get listed on the home page

correct because they are a special type of post.

If you only work with pages, shouldn't you refrain from offering suggestions for questions about posts?

@eugenea I know of no examples to show you how to do what you want to do. While I think it might be do able, for me to experiment and test it and write up directions would take more time that I am willing to donate to the forum at this time do to my other commitments. My paying customers and family come first.

I would suggest playing, possible count the posts giving the first a class of 'postcol1' and the second a class 'postcol2' the third 'postcol3' and then reset it so the fourth gets 'postcol1' etc

Then you could style it with CSS.

Originally Posted by juggledad

If you only work with pages, shouldn't you refrain from offering suggestions for questions about posts?

While I don't work with wp posts, I do know some php. So, perhaps somebody who knows enough about posts can take what I have shared about php and come up with a solution. It's called collaboration. I'd love to see more of it in this forum.

Originally Posted by juggledad

I would suggest playing, possible count the posts giving the first a class of 'postcol1' and the second a class 'postcol2' the third 'postcol3' and then reset it so the fourth gets 'postcol1' etc

Then you could style it with CSS.

When I first read this, I loved it. Then I realized that in order to have the most recent post at the top of the left column and the second most recent at the top of the second column, you'd have to reclassify all the posts every time you added one. That would get pretty tedious.

There should be a pretty easy way to make a PHP array the extracts of the posts, sorted with the most recent first. Then, a for loop for each column, incremented by the number of columns, will put them into the correct columns.

After you get the post excerpts into an array called "$post_excerpts" sorted in reverse chrono, here's how I'd write the code for column 1 of a three column by 6 post long index page:

PHP Code:

for ($i = 0; $i < 18; $i+=3)
    echo $post_excerpts[$i]; 


For column 2, the code would be the same, only the for loop would start with $i = 1. Column 3 would start with $i = 2. (Remember, PHP numbers its array elements starting at 0.)

On the subsequent index pages, it'd probably be easier to just do them in one column.

Originally Posted by jerryc

There should be a pretty easy way to make a PHP array the extracts of the posts, sorted with the most recent first.

If nothing else, whatever code is typically being used to put the code for each excerpt onto the index page could be used, only the output could be captured with output buffering, then parsed into an array, then lined up in columns. Here's an example of output buffering being used with MZ.

One question I would have for the OP: is the design supposed to be fixed, fluid, or responsive? That is, when viewed through a narrow viewport like a smart phone, what happens to the columns? Should the posts transform from:
1 2
3 4
5 6
to
1
2
3
4
5
6
?
Or do they stay side-by-side with either the same absolute width or percentage width?

When I first read this, I loved it. Then I realized that in order to have the most recent post at the top of the left column and the second most recent at the top of the second column, you'd have to reclassify all the posts every time you added one. That would get pretty tedious.

As you say Jerry, you don't know how posts work. Try reading the Wordpress codex and you will find that posts by default, are returned in date sequence, newest first, but it is possible to sort them in many different ways.

If you don't know an answer for sure, please go research it and test it before giving advice. This will help the person asking the question, or anyone in the future looking at the thread (they won't get incorrect or misleading information) and it will save the moderators time from having to review every post you make.

Originally Posted by juggledad

As you say Jerry, you don't know how posts work. Try reading the Wordpress codex and you will find that posts by default, are returned in date sequence, newest first, but it is possible to sort them in many different ways.

Except your solution would override that by forcing them into specific columns with the class designation. If somebody had their latest post classed as postcol1, then added another post, the previous post would have to be reclassified as a postcol2, and all the others would need to be reclassed accordingly to maintain the order

1 2 3
4 5 6.

If you don't know an answer for sure, please go research it and test it before giving advice. This will help the person asking the question, or anyone in the future looking at the thread (they won't get incorrect or misleading information) and it will save the moderators time from having to review every post you make.

I know this for sure. Test your solution and you'll see.

Jerry, class are assigned while a page is being built, not when the post is created. Please stop making statements that are false and misleading

When you create a post, you can assign a category or a tag to it, but not a class or id. Classes and ID's are part of HTML syntax, as someone who claims to know HTML, CSS and php, you should know that

You're right, juggledad. I don't understand how your css solution to this would work at all.

Originally Posted by CrouchingBruin

One question I would have for the OP: is the design supposed to be fixed, fluid, or responsive? That is, when viewed through a narrow viewport like a smart phone, what happens to the columns? Should the posts transform from:
1 2
3 4
5 6
to
1
2
3
4
5
6
?
Or do they stay side-by-side with either the same absolute width or percentage width?

This exactly. On a smaller screen post would be in 1 column- As I have it, it works as such.

On wider screens it comes back to 2 columns.

I've figured out how to divide it, that was no problem.

I just need to learn how to have the post display in the order I've asked.

BTW: Thank you for all your support guys.

Jerry, The OP was talking about modifying the template. My suggestion was to put code in the template to assign the classes to the posts and do the positioning with CSS based on those classes.

This is something I did with the Atahualpa theme. I wrote a multi column/custom query template so i do know a little about what I was suggesting.

It would seem that you have made assumptions about what I was suggesting instead of saying you do not understand. This has caused me to spend way to much time on this thread which is why I will again request that you do not make suggestions if you don't know how wordpress works. Go do some homework before making suggestions.

On reading this thread another idea occurred to me which I just tried and it seems to work.
This would create two columns by floating the posts. You could create three or more by adjusting the width percentage.
You could, of course, add other breakpoints. The following would, at 400px stop the floating of posts so as to display well on mobile devices. This assumes you have a variable width site.

@media screen and (max-width: 400px) {
.post {float: none; width: 100%;}
}
@media screen and (min-width: 600px) {
.post {
    float: left ;
    width: 40%;
    padding: 0 15px;}
}

Brilliant, simple, elegant solution, Larry. No custom php required, and responsive.

Originally Posted by lmilesw

On reading this thread another idea occurred to me which I just tried and it seems to work.
This would create two columns by floating the posts. You could create three or more by adjusting the width percentage.
You could, of course, add other breakpoints. The following would, at 400px stop the floating of posts so as to display well on mobile devices. This assumes you have a variable width site.

@media screen and (max-width: 400px) {
.post {float: none; width: 100%;}
}
@media screen and (min-width: 600px) {
.post {
    float: left ;
    width: 40%;
    padding: 0 15px;}
}

Thanks for this. Experimenting with it now.

Would this work with the MZ theme? seeing as it uses grids?
Eugene

Originally Posted by EugeneA

Would this work with the MZ theme? seeing as it uses grids?

It looks like it should. Try it. You might also adjust your widths. Play with it.

Please post a link with your results.

Thanks,

It seems to have worked - still tweaking it.

Problem is, it also messes up the format of my actual posts.

Which CSS file should I place the code in?

Eugene,
Anzelcore.com - click on any post and you'll see what i mean.

I only see one column of posts on your home page

@EugeneA... A question.

Why do you have your site title and tagline showing twice with the second taking up a huge amount of screen real estate? On a mobile device this shows as one over the other both the same size.

@lmilesw

I'm aware of this. I'm not quite done with the design as of yet.

@juggledad

I reset the layout- I was tweaking it yesterday but can't figure out how to target only the post on the index.

Thanks,
Eugene

can't figure out how to target only the post on the index.

if you mean the posts on the front page use 'body.home' as the beginning of your CSS selector. That will say to the browser 'if the body has a class of 'home' and ..rest of selectors... apply these CSS rules'