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: