0

In Wordpress how do you get pagination to render on a custom page template?

https://developer.wordpress.org/themes/functionality/pagination/

Examples #Examples
Loop with Pagination #Loop with Pagination
This simplified example shows where you can add pagination functions for the main loop. Add the functions just before or after the loop.

<?php if ( have_posts() ) : ?>
 
    <!-- Add the pagination functions here. -->
 
    <!-- Start of the main loop. -->
    <?php while ( have_posts() ) : the_post(); ?>
 
    <!-- the rest of your theme's main loop -->
 
    <?php endwhile; ?>
    <!-- End of the main loop -->
 
    <!-- Add the pagination functions here. -->
 
 
<div class="nav-previous alignleft"><?php next_posts_link( 'Older posts' ); ?></div>
 
 
 
<div class="nav-next alignright"><?php previous_posts_link( 'Newer posts' ); ?></div>
 
 
<?php else : ?>
 
<?php _e('Sorry, no posts matched your criteria.'); ?>
 
<?php endif; ?>
Expand full source code

So here is my code block:

// this variable referenced represents 16
<?php $posts_to_display = 16; ?>

<section class="flo-section resources-blocks">
    <div class="grid-container">
        <div class="grid-x grid-margin-x align-center" id="container">
            <?php
            $args = array(
                'post_type' => $resourcesPostTypes,
                'post_status' => array('publish'),
                'orderby' => 'date',
                'order' => 'DESC',
                'post__not_in'   => array(15552, 15554, 15555),
                'posts_per_page' => $posts_to_display
            );

            $query = new WP_Query($args);
            $resourceCount = 0;

            if ($query->have_posts()) {
                while ($query->have_posts()) {
                    $query->the_post();
                    $resourceCount++;

                    $post_type = get_post_type();
                    $post_type_object = get_post_type_object($post_type);
                    if ($post_type_object) {
                        $post_type_display = esc_html($post_type_object->labels->singular_name);
                    }
                    ?>
                    <div class="cell small-12 medium-4 large-3">
                        <?php
                        $is_downloadable = get_field('is_downloadable');
                        $asset_redirect = get_field('asset_redirect');
                        if ($is_downloadable) {
                            $download_link = get_field('download_link');
                            $resource_url = $download_link['url'];
                        } else if ($asset_redirect) {
                            $resource_url = $asset_redirect;
                        } 
                        else {
                            $resource_url = get_permalink();
                        }
                        ?>
                        <a class="asset-block <?php echo ($post_type); ?>" href="<?php echo $resource_url; ?>">
                            <i class="icon-<?php echo $post_type; ?>"></i>
                            <p class="content-type"><?php echo ucfirst($post_type_display); ?></p>
                            <h4><?php echo wp_trim_words(get_the_title(), 20); ?></h4>
                        </a>
                    </div>
                    <?php
                }
            } else {
                // no posts found
            }

            wp_reset_postdata();
            ?>
        </div>
        <?php
        $args = array(
            'post_type' => $resourcesPostTypes,
            'orderby' => 'date',
            'order' => 'DESC',
            'posts_per_page' => -1,
            'post__not_in'   => array(15552, 15554, 15555)
        );

        $query = new WP_Query($args);
        if (!empty($query) && $query->post_count > $posts_to_display) {
            $display_load_more = "display:block;";
        } else {
            $display_load_more = "display:none;";
        }
        ?>
        <div style="color: red;"><?php echo $display_load_more; ?></div>
        <div class="text-center" id="load-more" style="<?php echo $display_load_more; ?>">
            // HERE IS THE PAGINATION
            <?php the_posts_pagination(); ?>
        </div>
        <input type="hidden" name="next_page" id="next_page" value="2" />
        <div class="hide" id="resources-loader">
            <img src="<?= get_template_directory_uri(); ?>/assets/images/ajax-loader.gif" />
        </div>
    </div>
</section>

I thought maybe it wasnt close enough to the loop like the documentation said so I brought it closer

