How to add pagination to your WordPress theme

If you want to use cool numbers instead of the default next and previous articles for your WordPress theme’s pagination support, you can use the famous PageNavi plugin to achieve it. However, I prefer to manually add the pagination to the theme, this way People will not have to look for plug-ins.

Fortunately, a powerful feature called “paginate_links” has been added to WordPress 2.1, which allows you to create pagination style navigation for any query on your website. This is a quick tutorial to add simple page navigation to your theme.

Paging function

Just add the following code at the end of the functions.php file (or any file in the theme where you want to keep it).

if ( !function_exists( 'ie_pagination' ) ) {
  
  function ie_pagination() {
    
    $prev_arrow = is_rtl() ? '→' : '←';
    $next_arrow = is_rtl() ? '←' : '→';
    
    global $wp_query;
    $total = $wp_query->max_num_pages;
    $big = 999999999; // need an unlikely integer
    if( $total > 1 )  {
       if( !$current_page = get_query_var('paged') )
         $current_page = 1;
       if( get_option('permalink_structure') ) {
         $format = 'page/%#%/';
       } else {
         $format = '&paged=%#%';
       }
      echo paginate_links(array(
        'base'      => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
        'format'    => $format,
        'current'    => max( 1, get_query_var('paged') ),
        'total'     => $total,
        'mid_size'    => 3,
        'type'       => 'list',
        'prev_text'    => $prev_arrow,
        'next_text'    => $next_arrow,
       ) );
    }
  }
}

Pagination style

Copy the following CSS and paste it into the style.css file.

ul.page-numbers {
    list-style: none;
    margin: 0;
}

.page-numbers:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

ul.page-numbers li {
    display: block;
    float: left;
    margin: 0 4px 4px 0;
    text-align: center;
}

.page-numbers a,
.page-numbers span {
    line-height: 1.6em;
    display: block;
    padding: 0 6px;
    height: 18px;
    line-height: 18px;
    font-size: 12px;
    text-decoration: none;
    font-weight: 400;
    cursor: pointer;
    border: 1px solid #ddd;
    color: #888;
}

.page-numbers a span { padding: 0 }

.page-numbers a:hover,
.page-numbers.current,
.page-numbers.current:hover {
    color: #000;
    background: #f7f7f7;
    text-decoration: none;
}

.page-numbers:hover { text-decoration: none }

It is very simple to add call paging function to the theme. All you have to do is to add the following code to the theme file you want to display any pagination. The most common are your index.php, home.php, category.php, tags.php, archive.php and search.php. However, if you have any custom page templates with pagination support, you need to add them here.

Replace the default pagination with the following (usually somewhere after endif):

<?php ie_pagination(); ?>

Advanced application

If you use WP_Query to create a custom query, the function will not be available unless you define the query in the $wp_query variable (otherwise, don’t do this). To solve this problem, I usually create a new query similar to the following:

$wpie_query = new WP_Query( $args );

In this way, I can change the main pagination function to look for variables when creating a pagination, for example (edit the first code snippet):

global $wp_query, $wpie_query;
if ( $wpie_query ) {
    $total = $wpie_query->max_num_pages;
} else {
    $total = $wp_query->max_num_pages;
}
admin

Related Posts
Leave a reply
Captcha Click on image to update the captcha .