WP Theme Lesson #6b: Page-Link Listing

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:

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
  • and

  • 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=

    Pages

    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.

    Pages

    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
    Source: www.wpdesigner.com

    Comments

    Post a Comment