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 
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).
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:
My navigation for the previous post now looks like this:
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
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
2 Likes
Thank you very much Patric, I will try this later. Have a great day!
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
1 Like
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!
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:
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!
Happy Birthday, Sir Lanxalot.
1 Like
Hi
get_adjacent_post(false,““,false)
will get the next post.
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:
An icon with a link to the previous post would look like this:
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
Thank you!!! Had a great day! 
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!!! 
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
By the way, if you just need the link to the previous / next post, then this one-liner directly in Bricks also works:
Use
{echo:get_adjacent_post_link(false,"", false)}
for the next post link:
Cheers
Patric
1 Like