WordPress: Dynamic Sub-Page Navigation

The more and more I study the WordPress architecture, the more and more convinced I become that WordPress is a great choice for use as a feature rich Content Management System (CMS). Basically, WordPress can be used, not only as a blog platform, but as software to manage the content of any website, with or without a blog. Because WP added the ability to use “Pages” to hold relatively static content, and because WP includes functions to call and display the content of those pages just about any way you can think of, all it takes is a good WordPress theme to get the job done.

But where WordPress lacks as a CMS is the ability to further exploit the sub-page system. Not so much in their use, but in their application to the actual website design.

However, this plugin did wonders for people looking to take advantage of the hierarchal structure of pages and sub-pages by allowing only the “parent” pages to be displayed on the homepage. And if a “parent” page has children, and that page’s link is clicked, then the child pages will “fold” down, displaying “deeper” options (much like the features of the more mainline CMS out there).

But There’s a Problem

I’m not here to just give props to a cool plugin. You see, I had a client who wanted the original “parent” list across the top of the page (just under the header image) and when one of the “parent” page links was clicked, he wanted the “sub-pages” to display as a list in the sidebar. As far as I could tell, there was no way to do that with the Fold Page List plugin. So, I went searching. I promise, if I could find the original website I got this from, I’d give a link. As it turns out, I can’t find it. Sorry :-)

First thing to do is just list your pages. Be sure to make it top-level only!

<?php wp_list_pages('title_li=&depth=1'); ?>

Then, I used the code I found (with a few modifications, I’m sure):

global $wp_query;

if( empty($wp_query->post->post_parent) ) {
$parent = $wp_query->post->ID;
} else {
$parent = $wp_query->post->post_parent;
} ?>
<?php if(wp_list_pages("title_li=&child_of=$parent&echo=0" )): ?>
<div id="submenu">
<?php wp_list_pages("title_li=&child_of=$parent" ); ?>
<?php endif; ?>

Without getting too technical, I’ll explain roughly what all that means.

if( empty($wp_query->post->post_parent) ) {
$parent = $wp_query->post->ID;
} else {
$parent = $wp_query->post->post_parent;

This code checks to see if the current page (the active page) as a parent. If it does NOT have a parent … it assigns the current page ID as the “parent”. If it DOES have a parent, it assigns the parent ID as the “parent”. The reason this is necessary is for top-level parents. If we simply used the parent ID to assign the “parent”, then if a top-level parent was active, the “parent” variable would be empty and we wouldn’t get our sub-page list.

<?php if(wp_list_pages("title_li=&child_of=$parent&echo=0" )): ?>
<div id="submenu">
<?php wp_list_pages("title_li=&child_of=$parent" ); ?>
<?php endif; ?>

This last part is pretty simple. All it checks for is IF there are any sub-pages (in a very rudimentary way). If it does have sub-pages, then it lists them (along with a title and some div wrappers for style).

One Limitation

I didn’t spend too much time doing research on this, but as far as I can tell, this only works 2 levels deep (top-level and 2nd level). If you have 3 levels of sub-pages, this won’t work (or at least won’t work like it’s supposed to). Sorry, but all I needed was 2 levels, so that’s all I developed it for :-)

Download the Source

Click Here to download the source for this script

So, if you are looking for a quick and dirty way to use WordPress as a CMS, this little bit of code can go a long way. I’ve used it several times since the time I developed it, and I plan on using it many times in the future!

Next week, I’m writing a tutorial on how to do the same thing we did here, but with categories and sub-categories. Don’t miss it!

Browser Specific Style for your WordPress Theme

Have you ever been developing a WordPress theme, making it look all pretty, cleaning up your code, and getting all the loose ends tied up … then, you fire up your test browsers and notice that things don’t look quite as good as you thought they did? If you’re like me, you use FireFox, and as any good CSS guru will tell you, FireFox and IE can interpret the same code quite differently.

So, you’re forced to either employ hacks like the star-html hack to compensate for IE6’s shortcomings.

But recently, Microsoft has started recommending that instead of using inline hacks in the main stylesheet, you should use contitional comments to specify browser specific stylesheets. It looks a little something like this: [Read more…]

Don’t Show Me the Same List Twice

If you’re like the thousands of other bloggers out there, when you first started your blog, you went to the theme viewer or did a google search for free WordPress themes and found yourself something that you liked. Personally, I’m not a fan of themes that display the seemingly endless list of full articles right there on the homepage. I’d much rather see a couple of feature stories, and a list of either older stories, or a list of categories that I can browse through. But alas, even the free themes I’ve released have had the endless, reverse-chronological list of stories with full text and a “previous – next” link at the bottom.

And this is the case for most of the free themes out there.

What’s even funnier is the fact that some bloggers/theme designers put a list in a sidebar called “recent stories/articles”.

What?! You mean that not only do I get the long list of stories on the homepage, but I’m also getting another list in the sidebar with the exact same list? Seems like a waste of real estate, huh?

But it doesn’t have to be. By implementing this simple trick, you can change the sidebar information to display only a list of stories that are older than the stories on the homepage. Here’s how…
[Read more…]

Query_Posts and Your Homepage Design: Part 2

Last week, I went through the process of adding the content of a single WordPress “page” to your homepage. But there would be no reason to do that with WordPress’s new ability to make any “page” your homepage … unless … you wanted both the content from a single “page”, as well as the latest entry excerpts from your blog to all be on the homepage. For that, we needed a custom homepage.

In case you missed it, head over here and catch up.

So, in order to add the title and excerpt from the latest entries in our blog to our homepage, we’re going to employ, once again, the WordPress developer’s best friend, query_posts. [Read more…]

