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....
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.
