Pagination in WordPress

You say “tomato” I say “tomoto.” You “pageination” I say “pagination.”

Whatever you call it pagination is something that has abounded on the web since forever. If you’re not 100% sure what term pagination refers to, its the numbered links at the bottom of a page of results. There are different variations, but it often looks kind of like this…

1 2 3 … 37 38 Next > Last >>

If you enter a Google, Yahoo, or Bing Search and scroll to the bottom you will see these numbered links that allow you to the next page of results. That’s one example, but it shows up in many other contexts on the web. There are certainly other ways to do things. Infinite scrolling, for example, which we explored here is another way that sites can give users continual amounts of content. Nonetheless, pagination still remains a very popular way to organize things on websites.

Speaking of popularity, (on a seemingly unrelated note) even as we enter 2015 — the time of writing this — WordPress is still one of the most popular content management systems on the Internet. Despite new up-and-comers on different platforms such as Ghost on Node.js, WordPress is currently still the dominant force for blogging and/or publishing content on the web. So it seems like it would be worth knowing how to fit these 2 popular entities (pagination and WordPress) together. So in what follows, we will look at how to implement this.

So the function we’ll be creating is fairly straightforward. We’ll be making use of the $paged global variable which set to the page number that WordPress is displaying. Then based off of this, we do a few conditionals to figure out where we are in the range of pages.

function create_pagination_markup($pages = '', $range = 4)
{
    $markup = '';
    $showitems = ($range * 2)+1;
    global $paged;
    if(empty($paged)) $paged = 1;
    if($pages == '')
    {
        global $wp_query;
        $pages = $wp_query->max_num_pages;
        if(!$pages)
        {
            $pages = 1;
        }
    }
    $pageText = __('Page','ninebit');
    $ofText = __('of','ninebit');
    $firstText = __('First','ninebit');
    $lastText = __('Last','ninebit');
    $previousText = __('Previous','ninebit');
    $nextText = __('Next','ninebit');
    if(1 != $pages)
    {
        $markup .= "<div class=\"pagination\"><span>".$pageText." ".$paged." ".$ofText." ".$pages."</span>";
        if($paged > 2 && $paged > $range+1 && $showitems < $pages) $markup .= "<a href='".get_pagenum_link(1)."'>« ".$firstText."</a>";
        if($paged > 1 && $showitems < $pages) $markup .= "<a href='".get_pagenum_link($paged - 1)."'>‹ ".$previousText."</a>";
        for ($i=1; $i <= $pages; $i++)
        {
            if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
            {
                $markup .= ($paged == $i)? "<span class=\"current\">".$i."</span>":"<a href='".get_pagenum_link($i)."' class=\"inactive\">".$i."</a>";
            }
        }
        if ($paged < $pages && $showitems < $pages) $markup .= "<a href=\"".get_pagenum_link($paged + 1)."\">".$nextText." ›</a>";
        if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) $markup .= "<a href='".get_pagenum_link($pages)."'>".$lastText." »</a>";
        $markup .= "</div>\n";
    }
    return $markup;
}

Then all we need to do is echo it out where we need it…

<?php echo create_pagination_markup(); ?>

And voila, WordPress pagination.