Customizing WordPress Pagination

Laura Kressin
February 21, 2018
 Trying to customize your pagination, but don’t know what you’re doing or where to start?

Follow this simple guide to get the pagination of your dreams!

 

 

Your WordPress pagination starts off with your query:


paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;

$args = array(
	'posts_per_page' => 5,
        'paged'          => $paged,
	'orderby'        => 'date',
	'order'	         => 'DESC',
	'post_status'    => 'publish',
);

$postQuery = new WP_Query($args);

At the end of the page where you’re putting your pagination, you’re going to add a function to make your pagination:

pagination_nav($postQuery);

Then put this “pagination_nav” function in my functions.php file to pull the query and pull the pagination:


function pagination_nav($x) {
  //get current page id
    global $paged;
    if(empty($paged)):
      $paged = 1;
    endif;
//get number of pages in query
    $pages = $x->max_num_pages;
    //if there are not posts, there is only going to be one page
    if(!$pages):
      $pages = 1;
    endif;

    //if there is enough posts for more than one page, create pagination
    if(1 != $pages):
      echo "<div class='pagination'>";
      //if the current page is not #1, the previous button is going to get different styling and be usable
      if($paged > 1 ):
        echo "<a class='btn orange prev' href='".get_pagenum_link($paged - 1)."'>Previous</a>";
      //if the current page is #1, the previous button given inactive styles
      else:
        echo "<a class='btn inactive prev' href=''>Previous</a>";
      endif;
      for ($i=1; $i <= $pages; $i++) {
        if (1 != $pages ):
          //if the current page is the iterated number, give it a class to style it
          echo ($paged == $i)? "<span class='current'>".$i."</span>":"<a href='".get_pagenum_link($i)."' class='inactive'>".$i."</a>";
        endif;
      }
      //if we are not at the last page, make the next button active
      if ($paged < $pages ):
        echo "<a class='btn orange next' href='".get_pagenum_link($paged + 1)."'>Next</a>";
      //otherwise give it inactive styling
      else:
        echo "<a class='btn inactive next' href=''>Next</a>";
      endif;
      echo "</div>";
    endif;
}

Add some pagination styling…


.pagination {
  display: table;
  margin: 50px auto;
  a {
    text-decoration: none;
  }
  .btn {
    display: inline-block;
    padding: 5px 15px;
  }
  .btn.inactive.prev, .btn.inactive.next {
    background-color: #cbcdce;
    cursor: default;
    pointer-events: none;
    text-align: center;
  }
  .btn.inactive, .current {
    color: #54575b;
  }
  .btn.orange {
    background: #ff9d00;
    color: #fff;
    text-align: center;
  }
  .btn.orange:hover {
    background: #43b0de;
  }
  .inactive, .current {
    font-size: 26px;
    line-height: 1;
    margin: 0 10px;
  }
  .prev {
    margin-right: 15px;
  }
  .next {
    margin-left: 15px;
  }
  .prev, .next {
    font-size: 12px;
    line-height: normal;
    text-transform: uppercase;
    width: 58px;
  }
}

And end result looks something like this:
pagination example

Solutions Architecture

browse through our blog articles

Blog Archive