Create WordPress Pagination Without a Plugin

Pagination is a necessary feature to any WordPress blog. One of the most popular plugins used is WP-PageNavi which is an excellent plugin but WordPress already actually has a function to do this for us. This function was introduced with WordPress 2.1 and all bloggers should be using it by now. Today, I will show you how to implement a WordPress Pagination without a plugin by using the function. I will also be showing you how to do some simple styling to the pagination links. Let’s get started!

Step 1: Add the Function

First we need to open functions.php and paste the following function inside of it.

function wp_corenavi() {
    global $wp_query, $wp_rewrite;
    $pages = '';
    $max = $wp_query->max_num_pages;
    if (!$current = get_query_var('paged')) $current = 1;
    $a['base'] = str_replace(999999999, '%#%', get_pagenum_link(999999999));
    $a['total'] = $max;
    $a['current'] = $current;

    $total = 1; //1 - display the text "Page # of #", 0 - not display
    $a['mid_size'] = 5; //how many links to show on the left and right of the current
    $a['end_size'] = 1; //how many links to show in the beginning and end
    $a['prev_text'] = '&laquo; Previous'; //text of the "Previous page" link
    $a['next_text'] = 'Next &raquo;'; //text of the "Next page" link

    if ($max > 1) echo '<div class="pagination">';
    if ($total == 1 && $max > 1) $pages = '<span class="pages">Page ' . $current . ' of ' . $max . '</span>'."\r\n";
    echo $pages . paginate_links($a);
    if ($max > 1) echo '</div>';
}

Step 2: Activating the Function Within Theme

Next we need to place the following code below the loop so the pagination will be visible. Placements of this snippet and files it needs to be added to will vary depending on template/file structure of certain themes but typically it will be added to index.php, search.php, category.php, etc.. All pages that require it.

<?php if (function_exists('wp_corenavi')) wp_corenavi(); ?>

Example of my index.php placement:

		<?php if ( have_posts() ) : ?>

			<?php /* Start the Loop */ ?>
			<?php while ( have_posts() ) : the_post(); ?>

				<?php get_template_part( 'content', get_post_format() ); ?>

			<?php endwhile; ?>

		<?php else : ?>

			<?php get_template_part( 'no-results', 'index' ); ?>

		<?php endif; ?>

		<?php if (function_exists('wp_corenavi')) wp_corenavi(); ?>

HTML Results:

<div class="pagination">
    <span class="pages">Page 8 of 38</span>
    <a class="prev page-numbers" href="http://site.com/page/7/">&laquo; Previous</a>
    <a class='page-numbers' href='http://site.com/page/1/'>1</a>
    <span class="page-numbers dots">&hellip;</span>
    <a class='page-numbers' href='http://site.com/page/3/'>3</a>
    <a class='page-numbers' href='http://site.com/page/4/'>4</a>
    <a class='page-numbers' href='http://site.com/page/5/'>5</a>
    <a class='page-numbers' href='http://site.com/page/6/'>6</a>
    <a class='page-numbers' href='http://site.com/page/7/'>7</a>
    <span class='page-numbers current'>8</span>
    <a class='page-numbers' href='http://site.com/page/9/'>9</a>
    <a class='page-numbers' href='http://site.com/page/10/'>10</a>
    <a class='page-numbers' href='http://site.com/page/11/'>11</a>
    <a class='page-numbers' href='http://site.com/page/12/'>12</a>
    <a class='page-numbers' href='http://site.com/page/13/'>13</a>
    <span class="page-numbers dots">&hellip;</span>
    <a class='page-numbers' href='http://site.com/page/38/'>38</a>
    <a class="next page-numbers" href="http://site.com/page/9/">Next &raquo;</a>
</div>

Visual Results:

Step 3: Styling the Pagination

Before I went and styled this, I was working with a fixed 960px width area so the settings used in the function above needed to be modified. If you run into issues with the links dropping down a line because of insufficient space, modify $a['mid_size'] = 5; from the function to shorten the amount of links on left and right side of current page. I’ve changed to 2 in this demonstration.

/* Pagination Container */
.pagination {
	background: #f4f4f4;
	padding: 20px;
}

/* Pages (eg. Page 1 of 10) */
.pages {
	color: #888;
	margin-right: 10px;
	font-size: 13px;
}

/* All Page Numbers */
.page-numbers { padding: 5px 10px; }

/* Page Links & Hover */
a.page-numbers {
	background: #f4f4f4;
	border: 1px solid #d7d7d7;
	color: #252525;
}
a.page-numbers:hover { background: #e1e1e1;}

/* Current Page */
.page-numbers.current {
	background: #252525;
	border: #252525;
	color: #ffffff;
}

/* Dots Between First & Last Pages */
.page-numbers.dots {
	border: none;
	background: none;
	padding: 0;
	color: #888;
}

/* Next & Previous Page Link */
.next.page-numbers,
.prev.page-numbers {
	background: #252525;
	color: #ffffff;
}

/* Next & Previous Page Link Hover */
.next.page-numbers:hover,
.prev.page-numbers:hover {
	background: #333;
}

I’ve commented everything so it can be easily modified to suit your needs. Again this was for demonstration purposes only so the styling is very basic, modify the classes to suit your needs.