Adding Pagination To WordPress Theme Without Plugin

Adding pagination to WordPress theme without plugins consists of several steps. We will go through these steps. I suggest you create a child theme before adding pagination.

Adding CSS Codes To WordPress

Add the following CSS codes to your theme’s style.css file. You can customize it to your own.

/* Pagination */
.wp_paging { 
    margin: 0 0 20px; 
    padding: 0; 
}
.wp_paging ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
}
.wp_paging ul li {
    margin: 0; 
    padding: 0; 
    display: inline; 
}
.wp_paging ul li a { 
    float: left; 
    display: block; 
    color: #666; 
    text-decoration: none; 
    margin-right: 5px; 
    padding: 5px 10px; 
    background-color: #FFFFFF; 
    border: 1px solid #999; 
}
.wp_paging ul li a:hover { 
    color: #090; 
}
/* Pagination End */

Adding Function To WordPress

Add the following function to your theme’s functions.php file. You can customize the HTML code inside the function.

/* Pagination */
function pagination($pages = '', $range = 2)
{
    $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;
        }
    }
    if(1 != $pages)
    {
        echo "<div class='wp_paging'><ul>";
        if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<li><a href='".get_pagenum_link(1)."'>First</a></li>";
        if($paged > 1 && $showitems < $pages) echo "<li><a href='".get_pagenum_link($paged - 1)."'>Previous</a></li>";
        for ($i=1; $i <= $pages; $i++)
        {
            if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
            {
                echo ($paged == $i)? "<li><a href='#'>".$i."</a></li>":"<li><a href='".get_pagenum_link($i)."'>".$i."</a></li>";
            }
        }
        if ($paged < $pages && $showitems < $pages) echo "<li><a href='".get_pagenum_link($paged + 1)."'>Next</a></li>";
        if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) echo "<li><a href='".get_pagenum_link($pages)."'>End</a></li>";
        echo "</ul><div class='cleaner'></div></div>";
    }
}
/* pagination */

Adding the pagination

In the theme, we use the following code to add the page to where we want it.

<?php pagination(); ?>