In WordPress how do you get pagination to render on a {custom} web page template?
https://developer.wordpress.org/themes/performance/pagination/
Examples #Examples
Loop with Pagination #Loop with Pagination
This simplified instance exhibits the place you'll be able to add pagination features for the primary loop. Add the features simply earlier than or after the loop.
<?php if ( have_posts() ) : ?>
<!-- Add the pagination features right here. -->
<!-- Begin of the primary loop. -->
<?php whereas ( have_posts() ) : the_post(); ?>
<!-- the remainder of your theme's predominant loop -->
<?php endwhile; ?>
<!-- Finish of the primary loop -->
<!-- Add the pagination features right 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 standards.'); ?>
<?php endif; ?>
Develop full supply code
So right here is my code block:
// this variable referenced represents 16
<?php $posts_to_display = 16; ?>
<part 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
);
$question = new WP_Query($args);
$resourceCount = 0;
if ($query->have_posts()) {
whereas ($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 category="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 discovered
}
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)
);
$question = new WP_Query($args);
if (!empty($question) && $query->post_count > $posts_to_display) {
$display_load_more = "display:block;";
} else {
$display_load_more = "display:none;";
}
?>
<div fashion="color: red;"><?php echo $display_load_more; ?></div>
<div class="text-center" id="load-more" fashion="<?php echo $display_load_more; ?>">
// HERE IS THE PAGINATION
<?php the_posts_pagination(); ?>
</div>
<enter kind="hidden" title="next_page" id="next_page" worth="2" />
<div class="hide" id="resources-loader">
<img src="<?= get_template_directory_uri(); ?>/assets/images/ajax-loader.gif" />
</div>
</div>
</part>
I believed possibly it wasnt shut sufficient to the loop just like the documentation mentioned so I introduced it nearer
<part 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
);
$question = new WP_Query($args);
$resourceCount = 0;
if ($query->have_posts()) {
whereas ($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 category="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 discovered
}
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)
);
$question = new WP_Query($args);
if (!empty($question) && $query->post_count > $posts_to_display) {
$display_load_more = "display:block;";
} else {
$display_load_more = "display:none;";
}
?>
<div fashion="color: red;"><?php echo $display_load_more; ?></div>
<div class="text-center" id="load-more" fashion="<?php echo $display_load_more; ?>">
</div>
<enter kind="hidden" title="next_page" id="next_page" worth="2" />
<div class="hide" id="resources-loader">
<img src="<?= get_template_directory_uri(); ?>/assets/images/ajax-loader.gif" />
</div>
</div>
</part>
After which I spotted:
https://stackoverflow.com/questions/30066849/why-the-posts-pagination-function-not-working
the_posts_pagination solely works in submit listings pages like index.php
or archive.php. It is not going to work in a {custom} template, for instance.See right here :
https://codex.wordpress.org/Function_Reference/the_posts_pagination
Okay, so let’s strive posts_nav_link()
https://developer.wordpress.org/reference/features/posts_nav_link/
Shows the submit pages hyperlink navigation for earlier and subsequent pages.
<part 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
);
$question = new WP_Query($args);
$resourceCount = 0;
if ($query->have_posts()) {
whereas ($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 category="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 discovered
}
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)
);
$question = new WP_Query($args);
if (!empty($question) && $query->post_count > $posts_to_display) {
$display_load_more = "display:block;";
} else {
$display_load_more = "display:none;";
}
?>
<div fashion="color: red;"><?php echo $display_load_more; ?></div>
<div class="text-center" id="load-more" fashion="<?php echo $display_load_more; ?>">
<?php posts_nav_link(); ?>
</div>
<enter kind="hidden" title="next_page" id="next_page" worth="2" />
<div class="hide" id="resources-loader">
<img src="<?= get_template_directory_uri(); ?>/assets/images/ajax-loader.gif" />
</div>
</div>
</part>
Nonetheless nothing….
How do you get WordPress to render pagination on a {custom} web page?
MORE EDITS:
https://stackoverflow.com/questions/42480019/showing-prev-next-post-links-doesnt-work
In Layman language it’s a wordpress operate to fetch
posts/custom-posts. Internally it calls WP_Query operate. Or you’ll be able to
use WP_Query as an alternative of this. ‘posts_nav_link’ operate doesn’t work
with WP_Query & get_posts operate. You possibly can do that to get subsequent
earlier hyperlinks.
Received it, okay, how will we paginate with WP_Query? Let’s examine
https://developer.wordpress.org/reference/features/paginate_links/
Wanting promising, can we work it with WP_Query() ?
Pagination when utilizing wp_query?
WordPress comes with a helpful operate known as paginate_links() which
does the heavy lifting. Within the instance above, the {custom} WP_Query
object $question is used as an alternative of the worldwide $wp_query object.
Wanting good okay lets strive it:
<part 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
);
$question = new WP_Query($args);
$resourceCount = 0;
if ($query->have_posts()) {
whereas ($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 category="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 discovered
}
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)
);
$question = new WP_Query($args);
if (!empty($question) && $query->post_count > $posts_to_display) {
$display_load_more = "display:block;";
} else {
$display_load_more = "display:none;";
}
?>
<div fashion="color: red;"><?php echo $display_load_more; ?></div>
<div class="text-center" id="load-more" fashion="<?php echo $display_load_more; ?>">
<?php paginate_links(); ?>
</div>
<enter kind="hidden" title="next_page" id="next_page" worth="2" />
<div class="hide" id="resources-loader">
<img src="<?= get_template_directory_uri(); ?>/assets/images/ajax-loader.gif" />
</div>
</div>
</part>
Nonetheless nothing.