[Resolved] Echo pagination in custom shortcode

[Author]

Posts

[Tiago Valente]

I am trying to: place previous and next CPT inside single view.

Link to a page where the issue can be seen:

I expected to see: the previous and next post buttons on the place that was defined.

Instead, I got: previous and next post buttons on the start of the page, just below the logo.

This is the code inside functions.php:

function pagination() {
    echo '<div class="pagination-cpt"';
	echo '<div class="previous-post">';
	previous_post_link();
		echo '</div>';
	 echo '<div class="next-post">';
	next_post_link();
		echo '</div>';
	echo '</div>';
}
add_shortcode( 'pagination', 'pagination' );

I placed the [pagination] shortcode inside the Toolset layouts cell (which is at the bottom of the page).

See the screenshot.
It places the previous and next buttons at the start of the page, just below the logo. Thew the HTML you can see that it's placed at the beginning of the page instead going inside the container.

How can i solve this issue?

thanks

[Christian Cox]

Hi, check the documentation for WordPress Shortcodes: https://codex.wordpress.org/Shortcode_API

You shouldn't call echo in a shortcode function. Instead, you should build a string by concatenation, then return that string. Something like this:

function pagination_function() {
  $pg  = '';
  $pg .= '<div class="pagination-cpt">';
  $pg .= '<div class="previous-post">';
  $pg .= get_previous_post_link();
  $pg .= '</div>';
  $pg .= '<div class="next-post">';
  $pg .= get_next_post_link();
  $pg .= '</div>';
  $pg .= '</div>';
  
  return $pg;
}
add_shortcode( 'pagination', 'pagination_function' );

[Tiago Valente]

Always learning.
Thanks Christian, that worked like a charm!