Custom Wordpress Loop not displaying when in Page Template

Question

I have a custom Wordpress loop in my index file which is not currently working. The purpose of this custom WP loop is to assign different classes and structure based on its post number.

The code below works perfectly in index.php file BUT unfortunately it doesn't work when copied it to a custom page template.

<?php
/**
* Template Name: custom page template
*/
get_header(); ?>

<?php if (have_posts()) : ?>
<?php $count = 0; ?>
<?php while (have_posts()) : the_post(); ?>
<?php $count++; ?>
<?php if ($count == 1) : ?>

<div class="item1">
<span>hello!</span<?php the_title(); ?>>
</div><!-- .item# --> 

<?php elseif ($count == 2) : ?>      

<div class="item2">
<?php the_title(); ?><span>Hi!</span
</div><!-- .item# --> 

<?php elseif ($count == 3) : ?>      

<div class="item3">
<!-- Put Your Stuff Here -->
</div><!-- .item# --> 

<?php elseif ($count == 4) : ?>      

<div class="item4">
<!-- Put Your Stuff Here -->
</div><!-- .item# --> 

<?php elseif ($count == 5) : ?>      

<div class="item5">
<!-- Put Your Stuff Here -->
</div><!-- .item# -->

<?php else : ?>

<?php endif; ?>
<?php endwhile; ?>
<?php endif; ?>

Goal:

What I'm trying to achieve is to create a custom page (let's say) www.mywebsite.com/my-custom-page that lists down all articles.

As mentioned above, the custom loop is not displaying in the page as well as the numbered pagination. As if the page template doesn't recognized or ignores the custom loop codes.

I have tried using the WP Query but still no luck. The code below returns "Sorry, no posts matched your criteria."

Partially Working WP Query Code

Here's my website where this code will appear but seems the not working

<?php
/**
* Template Name: Custom Page - Blog
*/
get_header(); ?>


<!-- START of WP Query -->

<?php $the_query = new WP_Query( array("post_type"=>'post')); ?>

<?php if ( $the_query->have_posts() ) : ?>

<?php while ($the_query->have_posts()) : $the_query->the_post(); ?>

<?php $count++; ?>

    <?php if ($count == 1) : ?>
    <div class="item1">
        <span>Post 1</span><?php the_title(); ?>
    </div><!-- .item# --> 

    <?php elseif ($count == 2) : ?>      
    <div class="item2">
    <span>Post 2</span><?php the_title(); ?>
    </div><!-- .item# --> 

    <?php elseif ($count == 3) : ?>      
    <div class="item3">
        <span>Post 3</span><?php the_title(); ?>
    </div><!-- .item# --> 

    <?php elseif ($count == 4) : ?>      
    <div class="item4">
        <span>Post 4</span><?php the_title(); ?>
    </div><!-- .item# --> 

    <?php elseif ($count == 5) : ?>      
    <div class="item5">
        <span>Post 5</span><?php the_title(); ?>
    </div><!-- .item# -->

    <?php elseif ($count >= 5 || $count <= 7) : ?>      
    <div class="item6">
        <span>Post 6 to 7</span><?php the_title(); ?>
    </div><!-- .item# -->

    <?php elseif ($count >= 8 || $count <= 15) : ?>      
    <div class="item6">
        <span>Post 8 onwards - </span><?php the_title(); ?><?php the_excerpt(); ?>
    </div><!-- .item# -->

    <?php elseif ($count >= 16) : ?>      
    <div class="item6">
        <span>Post 8 onwards - </span><?php the_title(); ?><?php the_excerpt(); ?>
    </div><!-- .item# -->

    <?php
    global $wp_query;

        $big = 999999999; // need an unlikely integer

        echo paginate_links( array(
        'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
        'format' => '?paged=%#%',
        'current' => max( 1, get_query_var('paged') ),
        'total' => $wp_query->max_num_pages
        ) );
    ?>


<?php else : ?>

<?php endif; ?>
<?php endwhile; ?>
<?php else : ?>
<p><?php esc_html_e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>