<section class="flo-section resources-blocks">
    <div class="grid-container">
        <div class="grid-x grid-margin-x align-center" id="container">
            <?php
            $args = array(
                'post_type' => $resourcesPostTypes,
                'post_status' => array('publish'),
                'orderby' => 'date',
                'order' => 'DESC',
                'post__not_in'   => array(15552, 15554, 15555),
                'posts_per_page' => $posts_to_display
            );

            $query = new WP_Query($args);
            $resourceCount = 0;

            if ($query->have_posts()) {
                while ($query->have_posts()) {
                    $query->the_post();
                    $resourceCount++;

                    $post_type = get_post_type();
                    $post_type_object = get_post_type_object($post_type);
                    if ($post_type_object) {
                        $post_type_display = esc_html($post_type_object->labels->singular_name);
                    }
                    ?>
                    <div class="cell small-12 medium-4 large-3">
                        <?php
                        $is_downloadable = get_field('is_downloadable');
                        $asset_redirect = get_field('asset_redirect');
                        if ($is_downloadable) {
                            $download_link = get_field('download_link');
                            $resource_url = $download_link['url'];
                        } else if ($asset_redirect) {
                            $resource_url = $asset_redirect;
                        } 
                        else {
                            $resource_url = get_permalink();
                        }
                        ?>
                        <a class="asset-block <?php echo ($post_type); ?>" href="<?php echo $resource_url; ?>">
                            <i class="icon-<?php echo $post_type; ?>"></i>
                            <p class="content-type"><?php echo ucfirst($post_type_display); ?></p>
                            <h4><?php echo wp_trim_words(get_the_title(), 20); ?></h4>
                        </a>
                    </div>
                    <?php
                }
                // HELLOOOOO PAGINATION WHERE ARE YOU????
                the_posts_pagination();
            } else {
                // no posts found
            }

            wp_reset_postdata();
            ?>
        </div>
        <?php
        $args = array(
            'post_type' => $resourcesPostTypes,
            'orderby' => 'date',
            'order' => 'DESC',
            'posts_per_page' => -1,
            'post__not_in'   => array(15552, 15554, 15555)
        );

        $query = new WP_Query($args);
        if (!empty($query) && $query->post_count > $posts_to_display) {
            $display_load_more = "display:block;";
        } else {
            $display_load_more = "display:none;";
        }
        ?>
        <div style="color: red;"><?php echo $display_load_more; ?></div>
        <div class="text-center" id="load-more" style="<?php echo $display_load_more; ?>">
        </div>
        <input type="hidden" name="next_page" id="next_page" value="2" />
        <div class="hide" id="resources-loader">
            <img src="<?= get_template_directory_uri(); ?>/assets/images/ajax-loader.gif" />
        </div>
    </div>
</section>

And then I realized:

https://stackoverflow.com/questions/30066849/why-the-posts-pagination-function-not-working

the_posts_pagination only works in post listings pages like index.php or archive.php. It will not work in a custom template, for example.

See here : https://codex.wordpress.org/Function_Reference/the_posts_pagination

Okay, so let's try posts_nav_link()

https://developer.wordpress.org/reference/functions/posts_nav_link/

Displays the post pages link navigation for previous and next pages.

<section class="flo-section resources-blocks">
    <div class="grid-container">
        <div class="grid-x grid-margin-x align-center" id="container">
            <?php
            $args = array(
                'post_type' => $resourcesPostTypes,
                'post_status' => array('publish'),
                'orderby' => 'date',
                'order' => 'DESC',
                'post__not_in'   => array(15552, 15554, 15555),
                'posts_per_page' => $posts_to_display
            );

            $query = new WP_Query($args);
            $resourceCount = 0;

            if ($query->have_posts()) {
                while ($query->have_posts()) {
                    $query->the_post();
                    $resourceCount++;

                    $post_type = get_post_type();
                    $post_type_object = get_post_type_object($post_type);
                    if ($post_type_object) {
                        $post_type_display = esc_html($post_type_object->labels->singular_name);
                    }
                    ?>
                    <div class="cell small-12 medium-4 large-3">
                        <?php
                        $is_downloadable = get_field('is_downloadable');
                        $asset_redirect = get_field('asset_redirect');
                        if ($is_downloadable) {
                            $download_link = get_field('download_link');
                            $resource_url = $download_link['url'];
                        } else if ($asset_redirect) {
                            $resource_url = $asset_redirect;
                        } 
                        else {
                            $resource_url = get_permalink();
                        }
                        ?>
                        <a class="asset-block <?php echo ($post_type); ?>" href="<?php echo $resource_url; ?>">
                            <i class="icon-<?php echo $post_type; ?>"></i>
                            <p class="content-type"><?php echo ucfirst($post_type_display); ?></p>
                            <h4><?php echo wp_trim_words(get_the_title(), 20); ?></h4>
                        </a>
                    </div>
                    <?php
                }
            } else {
                // no posts found
            }

            wp_reset_postdata();
            ?>
        </div>
        <?php
        $args = array(
            'post_type' => $resourcesPostTypes,
            'orderby' => 'date',
            'order' => 'DESC',
            'posts_per_page' => -1,
            'post__not_in'   => array(15552, 15554, 15555)
        );

        $query = new WP_Query($args);
        if (!empty($query) && $query->post_count > $posts_to_display) {
            $display_load_more = "display:block;";
        } else {
            $display_load_more = "display:none;";
        }
        ?>
        <div style="color: red;"><?php echo $display_load_more; ?></div>
        <div class="text-center" id="load-more" style="<?php echo $display_load_more; ?>">
            <?php posts_nav_link(); ?>
        </div>
        <input type="hidden" name="next_page" id="next_page" value="2" />
        <div class="hide" id="resources-loader">
            <img src="<?= get_template_directory_uri(); ?>/assets/images/ajax-loader.gif" />
        </div>
    </div>
</section>

Still nothing....

enter image description here

How do you get Wordpress to render pagination on a custom page?

MORE EDITS:

https://stackoverflow.com/questions/42480019/showing-prev-next-post-links-doesnt-work

