Pagination with custom queries in Wordpress - Mini Project: Build & Apply

Pagination with custom queries

📖 Scenario: You are building a WordPress blog page that shows posts in small groups with navigation links to see more posts. This helps visitors browse your content easily without loading all posts at once.

🎯 Goal: Create a custom WordPress query to fetch posts with pagination. You will set up the query, configure how many posts show per page, loop through the posts to display them, and add pagination links to navigate between pages.

📋 What You'll Learn

Create a custom query using WP_Query to fetch posts

Set a variable $posts_per_page to control how many posts appear on each page

Use a while loop with have_posts() and the_post() to display post titles

Add pagination links using paginate_links() to navigate pages

💡 Why This Matters

🌍 Real World

Pagination is essential for blogs and content-heavy websites to improve user experience by loading content in smaller chunks and providing navigation controls.

💼 Career

Understanding custom queries and pagination in WordPress is a common task for WordPress developers and content managers to create efficient and user-friendly websites.

1

Create the custom query

Create a variable called $paged that gets the current page number from the URL using get_query_var('paged'). Then create a $args array with keys 'post_type' set to 'post' and 'paged' set to $paged. Finally, create a new WP_Query object called $custom_query using $args.

Wordpress

# Your code here

Need a hint?

Use get_query_var('paged') to get the current page number. If it is empty, set $paged to 1.

Create $args with 'post_type' => 'post' and 'paged' => $paged.

Then create $custom_query = new WP_Query($args);

2

Set posts per page

Add a variable called $posts_per_page and set it to 3. Then add this to the $args array with the key 'posts_per_page' so the query fetches 3 posts per page.

Wordpress

$paged = get_query_var('paged') ? get_query_var('paged') : 1;
$args = [
    'post_type' => 'post',
    'paged' => $paged
];
$posts_per_page = 3;
// Add posts_per_page to $args
// Your code here

Need a hint?

Define $posts_per_page = 3; before $args. Then add 'posts_per_page' => $posts_per_page inside the $args array.

3

Loop through posts and display titles

Use a while loop with $custom_query->have_posts() and inside the loop call $custom_query->the_post(). Inside the loop, display each post's title inside an <h2> tag using get_the_title().

Wordpress

$paged = get_query_var('paged') ? get_query_var('paged') : 1;
$posts_per_page = 3;
$args = [
    'post_type' => 'post',
    'paged' => $paged,
    'posts_per_page' => $posts_per_page
];
$custom_query = new WP_Query($args);

// Loop through posts and display titles
// Your code here

Need a hint?

Use while ($custom_query->have_posts()) to loop. Inside, call $custom_query->the_post(). Then echo the title inside <h2> tags using get_the_title().

4

Add pagination links

After the loop, add pagination links using paginate_links(). Pass an array with 'total' set to $custom_query->max_num_pages and 'current' set to $paged. Wrap the links inside a <nav> element with aria-label="Posts Pagination" for accessibility.

Wordpress

$paged = get_query_var('paged') ? get_query_var('paged') : 1;
$posts_per_page = 3;
$args = [
    'post_type' => 'post',
    'paged' => $paged,
    'posts_per_page' => $posts_per_page
];
$custom_query = new WP_Query($args);

while ($custom_query->have_posts()) {
    $custom_query->the_post();
    echo '' . get_the_title() . '';
}

// Add pagination links inside a nav with aria-label
// Your code here

Need a hint?

Use paginate_links() with 'total' => $custom_query->max_num_pages and 'current' => $paged. Wrap it in a <nav> with aria-label="Posts Pagination". Call wp_reset_postdata() after to restore global post data.