<!-- END of WP Query -->


<?php get_footer(); ?>

    </article>

<?php get_footer(); ?>

Appreciate your help on this. Thank you!

Answer 1

As pointed in the previous answers, you can use WP_Query to make a custom query for posts, custom post types (CPT) and pages:

$the_query = new WP_Query( array(
    'post_type'      => 'post',
    'posts_per_page' => 10,
    // other args here
) );

And use The Loop to display the posts:

if ( $the_query->have_posts() ) {
    while ( $the_query->have_posts() ) {
        $the_query->the_post();
        //
        // Post Content here
        //
    } // end while
} // end if

Now referring to this:

Partially Working WP Query Code

Here's my website where this code will appear but seems the not working

I think you meant to say, "the pagination is not working", right? Because it's not:

1. Because you're using the global $wp_query object with your pagination.

2. In your WP_Query construct, you didn't set the paged parameter which is needed for the pagination to work properly.

So here's how it should be:

$current_page = max( 1, get_query_var( 'paged' ) ); // the current page
$the_query = new WP_Query( array(
    'post_type'      => 'post',
    'posts_per_page' => 10,
    'paged'          => $current_page,
    // other args here
) );

And then use the $current_page with paginate_links() — you can also see here, I used $the_query and not $wp_query when retrieving/specifying the max number of pages:

echo paginate_links( array(
    'current'  => $current_page,
    'total'    => $the_query->max_num_pages, // here I don't use $wp_query
    // other args here
) );

And below is a working code you can use in place of your partially working code (the one in between the <!-- START of WP Query --> and <!-- END of WP Query -->):

<?php
$current_page = max( 1, get_query_var( 'paged' ) );
$the_query = new WP_Query( array(
    'post_type'      => 'post',
    'posts_per_page' => 10,
    'paged'          => $current_page,
    // other args here
) );

if ( $the_query->have_posts() ) :
    $count = 1;
    while ( $the_query->have_posts() ) : $the_query->the_post();
        if ( 1 === $count ) :
        ?>
        <div class="item item1" style="background: red; color: #fff;">
            <span>Post 1</span> <?php the_title( '<h3>', '</h3>' ); ?>
        </div>
        <?php
        elseif ( 2 === $count ) :
        ?>
        <div class="item item2" style="background: orange; color: #fff;">
            <span>Post 2</span> <?php the_title( '<h3>', '</h3>' ); ?>
        </div>
        <?php
        // other conditions here
        else :
        ?>
        <div class="item item3" style="background: yellow; color: #666;">
            <span>Post <?php echo $count; ?></span>
            <?php the_title( '<h3>', '</h3>' ); ?>
        </div>
        <?php
        endif;
        $count++;
    endwhile;
?>
<p>Pagination:</p>
<?php
    $big = 999999999; // need an unlikely integer
    echo paginate_links( array(
        'base'     => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
        'format'   => '?paged=%#%',
        'current'  => $current_page,
        'total'    => $the_query->max_num_pages,
        'type'     => 'list',
        'end_size' => 3,
    ) );
?>
<?php else : ?>
    <p><?php esc_html_e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif;

wp_reset_postdata();
?>

Answer 2

You need to define the $args. You can find a list of items you can use in WP_Query here https://www.billerickson.net/code/wp_query-arguments/

See below:

// WP_Query arguments
$args = array(
    'post_type'              => array( 'post' ),
);

// The Query
$query = new WP_Query( $args );

// The Loop
if ( $query->have_posts() ) {
    while ( $query->have_posts() ) {
        $query->the_post();
        // do something
    }
} else {
    // no posts found
}

// Restore original Post Data
wp_reset_postdata();

Answer 3

I don't know what you mean by "custom WordPress loop" but the code is running for what WordPress already queried for posts and accordingly on your custom page this is not done! So have_posts() returns false. To query "manually" for all posts you need to do the following:

$the_query = new WP_Query( $args );
if ( $the_query->have_posts() ) {

and the rest goes from <?php $count = 0; ?> on. for more info on WP_Query see the the following WP_Query