[Resolved] Help with CSS next/previous page button

[Hemant]

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

[David]

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;

[Hemant]

You are awesome… Will try this… Thanks a ton for the help 🙂

[David]

You’re welcome

[Author]

Posts