Custom Post Navigation Previous and Next Post Code/ Dynamic Content

lanxalot · May 23, 2023, 9:52pm

Hey folks, I need to build some custom previous and next post links. They are for custom posts (Visual portfolio galleries). The built in post navigation element works fine, but I have to take some styling further than I can with the built in elements. Can anyone point me in the right direction as to what dynamic content/ code I need to add? Any help will be very much appreciated

Patric · May 24, 2023, 6:51am

This is how I did it…

I made a container (Beitragsnavigation), put a block (Links) into it, and under the block I made 2 code elements (Pfeil, Titel+Beitragsbild).

Nav1

The block is defined as a grid with the following settings:

In the first code element I put a code to show a chevron (left) and added the link to the previous post with this code:

<?php
$prev_post = get_adjacent_post();
if ( ! empty( $prev_post ) ): ?>
<a href="<?php echo get_permalink( $prev_post->ID ); ?>"> <span class="fa-solid fa-circle-chevron-left"></a><a href="<?php echo get_permalink( $prev_post->ID ); ?>">
		
	</a>
<?php
endif;
?>

In the second code element, I put the code to show the title of the post together with the post thumbnail with this code:

<?php
$prev_post = get_adjacent_post();
if ( ! empty( $prev_post ) ): ?>
<a href="<?php echo get_permalink( $prev_post->ID ); ?>">FRÜHERE CHOCHETE<br>
    <?PHP echo wp_trim_words( $prev_post->post_title, 6 );
    echo "<br>".get_the_post_thumbnail( $prev_post->ID, 'thumbnail',array( 'class' => 'alignleft' ) );
  ?></br>
	</a>
<?php
endif;
?>

For the second code element, I added some custom CSS to show a shadow and keep the thumbnail at 80px height:

Nav3

My navigation for the previous post now looks like this:

Nav4

Now for the next post, you can use the same code put replace in both code elements the line

$prev_post = get_adjacent_post();

with this

$prev_post = get_adjacent_post(false,"", false);

The structure for the next post would be this way, so that the arrow is right from the title & image

Nav5

and the grid settings would also be the other way around:

The code for the chevron right is this

<span class="fa-solid fa-circle-chevron-right"></a>

Cheers

Patric

lanxalot · May 24, 2023, 9:29am

Thank you very much Patric, I will try this later. Have a great day!

Patric · May 24, 2023, 9:40am

It is also worthwhile to read the details of the used Wordpress function “get_adjacent_post” as there are a few very usable options like whether post should be in the same taxonomy term or not:

Cheers

Patric

lanxalot · May 24, 2023, 10:04am

Thanks Patric! I am wondering if there is a query I can add directly into the link settings in Bricks. Please see screenshot below. I will read up on get_adjacent_post() now. The help is really appreciated!

Patric · May 24, 2023, 11:39am

OK, do this:

add this code into a code snippet or in functions.php

function get_prev_post() {
$prev_post = get_adjacent_post();
if ( ! empty( $prev_post ) ):
 return get_permalink( $prev_post->ID );
endif;	
}

Then you can call the function in your button like this:

lanxalot · May 24, 2023, 12:13pm

Cool, that’s awesome! And I just replace _prev for next or $prev for $next and repeat for next post. Looks great! I won’t get a chance now until next week to implement it as we are off on holiday this afternoon for a few days. I will try next week. Thanks again for all your help! It has made my day, which happens to be my birthday!

Patric · May 24, 2023, 12:17pm

Happy Birthday, Sir Lanxalot.

Patric · May 24, 2023, 12:22pm

Hi

get_adjacent_post(false,““,false)

will get the next post.

Patric · May 25, 2023, 9:55am

Hi

here comes version 2.

I made a new version that loads the previous and the next posts’ data, so you don’t need to have two code snippets anymore.

Also, you can now give an argument to the function, the argument being what post data you want to get:

pp_id = the ID of the previous post
pp_title = the title of the previous post
pp_thumb = the thumbnail image of the previous post
pp_link = the link to the previous post
np_id = the ID of the next post
np_title = the title of the next post
np_thumb = the thumbnail image of the next post
np_link = the link to the next post

How to use it in the Bricks editor:

For example, if you want to make a button that links to the previous post, enter the code

{echo:get_prev_and_next_post(‘pp_link’)}

into the Dynamic Data field:

If you want to show the thumbnail of the next post, enter this code

{echo:get_prev_and_next_post(‘np_thumb’)}
and
{echo:get_prev_and_next_post(‘np_link’)}

into these field in the image element:

If you want to show the title of the previous post in a heading element, enter this code

{echo:get_prev_and_next_post(‘pp_title’)}
and
{echo:get_prev_and_next_post(‘pp_link’)}

into these field in the heading element:

Dyn5

An icon with a link to the previous post would look like this:

Dyn4

I think you get how it works…

Here is the new code:

<?php 
function get_prev_and_next_post($arg) {
$prev_post = get_adjacent_post();
$next_post = get_adjacent_post(false,"", false);
if ( ! empty( $prev_post ) ):
switch ($arg) {
    case "pp_id": $returnarg = $prev_post->ID; break;
    case "pp_title": $returnarg = wp_trim_words( $prev_post->post_title, 6 ); break;
    case "pp_thumb": $returnarg = get_the_post_thumbnail_url( $prev_post->ID, 'thumbnail'); break;
    case "pp_link": $returnarg = get_permalink( $prev_post->ID ); break;
    }
endif;
if ( ! empty( $next_post ) ):
switch ($arg) {
    case "np_id": $returnarg = $next_post->ID; break;
    case "np_title": $returnarg = wp_trim_words( $next_post->post_title, 6 ); break;
    case "np_thumb": $returnarg = get_the_post_thumbnail_url( $next_post->ID, 'thumbnail'); break;
    case "np_link": $returnarg = get_permalink( $next_post->ID ); break;
    }
endif;  
   if ( ! empty( $returnarg ) ):
  return $returnarg;
  endif;
}

Cheers

Patric

lanxalot · May 25, 2023, 10:30am

Thank you!!! Had a great day!

lanxalot · May 25, 2023, 10:32am

Amazing! Thanks so much for this!!! We are just off to a festival for the weekend, so I will get into all this next week. I hope you have a wonderful rest of your week and a brilliant bank holiday weekend! Cheers Patric!!!

Patric · May 25, 2023, 10:39am

No problem.

I actually use this code now myself in my page as it is better than the code I had previously, that’s why I invested some time into additional code.

Cheers

Patric

Patric · May 26, 2023, 6:24am

By the way, if you just need the link to the previous / next post, then this one-liner directly in Bricks also works:

Link1

Use

{echo:get_adjacent_post_link(false,"", false)}

for the next post link:

Link2

Cheers

Patric

mizzinc · August 31, 2024, 5:45am

This is amazing - but I have no idea why it isn’t outputting?

Ive whitelisted ‘get_prev_and_next_post’ in add_filter( ‘bricks/code/echo_function_names’, function() {…