Flood

Creating Custom Pagination in WordPress

21 December, 2010

Pagination is an essential component for modern websites, especially when dealing with a large amount of content. It improves user experience by breaking content into manageable chunks and reduces server load. While WordPress comes with built-in pagination, it’s often considered basic. In this guide, we’ll create a more functional and styled pagination without relying on plugins.

Step 1: Create a Custom Pagination File

Let’s create a file called navi.php and place it in your theme directory. This file will contain the custom pagination code.

<?php
global $wp_query;
$max_page = $wp_query->max_num_pages;
$nump = 10; // Number of pages to show on either side of the current page
if ($max_page > 1) {
    $paged = intval(get_query_var('paged'));
    if (empty($paged) || $paged == 0) $paged = 1;
    echo '<div id="navi">';
    echo '[' . $paged . ' of ' . $max_page . ']';

    // Link to the first page
    if ($paged != 1)
        echo '<a href="' . get_pagenum_link(1) . '" title="Go to the beginning">«First</a>';
    else
        echo 'First page';

    // Calculate the start and end of the pagination numbers
    if ($paged - $nump > 1)
        $start = $paged - $nump;
    else
        $start = 2;

    if ($paged + $nump < $max_page)
        $end = $paged + $nump;
    else
        $end = $max_page - 1;

    // Show the ... before and after pagination numbers
    if ($start > 2)
        echo "&#x2194;";

    // Pagination numbers
    for ($i = $start; $i <= $end; $i++) {
        if ($paged != $i)
            echo '<a href="' . get_pagenum_link($i) . '" title="Go to page ' . $i . ' of ' . $max_page . '">' . $i . '</a>';
        else
            echo '<b> ' . $i . ' </b>';
    }

    if ($end < $max_page - 1)
        echo "&#x2194;";

    // Link to the last page
    if ($paged != $max_page)
        echo '<a href="' . get_pagenum_link($max_page) . '" title="Go to the last page">Last»</a>';
    else
        echo 'Last page';

    echo '</div>';
}
?>

Step 2: Include Custom Pagination in Your Template

Next, include the navi.php file in your theme template file where you want the pagination to appear. Typically, this would be in your index.php, archive.php, or any custom template file.

<?php include_once 'navi.php'; ?>

Step 3: Style the Pagination

To style the pagination, add CSS styles to your theme’s style.css file. Here’s an example of how you might style it:

#navi {
    margin-top: 20px;
    text-align: center;
}

#navi a {
    margin: 0 5px;
    text-decoration: none;
    color: #0073aa;
}

#navi a:hover {
    text-decoration: underline;
    color: #004d66;
}

#navi b {
    margin: 0 5px;
    font-weight: bold;
}

Explanation of the Code:

  • Global Variables: We use the global WordPress query object to get the maximum number of pages ($max_page) and the current page ($paged).
  • First and Last Page Links: Links to the first and last pages are displayed with conditional checks.
  • Middle Pages Links: We calculate the start and end of the pagination numbers based on the current page and number of pages to show ($nump).
  • Styling: The pagination is styled using CSS for better appearance and usability.

Conclusion

By following these steps, you’ll have a custom pagination system for your WordPress site that is more functional and aesthetically pleasing than the default pagination. This approach avoids using plugins, reducing unnecessary load on your site. Adjust the CSS styles to match your site’s design, and ensure to test thoroughly to ensure proper functionality.