How To Add Numeric WordPress Pagination Post and Custom Post Type Query
How to include pagination in a Wordpress Custom Post Type Query
WordPress Pagination Done Right
In this post I’m going to provide you how to add numeric WordPress Pagination to your blog roll page, without relying on any plugins. The numeric pagination code I am going to provide is the code used on this site (if you click blog at the top, and scroll to the bottom you will see what I’m talking about). I am writing this post because I find more often than not, people have a difficult time adding pagination to an existing site. I always come across at least one or two posts a day in the WordPress.org Support Forums asking something like “How do I add pagination to my blog page?”, “How can I add those numbers to the bottom of my blog page so users can navigate between posts?” or “How can I split my blog into multiple pages?”. It seems most people prefer the numeric WordPress pagination as opposed to the default ‘Previous Page’ and ‘Next Page’ pagination with no real feedback of the current page the user is on.
The basic pagination with the two links ‘Next Page’ and ‘Previous Page’ are easy to implement, and the codex pages on them are great, but they don’t look all that great. And think about when a user reaches your page, finds an article on page 8 and leaves. They come back only to realize they have to continuously hit ‘Next Page’ until they reach the proper page containing that post. Imagine how frustrating and annoying that would be. This is poor UX design and should be avoided, as it could potentially deter users from coming back in future.
Initial Setup: The Custom Query
The first, and most important step of the pagination process, is to make sure that you have set up your custom WP_Query properly and the query is returning post data. Here is a basic example of a query being run:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<?php
$paged = ( get_query_var( ‘paged’ ) ) ? get_query_var( ‘paged’ ) : 1;
$args = array(
‘posts_per_page’ => 6,
‘paged’ => $paged
);
$custom_query = new WP_Query( $args );
while($custom_query->have_posts()) :
$custom_query->the_post();
?>
<div>
<ul>
<li>
<h3><a class=“blog-title” href=“<?php the_permalink(); ?>“ rel=“bookmark”><?php the_title(); ?></a></h3>
<span>Written <i>by: </i> <a class=“link” href=“<?php bloginfo(‘url’); ?>/author/<?php the_author(); ?>“> <?php the_author(); ?></a> <i>on</i> <?php the_time(‘F j, Y’); ?> <a class=“link” href=“<?php the_permalink(); ?>#comments “><?php comments_number( ”, ‘- 1 comment’, ‘- % comments’ ); ?></a></span>
<div>
<ul>
<div><a href=“<?php the_permalink(); ?>“><?php the_post_thumbnail(‘thumbnail’); ?></a></div>
</ul>
<ul>
<li class=“work-description”><?php echo the_excerpt(); ?></li>
</ul>
</div>
<div><?php the_tags(); ?>
</li>
</ul>
</div> <!— end blog posts —>
<?php endwhile; ?>
</div>
|
Note: The code above is for example use only. The styles will be all messed up if you copy and paste it directly as is. You can adjust it as needed if you choose too. Also take not of the variable that we are storing our query in, $custom_query, as this will be used to display pagination for that specific query.
At the top of our query take not of the $paged variable being set, and then being used inside of our custom query. This is necessary to dictate to WordPress which page of the pagination we are currently on. Without these two declared, the numeric WordPress pagination will fail every time.
Pagination Styles
These styles go directly into your theme or child themes main .CSS file. These styles are what dictate the way the pagination is rendered on the front end of our site.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
/* Pagination */
.pagination {
clear:both;
position:relative;
font–size:11px; /* Pagination text size */
line–height:13px;
float:right; /* Pagination float direction */
}
.pagination span, .pagination a {
display:block;
float:left;
margin: 2px 2px 2px 0;
padding:6px 9px 5px 9px;
text–decoration:none;
width:auto;
color:#fff; /* Pagination text color */
background: #555; /* Pagination non-active background color */
–webkit–transition: background .15s ease–in–out;
–moz–transition: background .15s ease–in–out;
–ms–transition: background .15s ease–in–out;
–o–transition: background .15s ease–in–out;
transition: background .15s ease–in–out;
}
.pagination a:hover{
color:#fff;
background: #6AAC70; /* Pagination background on hover */
}
.pagination .current{
padding:6px 9px 5px 9px;
background: #6AAC70; /* Current page background */
color:#fff;
}
|
I’ve added comments throughout the CSS declarations for easily swapping out the colors to match your theme, or changing the styles to the needs of your site. Go ahead and paste the above code into your themes main .CSS file.
The Pagination Function
The code below is all of the code required for our pagination to function properly. This is what processes the returned query data, and spits out our pretty pagination. Copy and paste this code directly into your Functions.php file, as is. Nothing needs to be changed.
