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

LawBlog WP Theme Review

Regardless of which area of law you practice, it’s imperative that you have proper online representation. You need to give your customers a feeling...

The Deeper Meaning and Purpose Behind Shapes in Web & Graphic Design

Sometimes in web design, a clean website is often the best choice for certain clients. Instead of elaborate backgrounds or too many aesthetic choices,...

How to Easily Design a Website Without Coding

Are you looking to build a website and you don’t know how to code? Online web design services are helpful to create website templates...

The importance of SSL Certificates as part of a web hosting package

Building a successful business requires trust, and gaining trust can be difficult especially when you run a business where it is taken for granted...

How Can Domain Name Extensions Influence Your Brand Name?

Are domain name extensions important in naming your brand? The shortest answer is "Yes." In today's online world, it is the first thing that...

Recent comments