[Support request] Display post navigation to show PREVIOUS and NEXT for particular category

[Elvin]

Ah I think this is because we swapped out the next and previous. I’d consider reverting the code back to this.

https://generatepress.com/forums/topic/display-post-navigation-to-show-previous-and-next-for-particular-category/#post-1752317

[Daniel]

Hi again Elvin,
I reverted code as mentioned above and now there is a return of Previous (which links to next post) and Next (which links to previous post)?

I am more of a web designer than a developer but I played around with the code and came up with this;

add_filter( ‘generate_post_navigation_args’, function( $args ) {
$prev_post = get_adjacent_post( true, ”, true, ‘category’ );
$next_post = get_adjacent_post( true, ”, false, ‘category’ );

if ( is_single() && ! in_category(‘projects’) ) {
// Display default post navigation if NOT in category
$args[‘previous_format’] = ‘

‘ . generate_get_svg_icon( ‘arrow-left’ ) . ‘<span class=”prev” title=”‘ . esc_attr__( ‘Previous’, ‘generatepress’ ) . ‘”>%link</span>

‘;
$args[‘next_format’] = ‘

‘ . generate_get_svg_icon( ‘arrow-right’ ) . ‘<span class=”next” title=”‘ . esc_attr__( ‘Next’, ‘generatepress’ ) . ‘”>%link</span>

‘;
}
elseif ( is_single() && in_category(‘projects’) ) {
// Display Next Previous on specifc category
$args[‘previous_format’] = ‘

<span class=”prev” title=”‘ . esc_attr__( ‘Previous’, ‘generatepress’ ) . ‘”>ID ).'”>Previous</span>

‘;
$args[‘next_format’] = ‘

<span class=”next” title=”‘ . esc_attr__( ‘Next’, ‘generatepress’ ) . ‘”>ID ).'”>Next</span>

‘;
}

return $args;
} );

The links work correctly here (ie. Previous links to previous post and Next points to next post) however “Next” is positioned on the left and “Previous” is positioned on the right. I need these positions swapped around then that would be perfect!

Sorry I know your probably sick to death of this but I just can’t get it right? Website is now live at reimann.com.au

I’ll explain again with below example;
An example page is https://reimann.com.au/projects/kangaroo-creek-dam-safety-upgrade#more-251
Next project links correctly to https://reimann.com.au/projects/metro-mechanical-and-electrical-framework-prv-upgrade
Previous project correctly links to https://reimann.com.au/projects/metro-mechanical-and-electrical-framework-prv-upgrade
I need “Previous project” on the left side and “Next project” on the right side.

No doubt I probably have the code jumbled that is causing this however the links are correct!

If you click on “Projects” in main menu you will see in the post archive, the order I would like to keep the same in the post navigation.

I hope this makes sense? Many thanks again.

[Elvin]

Do you have this new code applied?

The links work correctly here (ie. Previous links to previous post and Next points to next post) however “Next” is positioned on the left and “Previous” is positioned on the right. I need these positions swapped around then that would be perfect!

If the links are already perfect then we can play around with simple CSS.

Add this CSS:

nav#nav-below {
    flex-direction: row-reverse;
    justify-content: space-between;
}

.nav-previous{ 
    margin: unset; 
}

This is the expected result.
https://share.getcloudapp.com/Jru429Qe

[Daniel]

Perfect Elvin! Works great now. Thank you so much for your time. 🙂

[Elvin]

No problem.

Note: The chevron icons are added by a CSS. You can change this through a PHP snippet to modify the code to add icons or through CSS as well if you need to. 😀

[Daniel]

Thanks Elvin I have changed CSS to look correct.
Just one more thing, I noticed on mobile device, “Next project” is sitting above “Previous project”.
I would like it changed around so “Previous project” is at the top?
Do you know of a CSS which could enable this please?
Thanks again

[Elvin]

Have you sorted this out? I’ve checked the site and the “Previous project” link is the one placed on top “Next Project” as shown here – https://share.getcloudapp.com/7KuPDlXe

Let us know if you need further help.

[Daniel]

Very strange? I haven’t changed anything and on my screen “Next Project” up the top shown here – https://share.getcloudapp.com/Koudp5pv

I used browserstack on other devices and “Next Project” on top as well?

[Elvin]

Ah that’s my bad. I was checking the staging site rather than the live one.

You have this custom CSS on your site that changes how the post navigation behaves on screens sized 1024px or smaller.

@media (max-width: 1024px){
.post-navigation {
    display: block;
}
}

Changing block to flex will make it display in 1 line. Adding “flex-direction: column-reverse;” will make it display in a vertically stacked manner.

Note: If you decide on using column-reverse, you may also have to remove this CSS:

@media (max-width: 1024px) {
.nav-next, .nav-previous {
    margin-top: 20px;
}
}

Because it will add in 20px spacing between the 2 buttons.

[Daniel]

Yay Elvin I think we are done!
I had to put “!important” inside “flex-direction: column-reverse;” and works great.
Many thanks again Elvin – great support.

[Elvin]

Nice one. No problem. 😀

[Author]

Posts