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

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

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

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

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.

Practice

1. What is the main purpose of using the paged parameter in a custom WordPress query?

easy

A. To order posts by date

B. To filter posts by category

C. To specify which page of posts to display for pagination

D. To limit the number of posts shown on the homepage

Solution

1. Step 1: Understand the role of paged in queries

   The paged parameter tells WordPress which page number of posts to fetch, enabling pagination.

2. Step 2: Differentiate from other query parameters

   Other parameters like category or order control filtering and sorting, not pagination.

3. Final Answer:

   To specify which page of posts to display for pagination -> Option C

4. Quick Check:

   paged controls page number in pagination [OK]

Hint: Remember: paged means page number for posts [OK]

Common Mistakes:

• Confusing paged with category filters
• Using paged to limit posts per page
• Ignoring the need to reset post data after custom queries

2. Which of the following is the correct way to include the paged parameter in a custom WP_Query to enable pagination?

easy

A. "page" => 1

B. "paged" => get_query_var('paged') ? get_query_var('paged') : 1

C. "paged" => 0

D. "pagination" => true

Solution

1. Step 1: Identify correct syntax for paged

   The correct way is to get the current page number using get_query_var('paged'), defaulting to 1 if not set.

2. Step 2: Check other options for correctness

   Options A, C, and D use wrong keys or values that won't work for pagination.

3. Final Answer:

   "paged" => get_query_var('paged') ? get_query_var('paged') : 1 -> Option B

4. Quick Check:

   Use paged with get_query_var for pagination [OK]

Hint: Use get_query_var('paged') or default to 1 [OK]

Common Mistakes:

• Using page instead of paged
• Setting paged to 0 disables pagination
• Using non-existent pagination parameter

3. Given this code snippet, what will be the output if the current page is 3?

$paged = get_query_var('paged') ? get_query_var('paged') : 1;
$args = [
  'post_type' => 'post',
  'posts_per_page' => 5,
  'paged' => $paged
];
$query = new WP_Query($args);
echo $query->query_vars['paged'];

medium

A. 1

B. 5

C. 0

D. 3

Solution

1. Step 1: Understand get_query_var('paged') behavior

   If the current page is 3, get_query_var('paged') returns 3, so $paged is 3.

2. Step 2: Check what is echoed

   The code echoes $query->query_vars['paged'], which is set to 3.

3. Final Answer:

   3 -> Option D

4. Quick Check:

   Current page number echoed = 3 [OK]

Hint: Echo query_vars['paged'] to see current page [OK]

Common Mistakes:

• Assuming default page 1 always prints
• Confusing posts per page with page number
• Expecting total posts count instead of page number

4. Identify the error in this pagination code snippet:

$paged = get_query_var('paged');
$args = [
  'post_type' => 'post',
  'posts_per_page' => 10,
  'paged' => $paged
];
$query = new WP_Query($args);
// Loop here
wp_reset_query();

medium

A. Missing default value for $paged, may cause page 0

B. Using wp_reset_query() instead of wp_reset_postdata()

C. Incorrect post type specified

D. Posts per page should be set to 5 for pagination

Solution

1. Step 1: Check $paged initialization

   $paged is set directly from get_query_var('paged') without defaulting to 1, so if no page is set, it may be 0 or empty.

2. Step 2: Evaluate other parts

   While wp_reset_postdata() is preferred after custom queries, the main error affecting pagination is missing default for $paged.

3. Final Answer:

   Missing default value for $paged, may cause page 0 -> Option A

4. Quick Check:

   Always default $paged to 1 if empty [OK]

Hint: Always default $paged to 1 to avoid page 0 [OK]

Common Mistakes:

• Not setting default page number
• Confusing wp_reset_query() with wp_reset_postdata()
• Assuming posts per page must be 5

5. You want to create a paginated list of 'product' posts showing 8 per page. Which code snippet correctly sets up the custom query and pagination, including resetting post data?

hard

A. $paged = get_query_var('paged') ?: 1;
$args = [
'post_type' => 'product',
'posts_per_page' => 8,
'paged' => $paged
];
$query = new WP_Query($args);
if ($query->have_posts()) {
while ($query->have_posts()) {
$query->the_post();
the_title();
}
}
wp_reset_postdata();

B. $paged = 1;
$args = [
'post_type' => 'product',
'posts_per_page' => 8
];
$query = new WP_Query($args);
while ($query->have_posts()) {
$query->the_post();
the_title();
}
wp_reset_query();

C. $paged = get_query_var('page') ?: 1;
$args = [
'post_type' => 'product',
'posts_per_page' => 8,
'paged' => $paged
];
$query = new WP_Query($args);
while ($query->have_posts()) {
$query->the_post();
the_title();
}
wp_reset_postdata();

D. $paged = get_query_var('paged') ?: 1;
$args = [
'post_type' => 'product',
'posts_per_page' => 8,
'page' => $paged
];
$query = new WP_Query($args);
if ($query->have_posts()) {
while ($query->have_posts()) {
$query->the_post();
the_title();
}
}
wp_reset_postdata();

Solution

1. Step 1: Correctly get current page number

   Use get_query_var('paged') ?: 1 to get current page or default to 1.

2. Step 2: Set query args and reset post data

   Use 'paged' => $paged (not 'page'), and call wp_reset_postdata() after the loop.

3. Step 3: Verify loop structure

   Check that the loop uses have_posts() and the_post() correctly.

4. Final Answer:

   Code snippet D correctly sets up pagination and resets post data -> Option A

5. Quick Check:

   Use paged param and wp_reset_postdata() [OK]

Hint: Use paged param and reset post data after loop [OK]

Common Mistakes:

• Using 'page' instead of 'paged' in query args
• Not resetting post data after custom query
• Hardcoding page number to 1 disables pagination