Archived topic
Help with CSS next/previous page button
3 replies · Started by Hemant on April 10, 2020
Hello Team,
I have managed to get the next page and previous page buttons through pagination...
Here's what I used to achieve:
I have added the below PHP code using snippets:
add_filter( 'wp_link_pages_args', 'lh_wp_link_pages' );
function lh_wp_link_pages( $args ) {
$args['next_or_number'] = 'next';
$args['before'] = '<p style="text-align: center;">';
return $args;
}And then I added this CSS:
a.post-page-numbers {
padding: 10px 20px;
border: 2px solid #000;
background-color: #628907;
color: #fff
}
Now the challenge is spacing between next and previous page button is very thin... how do I customize it (increase the spacing between two buttons).. without changing the button settings in the theme?
This is the page where I am trying to achieve the next and previous post pagination: https://fatlossplanner.com/workout-plans-for-weight-loss/
2.) How do Increase the size of that button (Only next and previous page button)
Please help..
Regards,
Hemant S
Hi there,
you can add some space between the two by adding some margin in your CSS - see the additional 2 lines below:
a.post-page-numbers {
padding: 10px 20px;
border: 2px solid #000;
background-color: #628907;
color: #fff;
margin-left: 20px;
margin-right: 20px;
}you can make the buttons bigger by adjusting the 10px ( top and bottom ) and 20px ( left and right ) in this property: padding: 10px 20px;
You are awesome... Will try this... Thanks a ton for the help :)
You're welcome
