Customizing Wordpress Pagination

‍

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

‍

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:

‍