Adding Custom Post Pagination in WordPress Plugin
Posted on 19th June 2023
Adding Custom Post Pagination in WordPress Plugin
As a WordPress developer, you may have come across a scenario where you need to add custom post pagination to a plugin. In this article, we will show you how to add custom post pagination in WordPress plugin.
WordPress comes with built-in post pagination feature. However, it is not very flexible and does not offer much customization options. If you need more control over post pagination in WordPress, then you will need to use a custom solution.
Adding custom post pagination in WordPress plugin is not very difficult. However, it does require you to write some code. In this article, we will show you how to add custom post pagination in WordPress plugin step by step.
Before we begin, you need to have a basic understanding of how WordPress queries posts from the database. WordPress uses SQL queries to fetch posts from the database. These SQL queries are generated by the WP_Query class.
The WP_Query class has several arguments that you can use to modify the SQL query. These arguments can be used to change the number of posts per page, offset, order, and many other things.
You can learn more about the WP_Query class by reading our article on how WordPress queries posts from the database.
Now that you know the basics, let’s take a look at how to add custom post pagination in WordPress plugin.
The first thing you need to do is to add the following code to your plugin file:
_x( ‘Books’, ‘post type general name’ ),
‘singular_name’ => _x( ‘Book’, ‘post type singular name’ ),
‘add_new’ => _x( ‘Add New’, ‘book’ ),
‘add_new_item’ => __( ‘Add New Book’ ),
‘edit_item’ => __( ‘Edit Book’ ),
‘new_item’ => __( ‘New Book’ ),
‘all_items’ => __( ‘All Books’ ),
‘view_item’ => __( ‘View Book’ ),
‘search_items’ => __( ‘Search Books’ ),
‘not_found’ => __( ‘No books found’ ),
‘not_found_in_trash’ => __( ‘No books found in the Trash’ ),
‘parent_item_colon’ => ”,
‘menu_name’ => ‘Books’
);
$args = array(
‘labels’ => $labels,
‘description’ => ‘Holds our books and book specific data’,
‘public’ => true,
‘menu_position’ => 5,
‘supports’ => array( ‘title’, ‘editor’, ‘thumbnail’, ‘excerpt’, ‘revisions’ ),
‘has_archive’ => true,
);
register_post_type( ‘book’, $args );
}
add_action( ‘init’, ‘wpbeginner_book_post_type’ );
This code creates a new custom post type “books”.
Now that you have created the custom post type, it’s time to add some custom fields to it. In this example, we will add two custom fields: “ISBN” and “Author”.
You can learn more about custom fields by reading our guide on how to add custom fields to a WordPress post.
Add the following code to your plugin file:
function wpbeginner_book_meta_boxes() {
add_meta_box( ‘wpbeginner_book_meta_box’,
‘Book Details’,
‘wpbeginner_book_meta_box_callback’,
‘book’,
‘normal’,
‘high’
);
}
add_action( ‘add_meta_boxes’, ‘wpbeginner_book_meta_boxes’ );
function wpbeginner_book_meta_box_callback( $post ) {
wp_nonce_field( ‘wpbeginner_book_meta_box’, ‘wpbeginner_book_meta_box_nonce’ );
$value = get_post_meta( $post->ID, ‘_wpbeginner_book_isbn’, true );
echo ‘
_e( ‘ISBN’, ‘wpbeginner_book’ );
echo ‘ ‘;
echo ”;
$value = get_post_meta( $post->ID, ‘_wpbeginner_book_author’, true );
echo ‘
_e( ‘Author’, ‘wpbeginner_book’ );
echo ‘ ‘;
echo ”;
}
function wpbeginner_book_meta_box_save( $post_id ) {
if ( ! isset( $_POST[‘wpbeginner_book_meta_box_nonce’] ) ) {
return;
}
if ( ! wp_verify_nonce( $_POST[‘wpbeginner_book_meta_box_nonce’], ‘wpbeginner_book_meta_box’ ) ) {
return;
}
if ( defined( ‘DOING_AUTOSAVE’ ) && DOING_AUTOSAVE ) {
return;
}
if ( ‘page’ == $_POST[‘post_type’] ) {
if ( ! current_user_can( ‘edit_page’, $post_id ) ) {
return;
}
} else {
if ( ! current_user_can( ‘edit_post’, $post_id ) ) {
return;
}
}
$isbn = sanitize_text_field( $_POST[‘wpbeginner_book_isbn’] );
update_post_meta( $post_id, ‘_wpbeginner_book_isbn’, $isbn );
$author = sanitize_text_field( $_POST[‘wpbeginner_book_author’] );
update_post_meta( $post_id, ‘_wpbeginner_book_author’, $author );
}
add_action( ‘save_post’, ‘wpbeginner_book_meta_box_save’ );
This code adds two custom fields to the custom post type “books”.
Now that you have added the custom fields, it’s time to add some posts to the custom post type “books”.
You can do that by going to your WordPress admin area and then clicking on Books ยป Add New.
Add a few posts to the custom post type “books”.
Now that you have added some posts, it’s time to add custom post pagination to your plugin.
The first thing you need to do is to modify the SQL query. You need to use the pre_get_posts hook to modify the SQL query.
Add the following code to your plugin file:
function wpbeginner_book_posts_per_page( $query ) {
if ( $query->is_main_query() && !is_admin() && is_post_type_archive( ‘book’ ) ) {
$query->set( ‘posts_per_page’, ‘4’ );
}
}
add_action( ‘pre_get_posts’, ‘wpbeginner_book_posts_per_page’ );
This code modifies the SQL query for the custom post
Pagination is a great way to keep things organized on your website. By adding custom post pagination to your WordPress plugin, you can easily break up your content into manageable chunks for your visitors.
Adding pagination to your plugin is simple. First, you need to add a few lines of code to your plugin’s main PHP file. In the code snippet below, we’ve added a function that will output our pagination links.
function my_plugin_pagination() {
global $wp_query;
$big = 999999999; // need an unlikely integer
echo paginate_links( array(
‘base’ => str_replace( $big, ‘%#%’, esc_url( get_pagenum_link( $big ) ) ),
‘format’ => ‘?paged=%#%’,
‘current’ => max( 1, get_query_var(‘paged’) ),
‘total’ => $wp_query->max_num_pages
) );
}
add_action( ‘my_plugin_output’, ‘my_plugin_pagination’ );
Once you’ve added this code, you can call the function my_plugin_pagination() anywhere in your plugin’s output. This will output a list of links that your visitors can use to navigate through your content.
If you want to style your pagination links, you can do so by adding some CSS to your plugin. In the code snippet below, we’ve added some basic CSS that will style our pagination links.
.pagination {
margin: 0;
padding: 0;
}
.pagination li {
display: inline;
}
.pagination a, .pagination span {
padding: 6px 12px;
margin-right: 2px;
border: 1px solid #ddd;
text-decoration: none;
color: #333;
}
.pagination a:hover, .pagination span:hover {
background: #eee;
}
.pagination .current {
background: #333;
color: #fff;
}
You can add this CSS to your plugin by creating a new file called my-plugin-pagination.css and adding it to your plugin’s directory. You can then include this CSS file in your plugin’s main PHP file using the WordPress function wp_enqueue_style().
function my_plugin_pagination_css() {
wp_enqueue_style( ‘my-plugin-pagination’, plugins_url( ‘my-plugin-pagination.css’, __FILE__ ) );
}
add_action( ‘wp_enqueue_scripts’, ‘my_plugin_pagination_css’ );
Now that you’ve added pagination to your plugin, you can easily split up your content into manageable chunks for your visitors.
