WordPress Loop: How to display recent posts in multiple divs

Question

I am writing a new template file. I want to display recents posts from different categories in varying numbers in different divs as you scroll down the homepage.

I have written a WP_Query statement but each time I run the loop it I doesn't close. The next <div> after the loop always ends up displaying inside the loop.

In this example you can see that the text "latest" gets caught inside the loop. If you add another div of text afterwards its fine.

What am I missing?

Website is here:

test site

The code I have written is:

<?php 
/*
Template Name: Home News
*/ 
?>

<?php
$sidebar = kloe_qodef_sidebar_layout(); ?>

<?php get_header(); ?>
<?php get_template_part( 'title' ); ?>
<?php get_template_part('slider'); ?>



    <div id="container">
        <?php 
            $recent_posts_query = new WP_Query(array('post_type' => 'post', 'posts_per_page' => 8, 'category_name' => 'technology', 'Fashion-Beauty', 'Art', 'Watches-Jewellery', 'Travel',));
        while ($recent_posts_query->have_posts()){
        $recent_posts_query->the_post(); ?>
            <div class="masonryImage"><?php the_post_thumbnail();?></div>

            <?php } ?>
    </div>

    <div class="advert-container">
        <img src="http://104.244.127.200/~qmintest/wp-content/uploads/2015/12/Home-Shop-Single-Image-1-1.png" alt="advert">
    </div>

    <div class="text-header">
        <h1>Editors Picks</h1>
    </div>

    <?php echo do_shortcode('[qodef_portfolio_slider type="fullscreen-slider" order_by="date" order="ASC" category_ID="251" speed="2000"]'); ?>

    <div class="text-header">
        <h1>Fashion/Beauty</h1>
    </div>

    <div class="main-news">
        <?php $the_query = new WP_Query(array('posts_per_page' => 3, 'category_name' => 'Fashion-Beauty' ));

        while ($the_query -> have_posts()) {
        $the_query -> the_post(); ?>
            <div class="new-content">
                <div class="new-image"><?php the_post_thumbnail('full');?>
                <div class="new-content-excerpt">
                    <h5><?php
                        foreach ((get_the_category()) as $category){
                            echo $category->cat_name . ' '; 
                            }
                            ?>
                    </h5>
                    <h1><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h1>
                </div>
                </div>
            </div>
        <?php } ?>
    </div>


    <div class="text-header">
        <h1>Latest</h1>
    </div>


    <div class="main-news">
        <!-- Define our WP Query Parameters -->
        <?php $the_query = new WP_Query(array('posts_per_page' => 3, 'category_name' => 'technology' )); ?>

        <!-- Start our WP Query -->
        <?php while ($the_query -> have_posts()) {
         $the_query -> the_post(); ?>
            <div class="new-content">
            <!-- Display the Post Image with Hyperlink -->
                <div class="new-image"><?php the_post_thumbnail('full');?></div>
                <div class="new-content-excerpt">
                <!-- Display the Post Category Hyperlink -->
                    <h5><?php 
                    foreach((get_the_category()) as $category) {
                    echo $category->cat_name . ' ';
                    }
                    ?></h5>

                    <!-- Display the Post Title with Hyperlink -->
                    <h1><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h1>
                </div>

            </div>
            <!-- Repeat the process and reset once it hits the limit --
         >
        <?php } ?>
    </div>
     </div>
   </div>
   </div>       


   /*
   <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <?php if(($sidebar == 'default')||($sidebar == '')) : ?>
        <?php the_content(); ?>
        <?php do_action('kloe_qodef_page_after_content'); ?>
    <?php elseif($sidebar == 'sidebar-33-right' || $sidebar == 
    'sidebar-25-right'): ?>
        <div <?php echo kloe_qodef_sidebar_columns_class(); ?>>
            <div class="qodef-column1 qodef-content-left-from-sidebar">
                <div class="qodef-column-inner">
                    <?php the_content(); ?>
                    <?php do_action('kloe_qodef_page_after_content'); ?>
                </div>
            </div>
            <div class="qodef-column2">
                <?php get_sidebar(); ?>
            </div>
        </div>
    <?php elseif($sidebar == 'sidebar-33-left' || $sidebar == 'sidebar-25-left'): ?>
        <div <?php echo kloe_qodef_sidebar_columns_class(); ?>>
            <div class="qodef-column1">
                <?php get_sidebar(); ?>
            </div>
            <div class="qodef-column2 qodef-content-right-from-sidebar">
                <div class="qodef-column-inner">
                    <?php the_content(); ?>
                    <?php do_action('kloe_qodef_page_after_content'); ?>
                </div>
            </div>
        </div>
    <?php endif; ?>
<?php endwhile; ?>
<?php endif; ?>*/


    <?php get_footer(); ?>

    <script type="text/javascript">

    jQuery(window).load(function() {
    var container = document.querySelector('#container');
    var msnry = new Masonry( container, {
    itemSelector: '.masonryImage',
    columnWidth: '.masonryImage',                
  });  

    });


</script>

Answer 1

Looking over the code I am seeing a couple of things that may be causing issues.

1. The single line comment 'Repeat the process...' is not being closed properly.

2. As you are creating multiple custom loops, it's a good idea to reset the loops. You can do this by calling one of the below functions after each of your while loops.

   wp_reset_postdata(); or wp_reset_query();

As belinus has pointed out, you should use wp_reset_postdata(); as you are using WP_Query.

You can read more about this here: https://codex.wordpress.org/Function_Reference/wp_reset_postdata and here: https://codex.wordpress.org/Function_Reference/wp_reset_query

I hope this information is enough to get things working the way you want.