How to Implement Pagination for Your Custom Post Type Archive Page in WordPress
As a WordPress developer, you may often find yourself working with custom post types to create unique content experiences for your website. When it comes to displaying these custom post type archives, one important feature to consider is pagination. Pagination allows your users to easily navigate through your content, making the overall experience more user-friendly.
In this article, we'll dive into the code you can use to implement pagination for your custom post type archive pages in WordPress. We'll go step-by-step through the process, ensuring you have a clear understanding of how to apply this functionality to your own projects.
Understanding the Code
Let's start by breaking down the code you provided:
<?php get_header(); ?>
<h2 class="ptm pbm mbl text-right red-bg"><span>سریال</span></h2>
<div class="container">
<?php
$terms = get_queried_object();
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
$posts = get_posts(array(
'post_type' => 'series',
'posts_per_page' => 20,
'paged' =>$paged,
'category' => $terms->term_id,
'meta_query' => array(
array(
'key' => 'is_season',
'compare' => '==',
'value' => '0'
)
)
));
if( $posts ): ?>
<ul>
<?php foreach( $posts as $post ):
setup_postdata( $post )
?>
<!--HTML goes here-->
<?php endforeach; ?>
</ul>
<div class="pagination">
<?php
the_posts_pagination( array(
'mid_size' => 2,
'prev_text' => 'Previous',
'next_text' => 'Next',
) );
?>
</div>
<?php else : ?>
<p>
<?php _e( 'Sorry, no posts matched your criteria.' ); ?>
</p>
<?php endif; ?>
?>
</div>
<?php get_footer(); ?>
The key parts of this code are:
- Retrieving the current page: The
$paged
variable is set to the current page number, using the get_query_var('paged')
function.
- Querying the posts: The
get_posts()
function is used to retrieve the posts for the current page, with the 'paged'
parameter set to the $paged
value.
- Displaying the posts: The retrieved posts are then displayed in an unordered list (
<ul>
).
- Implementing pagination: The
the_posts_pagination()
function is used to generate the pagination links at the bottom of the page.
Now, let's go through the step-by-step process of implementing this functionality.
Step 1: Set up the Custom Post Type
First, you'll need to set up your custom post type. In this example, the custom post type is called "series". You can do this by adding the following code to your theme's functions.php
file or in a custom plugin:
function create_series_post_type() {
$labels = array(
'name' => _x( 'Series', 'Post Type General Name', 'text_domain' ),
'singular_name' => _x( 'Series', 'Post Type Singular Name', 'text_domain' ),
'menu_name' => __( 'Series', 'text_domain' ),
'name_admin_bar' => __( 'Series', 'text_domain' ),
'archives' => __( 'Series Archives', 'text_domain' ),
'parent_item_colon' => __( 'Parent Series:', 'text_domain' ),
'all_items' => __( 'All Series', 'text_domain' ),
'add_new_item' => __( 'Add New Series', 'text_domain' ),
'add_new' => __( 'Add New', 'text_domain' ),
'new_item' => __( 'New Series', 'text_domain' ),
'edit_item' => __( 'Edit Series', 'text_domain' ),
'update_item' => __( 'Update Series', 'text_domain' ),
'view_item' => __( 'View Series', 'text_domain' ),
'search_items' => __( 'Search Series', 'text_domain' ),
'not_found' => __( 'Not found', 'text_domain' ),
'not_found_in_trash' => __( 'Not found in Trash', 'text_domain' ),
);
$args = array(
'label' => __( 'Series', 'text_domain' ),
'description' => __( 'Series Post Type', 'text_domain' ),
'labels' => $labels,
'supports' => array( 'title', 'editor', 'excerpt', 'author', 'thumbnail', 'comments', 'trackbacks', 'revisions', 'custom-fields', ),
'taxonomies' => array( 'category', 'post_tag' ),
'hierarchical' => false,
'public' => true,
'show_ui' => true,
'show_in_menu' => true,
'menu_position' => 5,
'show_in_admin_bar' => true,
'show_in_nav_menus' => true,
'can_export' => true,
'has_archive' => true,
'exclude_from_search' => false,
'publicly_queryable' => true,
'capability_type' => 'post',
);
register_post_type( 'series', $args );
}
add_action( 'init', 'create_series_post_type', 0 );
This code registers a custom post type called "series" with various labels and settings.
Step 2: Implement Pagination in the Archive Template
Now, let's dive into the code you provided. This code is typically used in a custom archive template file, such as archive-series.php
, to display the custom post type archive.
-
Retrieve the current page: The $paged
variable is set to the current page number using get_query_var('paged')
. If no page is specified, it defaults to 1.
-
Query the posts: The get_posts()
function is used to retrieve the posts for the current page. The 'post_type'
parameter is set to the custom post type, in this case, "series". The 'posts_per_page'
parameter specifies the number of posts to display per page (in this example, 20). The 'paged'
parameter is set to the $paged
variable to retrieve the correct set of posts for the current page.
-
Display the posts: The retrieved posts are then displayed in an unordered list (<ul>
). The setup_postdata()
function is used to properly set up the post data for each post.
-
Implement pagination: The the_posts_pagination()
function is used to generate the pagination links at the bottom of the page. The 'mid_size'
parameter specifies the number of page links to display around the current page (in this example, 2). The 'prev_text'
and 'next_text'
parameters are used to customize the text for the previous and next page links.
Step 3: Modify the Query in functions.php
(Optional)
In the provided code, there's an additional snippet that modifies the query for the custom post type archive:
add_action( 'pre_get_posts' ,'wpse222471_query_post_type_portofolio', 1, 1 );
function wpse222471_query_post_type_portofolio( $query )
{
if ( ! is_admin() && is_post_type_archive( 'customposttype' ) && $query->is_main_query() )
{
$query->set( 'posts_per_page', 6 ); //set query arg ( key, value )
}
}
This code sets the number of posts per page to 6 for the custom post type archive page, overriding the value set in the get_posts()
function. You can customize this to suit your specific needs.
Conclusion
By following the steps outlined in this article, you can easily implement pagination for your custom post type archive page in WordPress. This will provide a better user experience for your website visitors, allowing them to navigate through your content with ease.
Remember, the provided code is just an example, and you may need to adjust it to fit your specific requirements and custom post type setup. Feel free to experiment and tweak the code to achieve the desired result for your project.
If you're looking for a comprehensive solution to optimize your website's conversion rates, consider exploring Flowpoint.ai. Flowpoint is a web analytics platform that uses AI to identify technical issues, UX/UI problems, and content opportunities to boost your website's performance.
Get a Free AI Website Audit
Automatically identify UX and content issues affecting your conversion rates with Flowpoint's comprehensive AI-driven website audit.