In Layman language it is a wordpress function to fetch posts/custom-posts. Internally it calls WP_Query function. Or you can use WP_Query instead of this. 'posts_nav_link' function does not work with WP_Query & get_posts function. You can try this to get next previous links.

Got it, ok, how do we paginate with WP_Query? Let's see

https://developer.wordpress.org/reference/functions/paginate_links/

Looking promising, can we work it with WP_Query() ?

Pagination when using wp_query?

WordPress comes with a handy function called paginate_links() which does the heavy lifting. In the example above, the custom WP_Query object $query is used instead of the global $wp_query object.

Looking good ok lets try it:

<section class="flo-section resources-blocks">
    <div class="grid-container">
        <div class="grid-x grid-margin-x align-center" id="container">
            <?php
            $args = array(
                'post_type' => $resourcesPostTypes,
                'post_status' => array('publish'),
                'orderby' => 'date',
                'order' => 'DESC',
                'post__not_in'   => array(15552, 15554, 15555),
                'posts_per_page' => $posts_to_display
            );

            $query = new WP_Query($args);
            $resourceCount = 0;

            if ($query->have_posts()) {
                while ($query->have_posts()) {
                    $query->the_post();
                    $resourceCount++;

                    $post_type = get_post_type();
                    $post_type_object = get_post_type_object($post_type);
                    if ($post_type_object) {
                        $post_type_display = esc_html($post_type_object->labels->singular_name);
                    }
                    ?>
                    <div class="cell small-12 medium-4 large-3">
                        <?php
                        $is_downloadable = get_field('is_downloadable');
                        $asset_redirect = get_field('asset_redirect');
                        if ($is_downloadable) {
                            $download_link = get_field('download_link');
                            $resource_url = $download_link['url'];
                        } else if ($asset_redirect) {
                            $resource_url = $asset_redirect;
                        } 
                        else {
                            $resource_url = get_permalink();
                        }
                        ?>
                        <a class="asset-block <?php echo ($post_type); ?>" href="<?php echo $resource_url; ?>">
                            <i class="icon-<?php echo $post_type; ?>"></i>
                            <p class="content-type"><?php echo ucfirst($post_type_display); ?></p>
                            <h4><?php echo wp_trim_words(get_the_title(), 20); ?></h4>
                        </a>
                    </div>
                    <?php
                }
                paginate_links();
            } else {
                // no posts found
            }

            wp_reset_postdata();
            ?>
        </div>
        <?php
        $args = array(
            'post_type' => $resourcesPostTypes,
            'orderby' => 'date',
            'order' => 'DESC',
            'posts_per_page' => -1,
            'post__not_in'   => array(15552, 15554, 15555)
        );

        $query = new WP_Query($args);
        if (!empty($query) && $query->post_count > $posts_to_display) {
            $display_load_more = "display:block;";
        } else {
            $display_load_more = "display:none;";
        }
        ?>
        <div style="color: red;"><?php echo $display_load_more; ?></div>
        <div class="text-center" id="load-more" style="<?php echo $display_load_more; ?>">
            <?php paginate_links(); ?>
        </div>
        <input type="hidden" name="next_page" id="next_page" value="2" />
        <div class="hide" id="resources-loader">
            <img src="<?= get_template_directory_uri(); ?>/assets/images/ajax-loader.gif" />
        </div>
    </div>
</section>

Still nothing.

11
  • 1
    My understanding is that none of your code examples that contain the problem have a standard loop, you've instead used a custom loop and ignored the main query. The pagination functions all work with the pagination of the main loop, not your custom secondary loops built with new WP_Query. If you want to modify the content pulled in to the post query/loop, you should have used pre_get_posts instead of discarding it and creating a brand new additional query. Also one of your examples has unlimited posts per page ( -1 ) so it could never have a second page.
    – Tom J Nowell
    Oct 27, 2021 at 16:46
  • Also your code blocks formatting is broken, can you edit your question to fix the code blocks so that the code is code and the non-code is not code? Use 3 backticks to do this rather than indentation as it's easier
    – Tom J Nowell
    Oct 27, 2021 at 16:47
  • wordpress.stackexchange.com/questions/84429/… Hmmmm. i dont understand, isn't $query->have_posts() a main loop? can you explain hiw mine is custom?
    – kawnah
    Oct 27, 2021 at 17:57
  • no, there is only one main loop, accessed via the_post/have_posts(). What you have is a custom loop from a custom query object. Why would the pagination functions know about your $query variable? Computers are extremely literal, functions won't infer that you meant it to use that one not the other one, and your new WP_Query does not replace the main query, it's still there being unused. WP still went and fetched all the posts for the main query, the template just ignores them and makes an extra query.
    – Tom J Nowell
    Oct 27, 2021 at 18:49
  • the main query is the primary query that WP creates aka the global $wp_query the quote refers to, the one that loaded your page based on data from the URL, that allowed your page template to be shown in the first place. Even if you plug your custom query object into the pagination functions by overriding the total and current page, you'll still get a 404 if you access page 5 but the main query only has 4 pages, and you've still doubled the number of queries on your page.
    – Tom J Nowell
    Oct 27, 2021 at 18:52

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.