How to display 3 different loops in 3 columns on homepage

Question

I've been doing some searching on this topic but so far nothing I've found really answers my question. I know there are a few ways to go about this, but I'm looking for the method that's going to be the cleanest and most stable.

What I'd like to do is have three different sets of posts displaying on my homepage. Each group of posts will be displaying a different category with a different number of the latest posts displayed. Two of them will be occupying the same space in the "main" content area, with "tab" links allowing users to choose between which to display at any given moment. The third will be displayed in a sidebar to the right. None of the post groups need to be paginated, because after the latest X number of posts is displayed I'm just going to have a link to "read more" which will take the user to that specific categories archive page.

There's two possible solutions that I've come across but I don't know which would be best, or if either is a good option.

1. Set a static front page and create a custom page template for it which I can configure with the three different loops required.

2. Set the front page to "latest posts" and modify the default loop that's displayed.

So far I've easily got the "Sidebar" group of posts sets up. It's just the two main groups of posts that I'm having trouble with.

Any direction with this would be greatly appreciated. I've done some reading about the topic of multiple loops, but nothing quite applies to my situation enough to give me a clear idea of what I should do.

Thanks in advance.

Answer 1

There's a third option, creating a front-page.php template file. It's similar to your option #1, except option #1 includes you creating a Page within the admin, and in your case it doesn't sound like you need to do so. Option #1 is more appropriate when you also want to manage some of the front page's content in a regular Editor, rather than in the theme.

If you don't already have a child theme, start by creating one. Then copy front-page.php if the theme has one - if not, you may need to poke through the hierarchy to see which file actually controls your theme's homepage. Copy that into your child theme and then adjust as needed. Since you already have one loop taken care of in the sidebar, you can use the main/default loop for the 2nd set and add a wp_query for the 3rd set.

So for example, where your current theme file has the Loop -

if ( have_posts() ) :
    while ( have_posts() ) : the_post();
        // This inner part of the Loop varies by theme
        the_content();
    endwhile;
endif;

Replace that part with your own code - your markup will vary but hopefully this illustrates how you can set up your HTML for the tabs and then place the two Loops inside:

<div class="row container">
    <div class="left column">
        <?php
        // Your standard Loop goes here
        if ( have_posts() ) :
            while ( have_posts() ) : the_post();
                // Format as desired
                the_content();
            endwhile;
        endif;
        ?>
    </div>
    <div class="right column">
        <?php
        // This is where you create an additional Loop
        $args = array(
            'post_type' => 'post',
            'category_name' => 'your-category', // change to your category
            'posts_per_page' => 5 // change to the total you want to display
        );
        // run the query
        $thirdLoop = new WP_Query($args);
        // Now this looks mostly like a normal Loop:
        if($thirdLoop->have_posts()):
            while ( have_posts() ) : the_post();
                // Format as desired
                the_content();
            endwhile;
        endif;
    </div>
</div>

From here, you'll want to do a few things: customize your third loop's category and # of posts you want to display; customize both loops' HTML output and output more info like the_title() and the_permalink() to actually link to each post and not just show their content; you may also want to customize the main query, but that's a topic all of its own. Look for a WPSE post on pre_get_posts to customize the main query on the homepage and you'll be able to restrict that to whichever category you want to show in that Loop, as well as limit total number of posts.