Post navigation on the single entry page.

Viewing 14 posts - 1 through 14 (of 14 total)

September 8, 2013 at 8:40 pm September 8, 2013 #16272

rgomez
Participant

Hi there,

I’m trying to find why the “previous post” “next post” is not shown on the single page template. As far as I can see the code is there, and it doesn’t matter if I move or add another one somewhere else inside the template, it is still not shown.

I need to be able to navigate between the posts in chronological order within the same posts.

Any idea?

The page I’m working on:
http://photoblog.rodrigogomez.com.mx/

Thanks in advance,

Rodrigo Gómez

September 20, 2013 at 9:05 am September 20, 2013 #16389

rgomez
Participant

So, no idea of how to solve this?

September 20, 2013 at 2:31 pm September 20, 2013 #16394

Daniel Tara
Keymaster

I don’t know what code you think should be showing these links but the Pinboard theme has no such feature.

September 20, 2013 at 9:05 pm September 20, 2013 #16398

rgomez
Participant

Hello Daniel,

I’m thinking about this WP function:
…

Ok, now that I look up, I was confusing the wp_link_pages with the post navigation.

So, I’ll try adding the posts_nav_link() and see if I can get a “previous post” “next post” to show in the single entry page template.

September 20, 2013 at 9:08 pm September 20, 2013 #16399

rgomez
Participant

Ok, it works as expected with that other function. I got confused with the function name. I’m sorry. Now I just need to code this up to display properly formated.

Thanks for your help.
October 9, 2013 at 11:30 am October 9, 2013 #16690

joan w
Participant
I just looked at your website and posts. have to say you have them beautifully displayed.

i see you added the next / previous posts by title top and bottom on your single posts.

my question: how did you do this? is there a plugin or coding to achieve this, and what are they?

I would appreciate it. thanks, joan
- This reply was modified 11 years, 2 months ago by joan w.
October 9, 2013 at 12:36 pm October 9, 2013 #16694

rgomez
Participant

Hello Joan,

Thanks for your kind comments.

About the Next/Previous links in each post, it’s somewhat easy: you just need to modify the single.php file and add the previous_post_link/next_post_link where you want it.

Here is the code I added:

<div class=”nav-links”>
<div class=”nav-links-left”><?php previous_post_link(‘<h6>« %link</h6>’); ?></div>
<div class=”nav-links-right”><?php next_post_link(‘<h6>%link »</h6>’); ?></div>
</div>

I have this in two parts, before the entry-header and after the .entry div.

HTH,

Rodrigo
October 9, 2013 at 5:40 pm October 9, 2013 #16702

joan w
Participant
oh thanks rodigo for this.

ok i’ve located the single.php file 🙂 that’s step one.

i will try your steps tomorrow.

thanks a mil, joan
- This reply was modified 11 years, 2 months ago by joan w.
October 13, 2013 at 10:57 am October 13, 2013 #16731

joan w
Participant

i’m not exactly sure where to put these in the script. i put the whole code you wrote there after </div><!– .entry –>

<div class=”nav-links”>
<div class=”nav-links-left”><?php previous_post_link(‘<h6>« %link</h6>’); ?></div>
<div class=”nav-links-right”><?php next_post_link(‘<h6>%link »</h6>’); ?></div>
</div>

and before <?php comments_template(); ?>

– for the bottom navigation, and clicked saved. it didnt work for me. i took it out again to restore it.

and for the top one..i didnt try as i’m not sure exactly where to put it. here ? <header class=”entry-header”> or here ? </header><!– .entry-header –>

sorry to trouble you. i only want to add a navigation to either the top or to the bottom, not both.

or is the code you wrote there to be divided into two?

<div class=”nav-links”>
<div class=”nav-links-left”><?php previous_post_link(‘<h6>« %link</h6>’); ?></div>

to be placed here the top? and –

<div class=”nav-links-right”><?php next_post_link(‘<h6>%link »</h6>’); ?></div>
</div>

placed at the bottom ?

i dont think you meant that though – i think what you wrote meant for me to copy it twice if i wanted a navigation for both the top and bottom, yes?

thanks, joan
October 14, 2013 at 11:01 am October 14, 2013 #16740

rgomez
Participant
Hello Joan,

Yes, you need both the previous and post links (previous_post_link and next_post_link calls) to be able to move forward/backward. And if you want to put this above and below your entry then you need to put the code twice. If you only want it at the bottom then just put it at the bottom.

Here is the code as I have it right now. Note that you will need to use your own CSS code to show this according to your site design. I added the 3 css classes that you see in the code: nav-links, nav-links-left and nav-links-right.
```
		</footer>
	</div>
	<div class="nav-links-bottom">
		<div class="nav-links-left"><?php previous_post_link('<h4>&laquo; %link</h4>'); ?></div>
		<div class="nav-links-right"><?php next_post_link('<h4>%link &raquo;</h4>'); ?></div>
	</div>
	<div class="clear"></div>
	<?php comments_template(); ?>
</article>
```
October 15, 2013 at 9:53 am October 15, 2013 #16759

joan w
Participant

thanks Rodrigo for your help.

joan
October 20, 2013 at 4:15 pm October 20, 2013 #16819

LizzieBG
Participant
Hey Rodrigo, I can’t thank you enough for raising this topic. I have used your solution on the single post page of my website http://www.sweetapricots.com right at the top of the page, but I’d like to be able to have them show on the left and right of the page. How can I format that? Your website looks utterly beautiful and I’d love to be able to format the previous/next just as you have.

Any ideas would be extremely welcome, but I don’t want to take up too much of your time.

Thanks in advance

Lizzie
- This reply was modified 11 years, 1 month ago by LizzieBG. Reason: Actually I've found a solution, but thanks anyway
October 21, 2013 at 9:30 am October 21, 2013 #16824

rgomez
Participant
Hello Lizzie,

I’m glad you found a solution. In anycase, I’m pasting here the CSS code for the nav links. It works with the class names used in the previous code I posted.
```
.nav-links {
  height: 20px;
  padding-top: 9px;
  max-width: 85%;
  margin: auto auto;
}

.nav-links-bottom {
  max-width: 85%;
  padding-top: 18px;
  margin: auto auto;
}

.nav-links-left {
  float: left;
}

.nav-links-right {
  float: right;
}
```
This is “custom made” for the changes I made to the template, so it might not look exactly as in my site in any default installation of Pinboard, but it at least should be a starting point.

Regards,

Rodrigo Gómez
October 21, 2013 at 11:14 am October 21, 2013 #16825

LizzieBG
Participant

Hi Rodrigo

Thank so much for your full reply. Actually I like the look of your solution better than the one I found, so I’m very grateful to you.

Best of luck from Lizzie, here in the south of France!