Sridhar Katakam

Genesis and WordPress Tutorials

Splitting Posts into columns in Magazine Pro

by 13 Comments

Updated on May 24, 2018

Rabeela asks,

In this article I show how we can split the blog posts on Posts page and archive pages into 3 columns using Bill Erickson's code in Magazine Pro.

Before:

magazine-pro-posts-list-before

After:

magazine-pro-posts-list-after

Step 1

If you have not already, create a Page named say, Home and another named say, Blog.

At Settings > Reading, set Home as the static homepage and Blog as the Posts page.

Step 2

Add the following in Magazine Pro's functions.php:

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • can you explain what this part is doing and why you chose to use current_post?
    if( 0 == $wp_query->current_post || 0 == $wp_query->current_post % $columns )
    Thanks.

    Reply

    • “current_post” is the index (which starts with 0) of the current post.

      For the latest post, the value of $wp_query->current_post is 0. For the latest post and every third post we want the “first” class to be assigned to the .entry.

      That’s done using the if conditional:

      if( 0 == $wp_query->current_post || 0 == $wp_query->current_post % $columns )

      Latest post (let’s say, n) : 0 (this should get the ‘first’ class)
      n-1: 1
      n-2: 2
      n-3: 3 (this should get the ‘first’ class)
      n-4: 4
      n-5: 5
      n-6: 6 (this should get the ‘first’ class)
      …
      …
      …

      “%” is the modulo operator. It gives the reminder of a division.

      Reply

      • ah, ok. that makes sense. Thanks for breaking it down further.

        This would be interesting to use to break down categories into columns too.
        Maybe a loop running through post categories to be featured, showing the latest post of each category in 3 columns.Like the bottom part of NYtimes.com website.

        just thinking through it…I’d need a loop to run through each category, then list the first post and its meta.
        Would it be best to include the post class in that loop or add it after like you have here.

        Maybe I’ll give it a go and see if I can’t figure it out.

        Thanks again.

        Craig

        Reply

  • Hi Sridhar,

    Welcome back online 🙂 This seems trivial but I have tried to add an add image code in my functions:
    add_image_size( ‘blog-featured-image’, 300, 300, TRUE );

    and regenerated thumbnails

    but the featured images are not changing sizes. Do you have any ideas what I might be able to do? Thank you!

    Reply
    • >