WP Theme Lesson #5e: Posts Nav Link
- Filed under: Tutorials
At the bottom of most WordPress blogs, there’s a Next Page or Previous Page link. You call for those links by using the posts_nav_link() function of the WordPress template system. In this lesson, there’s only one step!
Do I really have to tell you to open Xampp Control again, theme folder, browser, and index.php file again?
Step 1: (and only step)
Add the following codes between <?php endwhile; ?> and <?php else : ?>
<div class=”navigation”>
<?php posts_nav_link(); ?>
</div>
Notice the spacing in the screen-shot. I always use tab spacing for organization.
<div class=”navigation”> - start an invisible box named navigation to wrap around your Next and Previous links area.
<?php - start PHP
posts_nav_link() - call for the Next and Previous links.
; - stop calling for them.
?> - end PHP
</div> - close the invisible box named navigation.
Here’s what it looks like:
Save index.php, then refresh your browser to see your own Next or Previous link. By default, if you don’t have more than ten posts, nothing will appear. If you don’t have more than ten posts, but still would like to see it, login into the administration panel, select Options > Reading, then set it to one less than the amount of posts that you have. For example, if you have six posts, set it to five.
How to customize posts_nav_link():
Just like some of the functions in the postmetadata lesson, you can give this function three sets of… anything that you want to be displayed in between, before, and after the Next and Previous links. It looks like this:
<?php posts_nav_link(’in between’,'before’,'after’); ?>
The first set of single quotes is for holding anything that you want to appear between the Next and Previous links. The second set of single quotes is for holding anything you want to come before it. The third set is for holding anything that comes after it.
Here’s an example of a customized posts_nav_link():
Follow this WordPress Theme Tutorial Series from the beginning.
why the lesson take so many days?
check it out this lesson on how to create wordpress theme in 5 minute…
bothack.wordpress.com
That 5-minute tutorial doesn’t show you much. My tutorial series is for users that are not web-savvy, but want to understand WordPress themes.
I for one like the pace of the lessons. Very thorough and it sinks in. For the first time, I’m actually beginning to understand how Wordpress works. Thanks man!
I doubt anyone would be able to learn to create a basic wordpress theme in 5 minutes??
Small Potato’s tutorial is the RIGHT one for beginners.
Thanks for this awesome tutorial. I have tried many others, but I never really understood what was going on. Yours on the other hand is well written for those who are beginners with Wordpress. I can’t wait to get through the rest of the tutorial and put together my very own unique theme. Once again, thank you.
[…] Template Continues #5 The Loop #5b The Content #5c Postmetadata #5d Else, Post ID, Link Title #5e Posts Nav Link #6 Sidebar (and Categories) #6b Page-Link Listing (wp_list_pages) #6cGet Archives and Links #6d […]
Thank You!
Finally a tutorial that goes through the basics and steadily forward not jumping from one conclusion to another. I have been trying 3 other tutorials but only yours delivers knowledge useful for creating something oneself at the same time understanding what there is to be done. Keep up the GREAT work.
Cheers,
Lukasz
I’m not going to bother to look at the five minute ‘tutorial’. This one is perfect. Thanks, Small Potato.
As usual, thanks for that tutorial, that rocks !!!
Just another question: how can we change the text if I don’t want “next page” but “page 2″ for example ? Thanks for your help !!
If you want to customize the text, look up wordpress.org on how to use next_post_link() and previous_post_link().
There’s also a pagination plugin called WP-Pagenavi that will output numbers instead of text for you.
Thanks SP, I’ll look at it !!!
SP, How do you change the “next page” into an image?
Many thanx for this tut!!:D
Chris,
You’d have to use the next_post() and previous() post function. Then you need to learn how to customize them.
I prefer to learn things step by step. I am familiar with the Wordpress language, but this tutorial explains everything thoroughly.
Thanks,but i have a question,the font page only have one post, only one. the code of this lesson can be use or not ?
i am a chinese, my english is poor.
^_^
You have only one post because you haven’t written more posts for your blog. You need more than one post for this code to show up.
Please re-read this lesson for the full explanation.
hehe ..
I Know…
thx
I am not seeming to get the next page link. Even when i have moved into the next lesson and pasted the index-2007-march-02.txt over the code I have written.
I love this tutorial btw… thanks so much!
i’m an idiot, n/m. I did not read the lesson properly. The lack of 10 posts was my problem.
Thanks!
[…] dai un’occhiata a questa lezione sul comando posts nav link. Può esserti utile per controllare il codice e personalizzare il tuo link. Saluti […]
I got a problem with the “previous” link in my blog (http://www.centrostudilaruna.it/huginnemuninn). I don’t know why this link doesn’t work. May it depend on the URL rewrite?
It doesn’t look like a url problem because your single pages are working fine with the url rewrite.
Hi,
great tutorial.
But I’ve got a question … unfortunately I’m not very php-savvy, and I’m stuck concerning those posts nav links. I am working on a theme with multiple loops and I want the nav links to go only to posts of a certain category. Any idea how I could achieve that?
I’d be really grateful!
No idea
Did WP 2.2 break the
for the index.php files? It doesn’t seem to work. The outputted html only comes up with the DIV container, but no content, i.e., the navigation links. Any thoughts about that?
Figured it out. It’s the Adhesive plug-in that I’ve been using. Strange that it should do that.
I like thorough and step-by-step tutorials.
Thanks so much for this tutorials… I thought Wordpress is so complicated, but with your lessons i can do all these things….
but at this point, i’ve got a problem…. My “next page” is not displayed….
I have the code exactly as yours… but it’s not there…..
what can be the problem?
Do you have more than 10 posts on your test blog?
ok, i gotch yeah….
thanks man……
[…] 翻译自：WP Theme Lesson #5e: Posts Nav Link […]
Thanks for the fantastic tutorial Small Potato, I’ve tried a couple before and got the template I wanted but the downside was I didn’t properly understand what was going on behind the scenes which meant a lot of messy code which has been impossible to decifer a couple of months down the road when I want to mod the template.
I’m only up to this section at the moment (5e) but I’ve already got a good grasp of whats going on and it’s slotting into a css layout I built last night very nicely.
Might be a nice idea for the people not too confident with css to mention somewhere about css @import that you can drop into a stylesheet so they can tie in their exsisting site layout if they’re bolting the WP blog onto an exsisting static site.
Hi!
I have a problem with my Next Page>> link in my blog. It’s not working.. but I don’t know how to solve it.
It sends me to a page named index.php/page/2 but actually remains in the same page.
Do you think you can help me?
Thanks!
No, if you don’t show me the blog
. Bring it to the forums. I’ll see what’s wrong there.
Sorry :S
Thoght the blog was linked at my nickname..
I’ll post my problem to the forum anyway
Thank you!!
hei.. you know?
your tutorial is awesome!!
i have a question for you..
“posts_nav_link()” isn’t working in my wordpress ( i’m using ver 2.3.1)
but previous_post_link and next_post_link() are working,
would you like to tell me why?
there are three different sets of next and previous functions. i don’t remember which ones work for index and archive pages only, but i know for sure that posts_nav_link doesn’t work for single post pages.
Hey, I’m always getting an error when trying to customize my links for page navigation.
This is the code I have:
and the error:
Parse error: syntax error, unexpected ‘;’ in C:\xampp\htdocs\wordpress\wp-content\… on line 42
Line 42 being the one with that php code on.
Thanks, Jack
What are you doing exactly? If you need help, bring this to the forums…
its ready nice, i have worked with wp before, but thats my first time at designing themes, and its nice!
but i dont get it to work? i have putted
between endif and endwhile, because i cant get the else thing to work in the prevous part.
but it doesnt show anything next or first?
never mind!
its because i had not more than 10 pages! 
Regarding “”, I tried changing the texts “before” and “after” to “older” and “newer” respectively. It works, however the newer is on the left while the older is on the right.
How do I change it such that older posts “Older” will be on the left and newer posts “Newer” is on the right?
i know it’s confusing
switch those texts around
khairilz comment about using the 5 minute tutorial over at bothack.wordpress.com is stupid. I went over and checked it out and I threw up a little in my mouth.
Small Potato’s is much, much better even though he keeps telling me to use Xampp and Notepad. I prefer Wamp and Dreamweaver.
Now for the next lesson…
Your tutorial are very nice ! Those are helping me. . .
Thanx
hi sp,
i don’t like next page and previous page navigation.
I like to show page numbers for easy access. i used wp_link_pages() it is not working later i find out that this is for linking pages in single post.
could you help me how to setup navigation showing page numbers?
thanks.
You’ll need to install the WP-PageNavi plugin.
thanks sp for help…
Thanks for such a nice tutorial.
I would like to know about customizing the next and previous links. How did you customized, what is the code for what you have shown in the image there.
How did you put an image there before navigation links. Please write in details.
I feel really stupid.
I couldn’t work out why I wasn’t seeing the code. I had 4 posts, but still they were all displayed on the main page, and obviously no nav links.. then the penny dropped - I hadn’t written enough posts to have more than one page. so I changed the number of posts to display on the front page and hey presto there we go… your tutorials are fricking sick (I’m very late on reading them, but still).
Cant wait to see the end result
Hi,
Just dropped by this page and first would like to thank you for the extremely well written tutorial.
I think I’ve run into a bit of a problem and I wanted to clarify. When you drop in the code for the navigation, is it automatically supposed to work or is there some tutorial later that makes it work? Asking because when I click the ‘Previous Posts’ link, it gives me an error saying that there is no such page.
Thanks
Hi,
Sorry about my previous post, the reason it wasn’t working was because I changed my permalinks to display in a different manner. I guess I also have to put in a new .htaccess for those to work right. Not sure, but anyways all the rest works. Sorry for posting that in a hurry without checking
Thanks for the great tutorial
Hey how can I make my post nav links like these [+] <– open the image
Because i do have many pages i want to make my post nav link like these
hahahaha, I thought I was just the only one who used WAMP and DREAMWEAVER . . .congratulations for my IDOL
INCREDIBLE small POTATO (- ____ -)
hahahaha, I thought I was just the only one who used WAMP and DREAMWEAVER . . .congratulations to my IDOL
INCREDIBLE small POTATO (- ____ -) you really inspire me….
[…] Comment on WP Theme Lesson #5e: Posts Nav Link by jicoro […]