Home Tutorials WP Theme Lesson #6b: Page-Link Listing

WP Theme Lesson #6b: Page-Link Listing

Author

Date

Updated on

Category

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 widgetized your Sidebar.

Add the following codes on top of the Categories block:

<?php wp_list_pages(); ?>

wp-list-pages

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

wp-list-pages-listing

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

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

Save the file and refresh the browser to see the change.

wp-list-pages-listing-2

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

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

Follow this WordPress Theme Tutorial Series from the beginning.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Recent posts

5 WordPress Plugins to Increase Your Website Speed

 And if you’re an online entrepreneur, you probably know that making people wait is bad for your eCommerce business too — really bad.I mean,...

How to Show Only Images that the User Has Uploaded in WordPress

When using WordPress with multiple authors, many things need to be taken into consideration. The default permissions system leaves much to be desired, and...

Oxygen Builder Review

Free from all sorts of coding hassles and an abundance of options that cater to the users’ needs, Oxygen 2.0 is probably the best...

Basic Guide to Online Backup

A Basic Guide to Online Backup You may have heard of it, know you need it, but what exactly is it? Online backup is the...

Web Hosting Hub Review

How did it begin? Based in Virginia Beach, Web hosting hub has been on the market since 2001. If it were not for Web Hosting...

Recent comments