WordPress pagination with numbers
This post involves various numeric pagination styles in WordPress.
The tricks shown in this post create pagination with numbers.
And also, the numeric pagination will include some dots at the pagination center.
The purpose is to reduce the page numbers.
To create numeric pagination, create a function in the function.php in which the paginate_links function outputs page numbers.
The function uses the global variable wp_query to retrieve the total number of posts.
The sum of post numbers is needed by the paginate_links function.
Let’s dive into more details.
WordPress Numeric Pagination Code
Open functions.php and write the following codes.
1.function paginationWordPress(){
2.global $wp_query;
3.$allPages = $wp_query->max_num_pages;
4.if($allPages>0){
5.$currentPage = max(1,get_query_var('paged'));
6.$args = array(
7.'format'=>'/page/%#%',
8.'base'=>get_pagenum_link(1).'%_%',
9.'current'=>$currentPage,
10.'prev_next '=> true,
11.'prev_text' => '<<PREVIOUS',
12.'next_text' => 'NEXT>>',
13.'total'=>$allPages
14.);
15.echo paginate_links($args);
16.}
17.}
The pagination created by this snippet contains the Previous and Next buttons.
This has been specified by line-11 and line-12.
The explanation of the code will follow but for now, let’s style the links to create a clickable button.
Also, you can find a deep explanation of the codes here how to add pagination in homepage
Styling WordPress pagination in CSS
You should check the class names returned by the paginate_links function.
These are the classes that will be used to style the pagination elements.
If you look at the HTML source, the previous link anchor tag’s class is prev and page-numbers.
The other anchor tags have page-numbers classes.
The current viewing page consists of two classes.
These classes are current and page-numbers.
Design the previous and next page buttons.
The reference class for the previous page link is prev.
The previous and next buttons setup will be round on the left side.
But also the red borders.
.prev{
border-bottom : 1px red solid;
border-top : 1px red solid;
border-top-left-radius : 5px;
border-bottom-left-radius : 5px;
padding : 10px 10px;
}
Design the next page button.
For the next page button its CSS code can be set as follow
.next{
border-bottom : 1px red solid;
border-top : 1px red solid;
border-top-right-radius : 5px;
border-bottom-right-radius : 5px;
padding-top : 10px ;
padding-bottom : 10px;
}
The next button CSS is very similar to the previous button style.
The difference happens in the shape of the corners of the button.
The next buttons round are on the right side.
Design the current page button
The pagination should indicate the active page.
The active page setup helps a user to identify the posts of the current page.
The indicator can be shown by setting a color to a current viewing page.
The active color for the current color is going to be set to a light blue color.
Actually, you can choose any color.
In style.css the setting will use the ‘current’ class.
Remember the WordPress brings anchor tag class of ‘current’ for the current page.
.current{
background-color : rgb(86,157,235);
color : #fff;
}
General pagination design
The other page numbers that appear in pagination need to be designed as well.
The design is basing on the W3School pagination example.
The reference class for CSS is page-numbers.
Every anchor tag contains this class.
.page-numbers {
color: #333;
float: left;
padding: 8px 16px;
text-decoration: none;
}
WordPress Pagination with dots.
You may want to limit the number of pages on pagination when there are many contents.
Many posts create many pages, which makes the pagination area very wide,
By considering use experience you can show few pages with some dots at the midpoint of pagination.
This is how to implement dotted pagination in WordPress.
This code sets two numbers on the left side of pagination.
The dots follow after the first two numbers then followed by the last two numbers.
In fact, pagination will show only four pages links.
The array passed to the paginate_links function requires an additional element.
The element is mid_size which determines the numbers on the left sides and the right side of the pagination.
1.function paginationWordPress(){
2.global $wp_query;
3.$allPages = $wp_query->max_num_pages;
4.if($allPages>0){
5.$currentPage = max(1,get_query_var('paged'));
6.$args = array(
7.'format'=>'/page/%#%',
8.'base'=>get_pagenum_link(1).'%_%',
9.'current'=>$currentPage,
10.'prev_next '=> true,
11.'prev_text' => '<<PREVIOUS',
12.'next_text' => 'NEXT>>',
13.'total'=>$allPages,
‘mid_size’ => 2
14.);
15.echo paginate_links($args);
16.}
17.}
Then in the index.php call the function to implement the pagination.
<?php paginationWordPress();?>
