0

I have a page on which I want to display all my posts from my custom post type, which I am able to do in a single column. However, I want to display the posts in 2 columns.

For this, I will need two different html elements, one for the first column, which will display the first post, and another element for the second column, which will display the second post, third post in first column, fourth post in second column, and so on.

Therefore, I will need both of the html elements for both columns to be in the same Wordpress loop, but that means I will need to display the info of one post and then move on to display the info of the next post all in one loop.

I don't know if I can use the_post two times in the same loop, to display the info of the first post and then use the_post a second time in the same loop to display the info of the next post. Is this possible or is there another better way to do it?

Also, I am planning to use flexbox for the two columns so that on tablet or mobile, it will be responsive and make it just one column.

Improve this question
1
  • note that while there is an answer to your question, CSS grid also provides a solution here. Your proposed HTML also won't linearise correctly only mobile when it has to collapse into a single column
    – Tom J Nowell ♦
    Aug 4 at 18:30

1 Answer 1

Reset to default
0

Yes, but not by calling the_post twice in a loop.

Instead, use 2 loops and rewind_posts. The first loop displays column1 and skips even posts. Then you call rewind_posts() to go back to the beginning. The second loop displays column2 and skips odd posts.

After the first loop, call rewind_posts(); and it will rewind the main post loop back to the beginning again. If you're using WP_Query then the same function works for that if used on the query object e.g. $q->rewind_posts();

Improve this answer
7
  • What does rewind_posts() actually do? I've been looking online for an explanation but still can't understand
    – Romit
    Aug 4 at 18:54
  • Also, I tried it in the loop I am using just to see what it does and absolutely nothing changed.
    – Romit
    Aug 4 at 19:04
  • as you go through the loop it switches to the next post along each iteration, rewind_posts rewinds it back to the very first. Think of it like a casette tape, it's the equivalent of rewinding it back to the beginning so you can do it again.
    – Tom J Nowell ♦
    Aug 4 at 20:09
  • And no, you do not use it inside the loop, it is to be used after the loop. Look at the examples on the official documentation developer.wordpress.org/reference/functions/rewind_posts
    – Tom J Nowell ♦
    Aug 4 at 20:09
  • Ok but when you rewind, does it go all the way back to the first post or just the previous post, for example if you were on the 5th post would it go back to the 1st or would it just go one back to the 4th? I couldn't find the answer to this anywhere.
    – Romit
    Aug 4 at 20:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.