[Resolved] Creating a navigation shortcode that runs outside the loop

[Author]

Posts

[rusty]

I'm trying to create a simple next/previous shortcode that I can place inside a content template to display the nav in the middle of the page.

This code works perfectly in single.php:

echo get_previous_post_link( '%link', '%title', true, '', 'home-category' );
echo get_next_post_link( '%link', '%title', true, '', 'home-category' );

But it displays at the bottom of the page and I need it in the middle of the page. I thought I could create a simple shortcode for it and then just drop it in my content template as needed, but it returns nothing. If I use do_shortcode(); in my single.php file and it works fine, so I know the shortcode is returning correctly.

add_shortcode( 'next', 'next_shortcode' );
add_shortcode( 'prev', 'prev_shortcode' );

function next_shortcode($atts) {
    return get_next_post_link( '%link', '%title', true, '', 'home-category' ); 
    }
function prev_shortcode($atts) {
    return get_previous_post_link( '%link', '%title', true, '', 'home-category' );
    }

I think this has something to do with the shortcode running outside the loop, but I haven't been able to find an answer about how to make a shortcode that will run in a content template outside the loop.

[Minesh Supporter Languages: English (English ) Timezone: Asia/Kolkata (GMT+05:30)]

Hello. Thank you for contacting the Toolset support.

Could you please share your template file code and where exactly you would like to place the pagination shortocde?

[rusty]

Hi Minesh,

The code from my content template is below. Shortcodes are on line 4 [prev][next].

[wpv-post-body view_template="section-options-top"]
	<div class="grid-x text-center">
		<div class="cell">
			[prev][next]
  		</div>
	</div>

<div class="grid-x">
<div class="cell medium-6">
  <div class="grid-x align-middle text-center left-cross-promo" style="background-image:url('[types field='left-cross-promotion-photo' output='raw'][/types]')">
  	<div class="cell">
      [wpv-conditional if="( $(wpcf-left-category) eq '1' )"]<h2 class="essential[wpv-conditional if="( $(wpcf-text-shadow) eq '1' )"] text-shadow[/wpv-conditional]">essential</h2>[/wpv-conditional]
      [wpv-conditional if="( $(wpcf-left-category) eq '2' )"]<h2 class="rising[wpv-conditional if="( $(wpcf-text-shadow) eq '1' )"] text-shadow[/wpv-conditional]">rising</h2>[/wpv-conditional]
      [wpv-conditional if="( $(wpcf-left-category) eq '3' )"]<h2 class="original[wpv-conditional if="( $(wpcf-text-shadow) eq '1' )"] text-shadow[/wpv-conditional]">original</h2>[/wpv-conditional]
          <h3[wpv-conditional if="( $(wpcf-text-shadow) eq '1' )"] class="text-shadow"[/wpv-conditional]>[types field='left-headline'][/types]</h3>
      <a class="button white" href="[types field='left-button-url' output='raw'][/types]">[types field='left-button-text' output='raw'][/types]</a>
    </div>
  </div>
</div>

<div class="cell medium-6">
  <div class="grid-x align-middle text-center right-cross-promo" style="background-image:url('[types field='right-cross-promotion-photo' output='raw'][/types]')">
    <div class="cell">
            [wpv-conditional if="( $(wpcf-right-category) eq '1' )"]<h2 class="essential[wpv-conditional if="( $(wpcf-text-shadow) eq '1' )"] text-shadow[/wpv-conditional]">essential</h2>[/wpv-conditional]
      [wpv-conditional if="( $(wpcf-right-category) eq '2' )"]<h2 class="rising[wpv-conditional if="( $(wpcf-text-shadow) eq '1' )"] text-shadow[/wpv-conditional]">rising</h2>[/wpv-conditional]
      [wpv-conditional if="( $(wpcf-right-category) eq '3' )"]<h2 class="original[wpv-conditional if="( $(wpcf-text-shadow) eq '1' )"] text-shadow[/wpv-conditional]">original</h2>[/wpv-conditional]
          <h3[wpv-conditional if="( $(wpcf-text-shadow) eq '1' )"] class="text-shadow"[/wpv-conditional]>[types field='right-headline'][/types]</h3>
      <a class="button white" href="[types field='right-button-url' output='raw'][/types]">[types field='right-button-text' output='raw'][/types]</a>
      </div>
  </div>
</div>
  
</div>
[wpv-post-body view_template="section-options-bottom"]

[Minesh Supporter Languages: English (English ) Timezone: Asia/Kolkata (GMT+05:30)]

Well - do you know that we also offer pagination shortcodes for previous and next.

Please check following shortcodes:
=> https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-post-previous-link
=> https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-post-next-link

Does this help?

Also, I would like to know you build this content template for post or page or for any other entity?

[rusty]

Hello Minesh,

The default previous and next shortcodes don't work the way I need them to work, which is why I'm trying to make my own. Allow me to explain...

I've created a custom post type called "Components". Components are modular page elements that stack together to make up a page. The end users can create a new component and select a layout (for example, "background image with centered text" or "left image with right text" or "right image with left text", etc.) There is a content template for each layout. Then after they've created all the components for a page, they place a view shortcode on a page with the IDs of the components that they want to display to make up the page. This way every bit of the page is easily editable and re-useable. A single component (for example a cross promotion banner) can be re-used on several pages and all instances can be edited at once. Also, building new pages is a simple matter of deciding which component layouts you want in what order, filling in the content for each one and dropping a shortcode on a page. This system works very well.

The default shortcodes you mention above output a link to the next and previous posts by ID. This is a problem because the next post ID is the next component on the page, not the next page full of components in the taxonomy. So for example, if I have a page made up of 6 components in the Home Category "Essential", I want the next>> link to go to the next page in the category "Essential", not the next component.

The shortcode I'm trying to make works perfectly for this purpose when I place it in single.php file. The last argument is the category that I want the next item from (home-category is the taxonomy slug). However, If I place it in the php file, the <<prev next>> shows up at the bottom of the page. I need to place it in the content template of a certain component layout that goes in the middle of the page, which is why I need to get the shortcode working.

I hope that adds some clarity to the situation. Thank you.

[Minesh Supporter Languages: English (English ) Timezone: Asia/Kolkata (GMT+05:30)]

Ok - I got your point and thank you for sharing all required information to understand your point.

View's pagination will be attached to post type to which it attached so it will not override the pagination shortocodes.

You can check with the following Doc to know how view's pagination works:
=> https://toolset.com/documentation/user-guides/views-pagination/

So - this may needs custom programming but still I would like to give one try to check your issue on your install that will give me freedom to make few tests and I may be able to provide you solution but if no solution found as I admit before that this needs custom programming which is beyond the scope of our support policy and at that moment you need to contact our certified partners.

But let me give try first:
- Could you please share problem URL where I can see the issue and which view you are using.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I would additionally need your permission to de- and re-activate Plugins and the Theme, and to change configurations on the site. This is also a reason the backup is really important. If you agree to this, please use the form fields I have enabled below to provide temporary access details (wp-admin and FTP).

I have set the next reply to private which means only you and I have access to it.

[rusty]

This issue isn't really resolved, but I found a workaround.

I simply created a new CPT and made it a child post. I then created a new view for the child post type with a post relationship filter (Select posts that are children of the Post where this View is shown), and placed the view along with the navigation code that works in the php file.