Mastering Pagination: How to Use the 'Use function' on the WordPress Homepage
As a WordPress developer, you may have encountered the need to display a specific number of posts on the homepage while maintaining a smooth pagination experience for your users. The 'use function' can be a powerful tool to achieve this, but it requires a thorough understanding of how it works. In this article, we'll dive into the details of using the 'use function' on the WordPress homepage and explore the importance of the ceil()
function for pagination.
Introducing the 'use function'
The 'use function' is a WordPress action that allows you to modify the main query on your website. In the context of the homepage, this function can be used to set the number of posts to be displayed per page, as well as manage the pagination.
The code snippet you provided demonstrates the implementation of the 'use function' on the WordPress homepage:
add_action( 'pre_get_posts', 'sk_query_offset', 3 );
function sk_query_offset( &$query ) {
$offset = 3;
$ppp = get_option( 'posts_per_page' );
if ( $query->is_home() && $query->is_main_query() && ! $query->is_paged ) {
$query->set( 'posts_per_page', $offset );
return;
}
if ( $query->is_home() && $query->is_main_query() && $query->is_paged ) {
if( $query->query_vars['paged'] == 2 ) {
$page_offset = $offset;
}
else {
$page_offset = $offset + ( ( $query->query_vars['paged'] - 2 ) * $ppp );
}
$query->set( 'offset', $page_offset );
}
}
add_filter( 'found_posts', 'sk_adjust_offset_pagination', 1, 2 );
function sk_adjust_offset_pagination( $found_posts, $query ) {
$ppp = get_option( 'posts_per_page' );
$offset_ppp = $query->query_vars['posts_per_page'];
if ( $query->is_home() && $query->is_main_query() && ! $query->is_paged ) {
$max_pages = ceil( $found_posts / $ppp );
return ( $offset_ppp * $max_pages );
}
return $found_posts;
}
Let's break down the key components of this code:
-
sk_query_offset
function: This function is hooked to the pre_get_posts
action, which allows us to modify the main query on the homepage. It sets the number of posts to be displayed on the first page (3 in this case) and adjusts the offset for the subsequent pages.
-
sk_adjust_offset_pagination
function: This function is hooked to the found_posts
filter, which allows us to adjust the total number of posts found for the pagination to work correctly. The ceil()
function is used here to ensure that the total number of pages is always rounded up to the nearest integer.
Understanding the Functionality
The provided code achieves the following:
-
Homepage (first page): On the homepage, where $query->is_home()
and $query->is_paged
are false, the code sets the posts_per_page
parameter to the $offset
value (3 in this case). This ensures that only the first 3 posts are displayed on the homepage.
-
Subsequent pages: When the user navigates to the next page (i.e., $query->is_paged
is true), the code calculates the appropriate offset
value based on the current page number and the global posts_per_page
setting. This ensures that the correct set of posts is displayed for each pagination page.
-
Pagination adjustment: The sk_adjust_offset_pagination
function is responsible for adjusting the total number of posts found to ensure that the pagination works correctly. It uses the ceil()
function to round up the total number of pages, which is crucial when the number of posts is not evenly divisible by the posts_per_page
setting.
By using this approach, you can effectively display a specific number of posts on the homepage (in this case, 3) and then show the remaining posts with the default posts_per_page
setting for the subsequent pagination pages.
Applying the 'use function' to Static Pages
If you want to use the 'use function' approach with a static homepage (instead of the latest posts), the process becomes more involved. The code you provided is specifically designed to work with a homepage that displays the latest posts.
To make the 'use function' work with a static homepage, you would need to modify the conditional checks in the sk_query_offset
function to check for the specific page ID or template being used for the homepage. Additionally, you may need to adjust the pagination logic to handle the different scenario of a static homepage.
The documentation in the code snippet you provided suggests that this scenario is "a lot more involved" and refers to a separate post that covers the necessary steps. It's important to thoroughly understand the specific requirements of your website's setup before attempting to implement the 'use function' with a static homepage.
Conclusion
The 'use function' is a powerful tool in WordPress that allows you to customize the main query on your website, particularly on the homepage. By implementing the code snippet you provided, you can display a specific number of posts on the homepage and then maintain a smooth pagination experience for the remaining posts.
The key takeaways from this article are:
- The 'use function' can be used to set the
posts_per_page
parameter on the homepage, as well as manage the pagination offset.
- The
ceil()
function is crucial for ensuring the correct pagination calculations, especially when the number of posts is not evenly divisible by the posts_per_page
setting.
- Applying the 'use function' to a static homepage requires additional considerations and modifications to the code.
If you're looking to optimize your WordPress website's homepage and pagination, the techniques discussed in this article can be a valuable addition to your development toolkit. Remember to thoroughly test your implementation to ensure it meets the specific requirements of your website.
Flowpoint.ai can help you identify any technical errors that may be impacting the conversion rates on your WordPress website and provide AI-generated recommendations to fix them, ensuring a seamless user experience for your visitors
Get a Free AI Website Audit
Automatically identify UX and content issues affecting your conversion rates with Flowpoint's comprehensive AI-driven website audit.