How to change the design of WordPress pagination

To modify the design of WordPress pagination, you can use the paginate_links function and customize the output of the pagination links.

Here’s an example of how you can use the paginate_links function to customize the design of WordPress pagination:

// Change the design of pagination
// More snippets at wpunplugged.com 

$pagination_args = array(
  'base' => '%_%',
  'format' => '?page=%#%',
  'total' => $wp_query->max_num_pages,
  'current' => max( 1, get_query_var('paged') ),
  'prev_text' => 'Previous',
  'next_text' => 'Next',
  'before_page_number' => '<span class="page-number">',
  'after_page_number' => '</span>',
);
echo paginate_links( $pagination_args );

This code will output pagination links for your WordPress site, with the before_page_number and after_page_number arguments being used to wrap the page numbers in a <span> element with the page-number class. You can then use CSS to style the pagination links as needed.

Here’s an example of how you can use CSS to style the pagination links:

// Change the design of pagination
// More snippets at wpunplugged.com 

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
}

.pagination li {
  margin: 0 5px;
}

.pagination li a {
  display: block;
  padding: 10px 15px;
  background-color: #eee;
  border: 1px solid #ddd;
  border-radius: 3px;
  text-decoration: none;
  color: #333;
}

.pagination li a:hover,
.pagination li a:active {
  background-color: #ddd;
}

.pagination li.current a {
  background-color: #333;
  color: #fff;
}

.page-number {
  display: inline-block;
  padding: 10px 15px;
  background-color: #eee;
  border: 1px solid #ddd;
  border-radius: 3px;
  color: #333;
}