[Resolved] After enabling Pagination, Sidebar got messed up

[Hemant]

Hello Team,

My Side bar is messesd up after implementing below solution:
https://generatepress.com/forums/topic/pagination-button-spacing-issues/

How to restore the sidebar by keeping same configuration.

Please help

David has been very helpful though 🙂

[David]

Hi there,

thanks 🙂

Can you show me the exact code you now have for adding your next / previous buttons?

[Hemant]

Yes the php code is:

add_filter( 'wp_link_pages_args', 'lh_wp_link_pages' );
function lh_wp_link_pages( $args ) {
    $args['next_or_number'] = 'next';
    $args['before'] = '<p class="custom-next-previous" style="text-align: center;">';

    return $args;
}

and css is

.custom-next-previous {
    text-align: center;
}
@media(max-width: 420px) {
    .custom-next-previous {
        margin-left: -20px;
        margin-right: -120px;
    }
}

[David]

Try this PHP Snippet:

add_filter( 'wp_link_pages_args', 'lh_wp_link_pages' );
function lh_wp_link_pages( $args ) {
    $args['next_or_number'] = 'next';
    $args['before'] = '<p class="custom-next-previous">';
    $args['after'] = '</p>';
    return $args;
}

[Hemant]

Nope not working.. Sidebar in Desktop/Laptop has not changed. In mobile it looks good 🙁

I can give you my login credentials… if you want 🙁

You can check the sidebar here: https://fatlossplanner.com/workout-plans-for-weight-loss/2/

And go to any other URL.. you will see the better version of side bar there…

Also, in iPhone the pagination looks ok but in Android its still dashing into each other

[David]

This happens when there is some broken HTML in the content. Such as a missing </p> or </div> or just bad syntax
Have you added any other HTML ? If so can you check it is valid.

[Hemant]

You are 100% correct!!

I created a test page and it works there:
https://fatlossplanner.com/3002-2/

You have been awesome David 🙂

One final question, if I look at this url: https://fatlossplanner.com/3002-2/ in an android device, it works as expected… but it looks like its slightly moving outside the frame…especially the next button

Any suggestions on that please? 🙂

OR

Is there a way I can keep only the next button…

[David]

In the CSS change:

margin-right: -120px;

to

margin-right: -20px;

[Hemant]

Yes, looks perfect now…

Any way I can get rid of the previous page button.. as it looks too long as compared too next page button..

Although you have solved what I needed.. but just wanted to see if GP has the capability to Display Next post as shown in the URL below..

https://www3.forbes.com/business/best-places-to-retire-in-each-state-2018-vue/

I know I m asking too many questions but to b honest I m switching back to GP… hope u understand the concern 🙁

But promise.. its a last one 🙂

Two Questions:
1.) How to change the color for the previous button
2.) How to Achieve something like this:
https://www3.forbes.com/business/best-places-to-retire-in-each-state-2018-vue/

[Leo]

Is the original question with this topic resolved?

If so please open a new topic.

Thanks!

[Hemant]

Hi Leo,

Original query has been answered and you guys have been great… its just that when I post a new topic it will be difficult for you guys to correlate… Anyways I will raise a fresh query.

[Leo]

It’s actually easier if we can keep one question per topic.

Thanks!

[Hemant]

Yes.. Makes sense. I understand… In between i have pasted a query andogges a seperate request… Would you be so kind to look into that please .. Actually I am switching back to gp from other theme hence I had few questions.. Hope u understand… This is the last question related to pagination…

And give 5 star to David pls.. He has been more than helpful

[Leo]

Yup we will take a look at the new topic.

Thanks for your patience.

[Author]

Posts