How to display 3 different loops in 3 columns on homepage

Question

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.

Related Posts: