Sunday, June 22, 2008

WP Theme Lesson #6b: Page-Link Listing

By Sofhal Jamil   Posted at  5:46 AM   No comments

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(); ?>


wp-list-pages.gif


Save your file and refresh the browser. Here’s what it looks like:


wp-list-pages-listing.gif


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:


wp-list-pages-default.gif


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().


title-li.gif


Save file and refresh browser to see the change.


wp-list-pages-listing-2.gif


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.


add-depth3.gif


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.)


wp-list-pages-listing-3.gif


Follow this WordPress Theme Tutorial Series from the beginning.

About the Author

Nulla sagittis convallis arcu. Sed sed nunc. Curabitur consequat. Quisque metus enim, venenatis fermentum, mollis in, porta et, nibh. Duis vulputate elit in elit. Mauris dictum libero id justo.
View all posts by: BT9

0 comments:

Back to top ↑
Connect with Us

What they says

© 2013 Dongeng Sebelum Tidur. Distributed By Blogger Themes | WP Mythemeshop Converted by Bloggertheme9
Blogger templates. Proudly Powered by Blogger.