[Resolved] Custom Post Navigation (like Volume) but have it navigate w/in categories

[Alan]

Hi Team!

I hope you are doing well.

GP Theme version: 3.2.4
GP Premium version: 2.2.2

I’m hoping you can provide some guidance as this might be an easy PHP change, it’s just out of my league in terms of PHP knowledge. The previous owner of my site has a Custom Post navigation hook in the Elements that adds a Prev/Next at the bottom of each single post. I wasn’t sure if it was custom coded or what until, while searching for solutions before making this topic, I found this support topic which references something called “Volume”, which I think is maybe a child theme of GeneratePress?

Anyway, in that support post David links to this URL that has the exact code (and CSS) that I have on my site: https://gist.github.com/diggeddy/ab33c7505218c583f5f91359f41c05be — so it seems this code was written by David or someone at GP perhaps?

What I’d LOVE to do is tweak the code slightly so that the Prev/Next “stays” within the category that the current post is in (in the order of date published). Ex. On a post in the “Laptop” category, the Prev/Next would cycle through the posts in the Laptop category in chronological order like it does now, but only within the current category. Currently, it is just sequential based on the date posted across all categories.

Is this possible / easily do-able? If you were able to help on this it would super awesome. Thanks in advance and let me know if there’s something I can do to help. I’ll include an example post in the Private Information box so you can see the prev/next setup at the bottom (looks identical to Volume at https://gpsites.co/volume/sample-post/).

Best regards,
Alan

P.S. Just in case there is some difference between my element code and the one linked above, I’m including it below. I’ve skimmed it and believe it to be identical to the on at github.

<div id="post-nav">
	<?php global $post;
    $prevPost = get_previous_post(false);
        if($prevPost) {
            $args = array(
                'posts_per_page' => 1,
                'include' => $prevPost->ID
            );
            $prevPost = get_posts($args);
            foreach ($prevPost as $post) {
                setup_postdata($post);
    ?>
        <a class="post-previous" href="<?php the_permalink(); ?>">
				<div class="post-nav-wrap" style="background: linear-gradient(0deg,rgba(52,62,71,0.1),rgba(52,62,71,0.3)),url('<?php the_post_thumbnail_url(); ?>');">
            <div class="post-nav">Previous</div>
            <h3 class="post-nav-title"><?php the_title(); ?></h3>
        </div></a>
    <?php
                wp_reset_postdata();
            } //end foreach
        } // end if
         
        $nextPost = get_next_post(false);
        if($nextPost) {
            $args = array(
                'posts_per_page' => 1,
                'include' => $nextPost->ID
            );
            $nextPost = get_posts($args);
            foreach ($nextPost as $post) {
                setup_postdata($post);
    ?>
        <a class="post-next" href="<?php the_permalink(); ?>">
        <div class="post-nav-wrap" style="background: linear-gradient(0deg,rgba(52,62,71,0.6),rgba(52,62,71,0.3)),url('<?php the_post_thumbnail_url(); ?>');">
            <h3 class="post-nav-title"><?php the_title(); ?></h3>
            <div class="post-nav">Next</div>					
        </div></a>
    <?php
                wp_reset_postdata();
            } //end foreach
        } // end if
    ?>
</div>

[Ying]

Hi Alan,

This method was before we introduced the block element - post navigation template, now you can create it using blocks, and there’s a built-in template which is the same as the Volume site has.
https://docs.generatepress.com/article/block-element-post-navigation/

And you will be able to set it so it stays in the same category of the current post.

Technically speaking, you don’t need this PHP code anymore.

[Alan]

Hi Ying!

Thanks for the quick and helpful reply. I didn’t know about the new block element (never tried creating one before) and didn’t realize that PHP code had basically been deprecated.

So, I have been able to use the template, but it requiring some manual tweaking to get it to look almost like what I currently have via the PHP/HTML element. Some of the limitations are related to not having GenerateBlocks Pro (some aesthetic things like gradients and hover effect, and also having the whole block clickable like it currently is). I don’t think those are huge problems, though it does mean I cannot fully replicate what I currently have without paying more money.. which is kind of annoying. That said, it’s not my biggest concern.

The main thing I’m concerned about is this– is Google going to understand what this element is when crawling the page as the div’s and other behind the scenes code is entirely different.

Here is the Elements console for the old code currently on the live site–

And here is the console for the new code (using the block editor) on my dev site–

I guess my concern is specifically regarding the div’s and lack of classes… they aren’t descriptive in the way the custom PHP is. I feel (who knows for sure) that Google might not be able to interpret this as the prev/next post as well as they could before. Maybe Google is smart enough, maybe not. Right now, with the new method, it just looks like some H3’s at the bottom of the posts that link to other posts (albeit they are in the same category, which was the ultimate goal).

Is there a way to customize those div’s? Is there a way to add a rel= or classes to any of this within the block editor of Elements? I tried manually adding a class but it broke it and I had to click the “fix this button” and is restored it fine.

Am I overthinking this?

Lastly, I can’t seem to make the overall container (element) as “tall” as the previous PHP driven post navigation. Do you know how I can adjust that? I’ve tweaked multiple settings but none seem to make a difference (I also notice it’s not a flexbox like in the PHP version). I’m including links in the private area to the exact same posts on dev and live site, each running the different code (dev = new block ; live = legacy PHP/HTML)

Thanks so much for your help and sorry to always be a pain! 🙂

Best,
Alan

[Alan]

As an added note, I guess I cannot embed images uploaded to G-Drive, however the images still work if you right click and open them in new tab. I guess I should have uploaded them using a different method.

Also, just want to ask– is the not some slight tweak of the legacy PHP that you or perhaps David could do off the cuff to make my existing PHP/HTML based element look within the same category?

Or is that easier said than done and would require me to go pay a dev to get done? I’d much prefer to just tweak the existing code on this site rather than replace with this block that changes so many variables as the site has significant monetary value (I realize any change could throw things off, but I think the post nav within categories makes sense and should be done regardless).

Thanks again,
Alan

[Ying]

I guess my concern is specifically regarding the div’s and lack of classes…

Classes are not for Google to read, it’s more for developers to target and style the elements. If you want, you can add whatever classes to blocks:
https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/

But anyways, if you’d like to keep on using the code, nothing wrong about it, here’s the updated code:

<div id="post-nav">
	<?php global $post;
    $prevPost = get_previous_post(true);
        if($prevPost) {
            $args = array(
                'posts_per_page' => 1,
                'include' => $prevPost->ID
            );
            $prevPost = get_posts($args);
            foreach ($prevPost as $post) {
                setup_postdata($post);
    ?>
        <a class="post-previous" href="<?php the_permalink(); ?>">
				<div class="post-nav-wrap" style="background: linear-gradient(0deg,rgba(52,62,71,0.1),rgba(52,62,71,0.3)),url('<?php the_post_thumbnail_url(); ?>');">
            <div class="post-nav">Previous</div>
            <h3 class="post-nav-title"><?php the_title(); ?></h3>
        </div></a>
    <?php
                wp_reset_postdata();
            } //end foreach
        } // end if
         
        $nextPost = get_next_post(true);
        if($nextPost) {
            $args = array(
                'posts_per_page' => 1,
                'include' => $nextPost->ID
            );
            $nextPost = get_posts($args);
            foreach ($nextPost as $post) {
                setup_postdata($post);
    ?>
        <a class="post-next" href="<?php the_permalink(); ?>">
        <div class="post-nav-wrap" style="background: linear-gradient(0deg,rgba(52,62,71,0.6),rgba(52,62,71,0.3)),url('<?php the_post_thumbnail_url(); ?>');">
            <h3 class="post-nav-title"><?php the_title(); ?></h3>
            <div class="post-nav">Next</div>					
        </div></a>
    <?php
                wp_reset_postdata();
            } //end foreach
        } // end if
    ?>
</div>

[Alan]

Good point about the classes, I guess my general concern was that there was going to be so much change in the code (nevermind the (potentially) huge impact of changing how the interlinking works throughout the site i.e. “link juice” flow change) and I wanted to keep it to just the interlinking change without all the other potential variables. I did learn a lot about building blocks with GenerateBlocks in this process, though! I just couldn’t get it to quite replicate aesthetically what I have on the live site currently (but I got it very close) 🙂

So, I can’t believe the only difference from what I can tell in that code is that ‘get_previous_post(false)’ changed to
‘get_previous_post(true)’ (and the other similar one). I can’t find anything else different, referring to looking only within categories, etc. I guess it is some kind of default behavior of $prevPost and $nextPost? Either way, gosh, I’ve really got to learn PHP. Sigh…

Thank you, as always, for the solution to this. The new code appears to work exactly as I wanted with that one small change. I will just keep using the code for consistency’s sake, but good to know about the new block features within Elements. Very powerful, I can tell.

Thanks again, Ying!

Alan

[Ying]

Here’s more info about the WP function get_previous_post(): https://developer.wordpress.org/reference/functions/get_previous_post/

get_previous_post(true) is a shortened version of get_previous_post($in_same_term = true, $excluded_terms = '', $taxonomy = 'category').

[Alan]

Ahh, I follow now. Thank you, Ying! Really appreciate it.

[Ying]

You are welcome Alan  🙂

[Author]

Posts