How To Add Pagination In WordPress

[easy-social-share counters=0 style="button"]

If you have been looking to insert pagination help to your Word Press themes with great numbers rather than the default next & previous post, that you can do so to use the well-known Page Navi plug-in, but then, I a lot of prefer inserting pagination manually to my theme so many people don’t require to go and searching a plug-in. It can also help always keep the web site much faster without almost all the external scripts or CSS.

Thankfully there will be a good function in word press known as “paginate links” that was inserted Word Press 2.1 all of which will permit you to set up a paginated style navigation for almost any query on your website. There is a fast article for inserting an easy web page navigation to your themes that look exactly like the pagination in our “Total WordPress Theme“.

Pagination PHP

Basically insert the following code right at the end of your functions.php file folder (and what ever file folder in your themes the place where you would like to make it).

// Numbered Pagination

if ( !function_exists( 'codituts_pagination' ) ) {



    function codituts_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 CSS

Copy the following CSS and then paste into your style.css file folder.

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 }

Adding The Pagination Function To Your Theme

To phone up back the pagination function it’s very simple. Almost all you just have to do is insert the following code to your themes data files where you want to display any kind of pagination. The most popular are your index.php, home .php, category.php, tags.php, archive.php and then search.php. But if in case you will have any kind of custom web page web templates with pagination help, you’ll would like to insert all of them right here.

Exchange pre-defined pagination with the following ( basically located some-where after end if ):

<?php codituts_pagination(); ?>

Custom Queries?

When you are building up a custom query using WP_Query this function won’t work unless you’ve defined your query in the $wp_query variable ( which is really poor , don’t do this ) . To fix it , I generally speaking set up brand new queries just like the following :

$codituts_query = new WP_Query( $args );

In this way I will adjust the main pagination function to try to look for the variable when ever creating the pagination , for example ( changing the 1st snippet ) :

global $wp_query,$codituts_query;

if ( $codituts_query ) {

   $total = $codituts_query->max_num_pages;

} else {

   $total = $wp_query->max_num_pages;

}

Submit a comment

Pin It on Pinterest