Custom WP_Query not working correctly

Question

OK,

So I have created a custom WP_Query that gets the post_type post and outputs it as a styled list. It works well and outputs the styled list but then underneath it displays all the posts again but in a completely different format (unstyled).

<?php

// get all post types
$args = array (
    'post_type'              => 'post',
    'post_status'            => 'publish',
    'pagination'             => true,
    'paged'                  => (get_query_var('paged') ? get_query_var('paged') : 1),
    'posts_per_page'         => 20,
    'order'                  => 'ASC',
    'orderby'                => 'date',
); ?>
<?php $wp_query = new WP_Query($args); ?>

<?php if ($wp_query->have_posts()): ?>
    <?php while($wp_query->have_posts()): $wp_query->the_post() ?>
        <div class="row">
            <div class="col-md-5">
                <a href="<?php the_permalink() ?>" class="fancybox">
                    <?php the_post_thumbnail('medium'); ?>
                </a>
            </div>
            <div class="col-md-7">

                <!-- title and the excerpt -->
                <h5><?php the_title() ?></h5>
                <?php the_excerpt() ?>

                <!-- post buttons -->
                <a href="<?php the_permalink() ?>" class="btn btn-primary">View full story</a>
                <?php if(get_field('comments_enable') !== false): ?>
                    <a href="<?php the_permalink() ?>#disqus_thread" class="btn btn-default"> Comments</a>
                <?php endif; ?>

            </div>
        </div>

        <hr style="margin: 10px 0; border-style: dotted; border-color: #333" class="row">

    <?php endwhile; ?>

    <!-- row -->
    <div class="row">
        <div class="col-xs-6">
            <?php previous_posts_link('<i class="fa fa-arrow-left"></i> <span class="text">Previous page</span>'); ?>
        </div>
        <div class="col-xs-6 text-right">
            <?php next_posts_link('<span class="text">Next page</span> <i class="fa fa-arrow-right"></i>'); ?>
        </div>

    </div>

<?php else: ?>

    <p class="text-muted">No news right now, please check back later.</p>

<?php endif; unset($wp_query); wp_reset_postdata(); ?>

This is all in a template partial and called using the get_template_part() method. If I assign the WP_Query to a variable other than $wp_query it doesn't double up but I need it to be $wp_query for the pagination links to work. I am also unsetting $wp_query and resetting the post data at the end of the loop. Puzzled and I hope you can help!

Answer 1

Use wp_reset_query() to restore the original query. This also calls wp_reset_postdata, so you can just replace that.

Answer 2

This is personal preference, but I don't really like using $wp_query and complicating things. There are two ways to solve this problem, one, by using a temp variable with $wp_query and two, changing the name of your variable and fixing pagination, which I would recommend, again, personal preference

METHOD 1

As I said, you can assign a temp variable to $wp_query and unset it as well

<?php

// get all post types
$args = array (
    'post_type'              => 'post',
    'post_status'            => 'publish',
    'pagination'             => true,
    'paged'                  => (get_query_var('paged') ? get_query_var('paged') : 1),
    'posts_per_page'         => 20,
    'order'                  => 'ASC',
    'orderby'                => 'date',
);
$temp = $wp_query; 
  $wp_query = null; 
  $wp_query = new WP_Query(); 
  $wp_query->query( $args );

<--- YOUR LOOP ETC--->

$wp_query = null; 
  $wp_query = $temp;  // Reset

METHOD 2

This is the method that I prefer. Give your variable a unique name, for example, $my_query and correct pagination in next_posts_link. This is how your custom query will look now. (Note No need to abuse the php tag. If you are not switching from php to html and visa-versa, you don't have to open and close php tags for every element as you did. Check my code below)

<?php

// get all post types
$args = array (
    'post_type'              => 'post',
    'post_status'            => 'publish',
    'pagination'             => true,
    'paged'                  => (get_query_var('paged') ? get_query_var('paged') : 1),
    'posts_per_page'         => 20,
    'order'                  => 'ASC',
    'orderby'                => 'date',
); 

$my_query = new WP_Query($args); 

if ($my_query->have_posts()): 
    while($my_query->have_posts()): $my_query->the_post() ?>

<---YOUR LOOP ETC--->

OK, this messes pagination up. To fix this, you need to set the $max_pages parameter in next_posts_link, so your next_posts_link will look something like this

<?php previous_posts_link('<i class="fa fa-arrow-left"></i> <span class="text">Previous page</span>', $my_query->max_num_pages); ?>

This will take care of your pagination problem