Using the_posts_pagination for custom page template WordPress

How to fix and create pagination with custom page template and keep main query with loop on WordPress blog?

If you look my sitemap, you’ll see the list of my post with pagination. That page was created under custom page template, the custom WP_Query of post’s list build under main loop of page, and function the_posts_pagination to display pagination.

Here the sample PHP code that you can accomplish if you need create custom page template with pagination. Just add after your main query loop.

// Define page_id
$page_ID = get_the_ID();

// Define paginated posts
$page    = get_query_var( 'page' );

// Define custom query parameters
$args    = array(
	'post_type'      => array( 'post', 'book', 'movie' ), // post types
	'posts_per_page' => 5,
	'paged'          => ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1
);

// If is_front_page "paged" parameters as $page number
if ( is_front_page() )
	$args['paged'] = $page;

// Instantiate custom query
$custom_query = new WP_Query( $args );

// Custom loop
if ( $custom_query->have_posts() ) :
    while ( $custom_query->have_posts() ) :
        $custom_query->the_post();
		
		/**
		 * Displaying content
		 *
		 * the_title(), the_permalink(), the_content() etc
		 * Or see Twentysixteen theme page.php
		 * get_template_part( 'template-parts/content', 'page' );
		 *
		 */
    endwhile;
	
		/**
		 * Pagination parameters of the_posts_pagination() since: 4.1.0
		 *
		 * @see the_posts_pagination
		 * https://codex.wordpress.org/Function_Reference/the_posts_pagination
		 * 
		 */
		$pagination_args = array(
			'prev_text'          => __( 'Previous page', 'theme-domain' ),
			'next_text'          => __( 'Next page', 'theme-domain' ),
			'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'theme-domain' ) . ' </span>'
		);
		
		/**
		 * Fix pagination link base
		 *
		 * If in paginated posts w/o multiple loop
		 *
		 */
		
		if ( ! is_front_page() && 0 < intval( $page ) )
			$pagination_args['base'] = user_trailingslashit(
				untrailingslashit( get_page_link( $page_ID ) ) . '/page/%#%'
			);
		/**
		 * Fix Pagination with $GLOBALS['wp_query'] = {custom_query}
		 *
		 * @see get_the_posts_pagination use $GLOBALS['wp_query']
		 * https://developer.wordpress.org/reference/functions/get_the_posts_pagination/#source-code
		 * 
		 */
		$GLOBALS['wp_query'] = $custom_query;
		the_posts_pagination( $pagination_args );
else :
	/**
	 * Empty Post
	 *
	 * Run your stuff here if posts empty
	 * Or see Twentysixteen theme page.php
	 * get_template_part( 'template-parts/content', 'none' );
	 */
endif;
wp_reset_query(); // Restore the $wp_query and global post data to the original main query.

We using get_page_link on paging arguments code instead of get_pagenum_link function, it just to making work with main loop if using post page ( wp_link_pages ~ <--nextpage--> ) for your content. I think there are better clean approach than this, but.. ah, let’s go ready to rumble.

UPDATE: April 08, 2016

  • Fix pagination if set in front page

Author: Jevuska

Rachmanuddin Chair Yahya a.k.a Jevuska is the founder of Jevuska.Com, a qualified web about offering medical articles, blogging, tips, and tutorial of WordPress. Having written for Jevuska since 2007.

5 thoughts on “Using the_posts_pagination for custom page template WordPress”

  1. om, masukan aja nih… blog ini kan pake dmca. saran ane untuk source biar ngga ribet ngetik ulang kasih link ke pastebin aja. biar yang mau praktek ngga ngetik ulang :D

  2. can you be specific awesome abang?
    main loop page its mean index.php or what?
    soory if my english is bad i am indonesian awesome abang :D

Leave a Reply

Your email address will not be published. Required fields are marked *

Use tag [php] to add code, e.g. [php]<?php echo $var; ?>[/php]