WP Theme Lesson #6b: Page-Link Listing
- Filed under: Tutorials
Now that you’re familiar with the structure of the Sidebar, we’ll continue working on the Sidebar with Page-link listing. After the regular Sidebar is complete. I’ll show you how to widgetize your Sidebar.
Add the following codes on top of the Categories block:
<?php wp_list_pages(); ?>
Save your file and refresh the browser. Here’s what it looks like:
By default, you have only one Page link, the About link. I added more pages and child-pages to my offline blog. That’s why I have four levels of Page links.
Go to View > Page Source to see that wp_list_pages() generated the whole structure and all codes for you. Here’s an example:
First, it wraps everything within a list item (LI). Second, it gives your listing a name, Pages. Third, it adds another unordered list (UL), under the Pages title, within the list item. Fourth, it nests each link within a set of <li> and </li> tags.
In the screen-shot above, notice that the “Pages” title for the listing doesn’t match the size of the “Categories” title for the Category-link listing.
How do you get it to match? Add ‘title_li=<h2>Pages</h2>’ to wp_list_pages().
Save file and refresh browser to see the change.
title_li is an attribute used to customize the look of the Page-link listing’s title. <h2>Pages</h2> is the value of the title_li attribute.
Further customization:
In my example, I have four levels of Page links. Some layouts/designs cannot handle that many levels of links within the Sidebar. To limit the amount of link levels to list, add the depth attribute to wp_list_pages() and set it to 3.
Notice, I added depth=3& instead of depth=3 only. The & sign is there to separate the depth and title_li attributes. (If you have only the About link, you will not notice any difference.)
Here’s the difference on for my listing: (Compare this screen-shot to the screen-shots above.)
Follow this WordPress Theme Tutorial Series from the beginning.
nice tutorial on setting part of the side bar up, still learning
When I refresh my web page after doing this lesson, I get the following error message:
Parse error: syntax error, unexpected ‘=’ in C:\xampplite\htdocs\wordpress\wp-content\themes\tutorial\index.php on line 63
I get this error in both IE and Firefox.
…and line 63 is the following:
Pages’); ?>
oops! That didn’t come out right. Anyway, it’s the line of code with the title_li= in it. I received that error message when I did the first part of the lesson, before I even added the depth attribute.
For some reason, it doesn’t like the equal sign in that line of code.
I figured it out. My bad..it was a typo.
Hi SP,
For some reason, the pages aren’t showing up at all on mine. I’m 99.99% certain I’ve typed exactly what you have, but it’s not there. And it doesn’t show up in view source… any ideas on what I might have missed or what bug would do this? I’m using WP 2.1.3
P.S. Thanks for a great tutorial!
Hi Small Potato,
How do you say that you only want the second level of pages.
I am trying to add the additional linmks to a siderbar, but only the links that have a specific parent.
Do you modify the depth=? How do you say you only want the second teir of navigation?
Thanks
Adrian
Adrian. You have to exclude all the pages, except for the one that you do want. Or, make wp_list_pages() display only the parent page that you do want. Modifying the depth is not enough.
Search through wordpress.org documentation for the details on how to do this because I’ve never done that before.
Hi Small Potato,
I have found the solution for showing JUST the child pages for a specific parent in the sidebar. It opens out loads of possibilities for running a comphresensive site through wordpress.
The code below is a simple copy and paste into the sidebar.php
“” ) {?>
This page has the following sub pages.
I would just like to thank you again for your excellent tutorial series - you have really got me off the ground with this!
Adrian
That last post didnt seem to work - hopefully this will…
This page has the following sub pages.
Hi,
I love this tutorial. It is amazing. I have a simple question how do I make the “Page-Link” Listing horizontal instead of vertical? I want to make it similar to the K2-Theme. A top navigation with the usual stuff: Home, About, Contact, etc.
Thanks,
Max
Max, search on Google for horizontal navigation menu.
Hey thanks,
I will do it with CSS display:inline…it should work!
display:inline will not work. use float:left for li and display: block for the a tag within the li.
Okay thanks…will try asap!
Okay it works so far…what if I don’t want the header Pages to be shown? But only my Pages?
What header pages? Like the About page? Then, don’t use wp_list_pages(). Create each menu item manually.
Right now I have something like this:
Pages
About Us Work Home
But I only need
About Us Work Home
(without the title: Pages)
I don’t want to have to create each menu-item myself. I would preffer to use wp_list_pages()
then leave title_li= empty. you’d end up with wp_list_pages(’depth=1&title_li=’)
Re. Adrian Kings post:
Adrian, please could you try reposting your code for only outputting the child pages related to a single parent page - I’ve been following these tutorials with this as my main aim! Would appreciate if you or Small Potato could advise,
Many thanks
I am also looking for the best way to display only child pages for a parent page in a separate part of the page design.
Looks like something went funky with the code that was posted. If anyone can link to txt file or a theme that does this we can reverse engineer it.
Graeme - Look through the WordPress.org Codex. It has extensive docs on WordPress functions. I’m sure you’ll find your answer there.
Thanks, once I work it out I’ll comment back if it’s a quick line of code
[…] #5c Postmetadata #5d Else, Post ID, Link Title #5e Posts Nav Link #6 Sidebar (and Categories) #6b Page-Link Listing (wp_list_pages) #6c Get Archives and Links #6d Search Form and Calendar #6e Widgetizing Sidebar #7 Footer #8 How to […]
Just wondering if any of you guys know how to limit the number of recent updates that show on the side bar?? all help is extremely appricated
Recent posts or recent updates? If you’re using the Recent Posts widget, you can change the number of recent posts to show.
ok code aint showing here
Martin - Please post your question at the forums. You can post codes there. Thanks.
ok thank man
Hi, you have great tutorials! I have a question: First of all, when I add ‘title_li=Pages’ to wp_list_pages() I get “Parse error: syntax error, unexpected ‘=’ in C:\Xampp\xampplite\htdocs\wordpress\… on line 31″ Now that’s strange but not so terrible. What I really want to know is what to do if I want to list my pages but without the title saying Pages above it. I actually want to embedd it in my main menu. Thanks in advance!
title_li=Pages is the wrong way to add a title. please re-read the tutorial. to list page links without a title, skip the step that adds add title_li= to wp_list_pages, but leave the value empty, nothing after the equal sign
Hi, i don’t know if you are going to read this, i’m a little late, but i have a question: when you pass atributes to a function you use the ‘&’ to separate them, right? the problem comes when you need to use a ’special character’ ( i´m argentinian, and i frecuently use lots of latin characters). I´d normaly use the ‘friendly code’ or the ‘numerical code’. for example, here we use the tilded vowels (á, é, Ã, ó, ú), but i can´t type them directly into the code, i need to use something like this: ‘&aacuote;’ or ‘&eacuote;’. the thing is than if I write a word with one of those characters, that word would be cutted front the very place where that character is. E.g. the word ‘páginas’ (pages) would only show ‘p’.
i believe this is because it takes that ‘&’ as the separation among two atributes. Is this something that wordpress developers past aside? what do you think? have you ran into this problem?
i have no clue. some characters are interpreted as codes and some aren’t.
I’m just wondering, is there a way to add a ‘home’ button to the pages list?
yep, do it manually. create a regular link nesting within LI tags. place it right before wp_list_pages and make sure wp_list_pages has title_li empty. if you don’t know what referring to, look up wp_list_pages on wordpress.org
ah, ok… that works great!
if anyone else is doint what I am doing I would suggest using
that way it will work on anyones blog.
Ah, the code doesn’t show up… here it is without the php tags.
bloginfo(’url’);
Hey Guys,
I have a Question…..
Is there any way that I can use an Image instead of
“title_li=Pages”?
If Yes Please Revert..
[…] #5c Postmetadata #5d Else, Post ID, Link Title #5e Posts Nav Link #6 Sidebar (and Categories) #6b Page-Link Listing (wp_list_pages) #6c Get Archives and Links #6d Search Form and Calendar #6e Widgetizing Sidebar #7 Footer #8 How to […]
great tutorial so far im getting the haqng of the meaning of things, thought the side bar would be alot harder.
your blog is cool,i like it very much
and your article is useful