wp query - wordpress pagination wont render on custom page template even though its right under the loop like the documentation

admin管理员组

文章数量:1287597

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

/

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:

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 :

Okay, so let's try 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....

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

MORE EDITS:

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

/

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.

本文标签：