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!

You need to do have_posts and the_post calls from $the_query so they become: $the_query->have_posts() and $the_query->the_post() Also set $args = ['post_type'=>'post'] By the way you can find all these details in WP_Query Class reference page I have mentioned. — Mahdi Mehrizi
– Mahdi Mehrizi, Commented Mar 6, 2019 at 5:37
You need to add your initial count, after this <?php if ( $the_query->have_posts() ) : ?> add <?php $count++; ?>. — designtocode
– designtocode, Commented Mar 8, 2019 at 14:13

Sally CJ · Accepted Answer · 2019-03-08 19:20:44Z

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:

Because you're using the global $wp_query object with your pagination.
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  and ):

<?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();
?>

Hi Sally, sorry to ask. but is there a way to group all item1 class into a div container? Then item2 into a div container?
Hi Ben, sorry for the delay. Try this which should be used in place of the code in between the  and .

designtocode · Accepted Answer · 2019-03-05 10:30:46Z

3

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();

answered Mar 5, 2019 at 10:30

designtocode

2,2554 gold badges23 silver badges37 bronze badges

Comments

Sayed Mohd Ali · Accepted Answer · 2019-03-05 09:38:03Z

2

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

edited Mar 5, 2019 at 9:38

Sayed Mohd Ali

2,2523 gold badges14 silver badges31 bronze badges

answered Mar 5, 2019 at 7:41

Mahdi Mehrizi

2173 silver badges8 bronze badges

4 Comments

Ben Daggers Over a year ago

i have tried your suggestions but it returns nothing. See my updated question above. BTW, thank you for taking the time to look at my question.

Mahdi Mehrizi Over a year ago

Dear @BenDaggers you need to do have_posts and the_post calls from $the_query so they become: $the_query->have_posts() and $the_query->the_post() Also set $args = ['post_type'=>'post'] By the way you can find all these details in WP_Query Class reference page I have mentioned.

Ben Daggers Over a year ago

Sorry @MahdiMehrizi, i'm a noob and quite having a hard time figuring out what's to code to insert to what line. Could you please help?

Mahdi Mehrizi Over a year ago

@BenDaggers The First line of your code (the one you have corrected) becomes: <?php $the_query = new WP_Query( array("post_type"=>'post')); ?> And the third line becomes: <?php while ($the_query->have_posts()) : $the_query->the_post(); ?> and the rest is ok..

Prince · Accepted Answer · 2019-03-09 08:22:14Z

Please try this one   

  <?php
    /**
     * Template Name: Custom Page - Blog
     */
    ?>

    <?php get_header(); ?>
    <!-- START of WP Query -->
    <?php
    $post_per_page = 10;
    $paged = !empty(get_query_var('paged')) ? get_query_var('paged') : 1;
    $the_query = new WP_Query(array("post_type" => 'post', 'posts_per_page' => $post_per_page));
    $count = ( $paged * $post_per_page ) - ($post_per_page - 1);
    ?>

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

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

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

            <?php $count++; ?>

        <?php endwhile; ?>

        <?php
        $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' => $the_query->max_num_pages
        ));
        ?>

    <?php else : ?>
        <p><?php esc_html_e('Sorry, no posts matched your criteria.'); ?></p>
    <?php endif; ?>
    <!-- END of WP Query -->

    <?php get_footer(); ?>

Collectives™ on Stack Overflow

Custom Wordpress Loop not displaying when in Page Template

4 Answers 4

2 Comments

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related