How to Add Pagination to Your Blog in WordPress

Adding pagination (or page breaks) to a WordPress blog is one of the essential steps to improving the user experience. It helps your site visitors navigate easily between posts or content sections. Instead of piling up all the posts on a single page, pagination provides them with a visual way to move from one page to another, reducing loading times and improving post order. In this comprehensive guide, we will explain how to add pagination to your blog in a simple manner, with detailed practical examples suited for beginners.

Step 1: Understanding the Pagination Mechanism in WordPress

Before starting with adding pagination, let’s look at the two main methods available in WordPress:

• Built-in Functions: WordPress offers built-in functions to help display pagination easily, such as the_posts_pagination() and paginate_links().
• Custom Functions: You can create your own custom functions and manually insert code to customize the appearance of the pagination.

We will explain both methods step by step, with practical examples inside the functions.php file or within the child theme.

Step 2: Using the Built-in Function the_posts_pagination()

This method is the simplest and relies on a ready-made function from WordPress to display pagination buttons on archive pages (such as the blog page, categories, or monthly archives). To ensure this function is enabled:

1. Open the archive file or page displaying the posts, usually index.php, archive.php, or home.php inside the theme folder.
2. Search for the loop displaying posts (The Loop), and at the end of it, you will find a function like the_posts_navigation() or posts_nav_link(). Replace it with:

 <?php the_posts_pagination( array( 'mid_size' => 2, 'prev_text' => '< Previous', 'next_text' => 'Next >', ) ); ?> 

Explanation of Parameters:

• mid_size: Specifies the number of page numbers shown on either side of the current page.
• prev_text / next_text: To customize the text or icons for the previous and next buttons.

After saving the file, go to your blog page to make sure the pagination links appear at the bottom.

Step 3: Customizing Pagination with paginate_links()

If you want more control over the design of the pagination or need it in a custom page, you can use the paginate_links() function. This method is commonly used with a custom WP_Query.

Suppose you are displaying posts on a custom-blog.php page as follows:

 <?php // Create a custom query to fetch the posts $paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1; $args = array( 'post_type' => 'post', 'posts_per_page' => 5, 'paged' => $paged, ); $my_query = new WP_Query($args); if( $my_query->have_posts() ): while( $my_query->have_posts() ): $my_query->the_post(); // Display post title and content the_title('<h2>','</h2>'); the_excerpt(); endwhile; // Add pagination $big = 999999999; // Random number to be replaced later $pagination_links = paginate_links( array( 'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ), 'format' => '?paged=%#%', 'current' => max( 1, get_query_var('paged') ), 'total' => $my_query->max_num_pages, 'prev_text' => '< Previous', 'next_text' => 'Next >', 'mid_size' => 2 ) ); if ( $pagination_links ) { echo '<div class="custom-pagination">' . $pagination_links . '</div>'; } else: echo 'No posts available.'; endif; // Reset the query wp_reset_postdata(); ?> 

Explanation of Parameters:

• base: Defines the basic structure of the link. We use str_replace() to replace the random number $big with the page number.
• format: Specifies the link format to accept the page number, here we use ?paged=%#%.
• current: Defines the current page number using get_query_var('paged').
• total: Defines the total number of pages, taken from $my_query->max_num_pages.
• prev_text / next_text: To customize the previous and next buttons.
• mid_size: Defines the number of page numbers shown beside the current page.

Step 4: Styling Pagination with CSS

It’s important to add a touch of elegance to your pagination buttons or page numbers to avoid them looking random. You can add the following code in the style.css file in the child theme or through Appearance > Customize > Additional CSS:

 .custom-pagination { text-align: center; margin: 20px 0; }

.custom-pagination .page-numbers {
display: inline-block;
margin: 0 5px;
padding: 8px 12px;
background: #f2f2f2;
color: #333;
text-decoration: none;
border-radius: 4px;
}

.custom-pagination .page-numbers:hover {
background: #e2e2e2;
}

.custom-pagination .current {
background: #0073aa;
color: #fff;
}

In this example:

• .custom-pagination: The class that wraps the pagination links.
• .page-numbers: The default class WordPress generates for the pagination links.
• .current: Applied to the current page button.

Step 5: Improving User Experience in Pagination

• Reduce the number of posts per page: By setting 'posts_per_page' => 5 (or any other value), you ensure that a large number of posts don’t accumulate on a single page.
• Use clear buttons or text: Make sure to clarify the “Next” and “Previous” buttons, or replace them with clear icons.
• Test on various devices: Ensure that the pagination appears properly on small screens and mobile devices, and adjust the code as needed (using Media Queries).

Step 6: Solutions for Common Pagination Problems

• Same links showing for all pages: Ensure the paged parameter is correctly set and passed to the query ($args), and also ensure that the base and format are correctly set in paginate_links().
• Links leading to 404 pages: Make sure to update the permalink structure from Settings > Permalinks and save the changes to avoid any errors with rewrite rules.
• Conflict with other plugins: If you’re using pagination plugins or page builder tools, conflicts may occur. Try disabling plugins temporarily to check for errors.

The Importance of Having a Professional Website with ITQAN

Your website’s excellence is not limited to pagination alone. There are many factors that make a WordPress site professional, such as responsive design, fast loading, security, and overall user experience. Customizing pagination is a step towards professionalism, but you might need a specialized team to handle all the technical and design details.

This is where Itqan comes in, offering extensive experience in designing and developing Arabic WordPress websites with modern standards. We help you with:

• Attractive and responsive design: We ensure your website looks great on all devices and screens.
• Fast and secure performance: We apply best practices to guarantee a smooth and reliable user experience.
• Continuous support and consultation: We accompany you on your digital journey, providing solutions to any obstacle you may encounter.

Contact Us Now!

If you want to improve or enhance your website in various areas, whether it’s pagination or other advanced features, contact Itqan today. Start your journey to a fully integrated and outstanding Arabic website by clicking the link below:

Contact ITQAN

Don’t miss out! Invest in your website quality and elevate your visitors’ experience to the next level. Our team at Itqan is waiting to offer you the consultation and services your digital project deserves.