Query_Posts and Your Homepage Design

WordPress has a fantastic little loop qualifier. I’ve written on it for the last 2 weeks, and this week I want to go a little deeper, moving more toward the direction of using WordPress as a real content management system using the built in page feature that WordPress added a while back.

Although WP also recently added the ability to use any page as your homepage, most people running a business want a bit more complicated homepage. For instance, I’ve had clients that wanted to have both the content of a page, and the latest 3 blog entries on the homepage. Now, you may want a homepage that is more or less complicated than that, but you can take the principles outlined here and apply them to you own homepage design. [Read more…]

Creating a Link Blog Within Your Blog

Last week, I introduced the query_posts loop qualifier, and this week I’m going to give you a practical use of the tag. For an example of what we are going for, take a look at Veerle Pieters’ blog.

Notice toward the bottom of the page, you’ll see a section called “Approved”. This is a place for Veerle to put links to cool websites she comes across, without sacrificing real estate on the “main blog”. There are actually 2 ways to do this (maybe more), and I’ll share them both.

Using the Blogroll to Manage a Linkblog

[Read more…]

A WordPress Developer’s Best Friend

Have you ever wondered how some WordPress blogs have all those little sections of content? You know, one list that has the 5 most recent stories in a specific category. Another section has a “aside” story. Yet another list called “news” that has a list of stories, but they never get to the main part of the homepage.

This is sometimes known as a “magazine” or “newspaper” style homepage, and although it is a bit complicated to create, the common denominator is a handy little loop condition called “query_posts“.

I first discovered it, of course, by client request. A client wanted a homepage to have a “sideblog” in one of the sidebars that displayed the title and excerpt from all the posts he put in the “sideblog” category.

In fact, the same strategy is employed here on The Blog Herald. See how in the sidebar, directly under the ads, there is a list of news? Where does that come from? For that matter, where does the feature news on the left side come from? [Read more…]

Using WordPress Page Templates

If you have ever developed a WordPress Theme for someone, you may have run into this request:
“Could you make each page have a different [insert design aspect here]?”

Well, if you’re just using the page.php file to handle the look of all your pages, the answer may be “no”. But if you use different page templates, you certainly CAN make any page look however you want.

For instance, let’s say you have a client that wants all the pages to have the sidebar except for his bio page. On his bio page, he wants the content to extend all the way over where the sidebar used to be. Here’s what you do: [Read more…]

Styling Those Widgets

I really love WordPress. I’m not afraid to admit it. I make my living off it, I work with it every day, and I’m always learning new things about it. So, with the recent announcement that WordPress 2.2 will now have widget functionality built in, I thought it would be appropriate to share with you just how to style those nifty widgetized sidebars everybody now has at their disposal. (for those who don’t know, widgets used to be a plugin, not an automatic feature).

And no, I’m not talking about the oh so common tutorial on how to make your sidebars “widget ready” … there are plenty of those, and there’s no reason to reinvent the wheel.

What I want to talk about is a problem that comes when you simply “widgetize” your sidebars, and don’t consider the styling implications that come with it.

You see, for whatever reason, widgets use nested lists to display the content of the widgets by default. Here’s what the output source of your sidebar looks like with widgets in them:

<div id=”sidebar”>
<h2>Widget Header (assuming the widget includes a header)</h2>
*there may be another nested list here,
or an image, or a form, etc. it’s your
job to prepare for them all*
<h2>Another Widget Header</h2>
*more stuff here, see above

*As you may have been able to tell, you have to be a bit of a fortune teller to predict the kinds of widgets people will put in their sidebar. But regardless, you have to prepare for them all. Also, you may notice that your sidebar outputs different code than this one. It all just depends on how you structure your code before and after you call the widgets. Because there can be so many, you’ll definitely want to view the html source of your blog and check the structure that the widgets output, then style based on that. But for now, we’ll go off the code above.

First of all, you should already have your sidebar styled. What we’re going to do is take advantage of the hierarchical structure of CSS.

The second element is the unordered list, <ul>. Here’s how to style it (yes, this involves editing your CSS file):

#sidebar ul {

Next, we handle the list items, <li>

#sidebar ul li {
list-style-type: none;
other attributes;

Notice that I changed the list-style-type to “none”. Unless you want a little bullet next to each one of your widgets, be sure to put that in there.

Next, we handle the header, <h2>

#sidebar ul li h2 {

Finally, make sure to style the various elements that may show up in your sidebar widget,

#sidebar ul li img
#sidebar ul li form
#sidebar ul li p
#sidebar ul li a (if you want your sidebar links to look different than normal)
#sidebar ul li ul
#sidebar ul li ul li
#sidebar ul li ul li ul
#sidebar ul li ul li ul li

Those last 2 may seem unnecessary, but when you think about how sub-categories and sub-pages are listed in WordPress, you can end up with several nested lists … which means YOU need to have a style to cover them. And that’s the point … you have to think ahead. I can’t tell you how many themes out there are not prepared for all the different possibilities … I’m embarassed to say even some of mine aren’t. But with just a little planning, you can make sure that your theme actually IS ready for those widgets. So get busy! Go fix your themes!

Oh, and if you don’t have any idea what I was talking about in this post, don’t worry. This was meant for blog designers, or people who feel comfortable working with WordPress themes :-) For more information on creating and working with WordPress themes, visit the tutorial series over at wpdesigner.com or check out the tutorial from Brian Gardner (part 1part 2). For more information on widgets, visit this page over at Automattic.

Nathan Rice is a blogger and freelance web designer. He co-operates RockinThemes.com, and is a contributer at Performancing and WordPressThemes.com