The first part of this WP Framework tutorial is here.

Part II.

Dealing With Navigation

Add a few of your pages (okay to leave them blank for now) into WordPress so you can see what’s happening with your main menu.

For my project, I had a horizontal text menu in the header section so it came in pretty close using WPF’s defaults. WPF comes with the Superfish dropdown menu built in, but in this case I had just a simple text menu so I didn’t want to use Superfish. There are a number of ways to handle text navigation – I like wp_list_pages at the moment for its relative simplicty.

Replace this code in header.php:

<?php wp_page_menu( ‘show_home=1’ ); ?>

With something like this – assuming you’re using a list for your menu, apply the styles as in your CSS:

<?php wp_list_pages(‘exclude=20&title_li=’); ?>

Note that here I’ve excluded the page with ID=20 – you can include or exclude any pages. To find the page ID, go to the Pages > Edit screen and hover over the page name. You should see the page ID in the footer (for Firefox).

If you’re trying to use a tabbed menu with the Sliding Doors technique and need to account for the span element it needs, try this tutorial – you can actually just replace the WPF code:

With something like this:

    ]*)>\]*)>(.*?)\<\/a>@i’, ‘
    $3‘, wp_page_menu(‘echo=0&orderby=name&exlude=181&title_li=&depth=1’)); ?>

This worked perfectly for my tabbed navigation in another project.

Also, if you’re doing an integration into an existing site and just want to use your own hardcoded navigation, like the existing site’s sprite menu, you can just delete the WPF code and drop your own menu in its place.

The index.php and sidebar.php Pages

I didn’t have much to do on index.php except for changing a style name. I changed my #content to .hfeed (the left side content area) in /library/media/layouts/2col-r.css.

You’ll probably need to add .hentry styling to .hfeed.

In sidebar.php, the main classname is .aside so I changed my #sidebar to .aside (added its styles into .aside in /library/media/layouts/2col-r.css).

Don’t forget to do a search and replace in screen.css if you remove styles to 2col-r.css and change their class or ID names.

I’m using WP widgets so I didn’t make any other changes to the sidebar.php file, except for adding a padding div inside .aside. You’ll probably need to add the styling for the widgets into your screen.css file, there’s very little in base.css. If you want to use WP dynamic widgets instead of the hard-coded ones, turn a few on in the Appearance > Widgets page in WordPress so you can see what you need to edit.

The Footer

Now for the footer section – copy the contents of your XHTML/CSS page’s footer section into WPF’s footer.php page, replacing the original contents. Remember – if your footer needs to be outside the main div.container, change that code on this page to close the .container before the footer starts and remove the closing .container div below the footer.

Copy your footer div styles (mine were in #footer) into .footer in /library/media/layouts/2col-r.css.

The only other changes I needed to make here involved link styling.

The Sandbox Post

Your theme should be looking pretty good by now – but we still have a ways to go. First we’ll make it easy to style all the typical types of content a user might include in a post or page.

Use Lorelle’s sandbox post by copying the text file linked on that page into a new post in WP (in HTML mode, not visual). Save it and look at your blog. This post is an invaluable timesaver because you will now be able to make the final tweaks to a lot of little styles. Get to it.

The Remaining Files

Now you’ll need to go through these remaining files in WPF:

  • 404
  • archive
  • attachment
  • author
  • categories
  • comments
  • date
  • navigation
  • page
  • search
  • searchform
  • single
  • tag

It most cases it’s pretty obvious what these do, and for many you won’t need to make any changes at all. The exceptions to this may be comments, page, search, searchform and single. Just style as you like and keep checking your work, opening each page in WordPress as you finish.

Are You Done? Maybe…

If you’re using the blog as the front page of your site, you may be all done with the basic theme (and you may not need anything more). Go check the theme in other browsers and validate if you like; WP Framework is valid out of the box and I only had a couple of minor changes to get it to validate when finished. And wonder of wonders, only one conditional comment for IE6/7.

If you want to use another page for your home page, rather than the blog, I’ll have a post on that in the near future.


If you come across any errors in this tutorial please let me know and I’ll do my best to fix them.

I have one project website that’s for me, not for any client. It’s coming along quite well and I’m now at the final CSS tweaking stages before turning it over to some volunteer testers.

A few outstanding questions I’m trying to answer, both Joomla-specific and for the site in general:

  • The big question: how do I apply a module position (in this case a template’s header image module) to non-menu pages? That is, I have a module that’s showing fine in regular article pages but not for the registration page or SOBI2 search page. How do I apply one header image module to the entire site, then selectively apply other header image modules only to certain pages? The menu assignment list in the module itself is not cutting it.
  • How to turn off the Joomla login module once a user is logged in. I found several tutorials on this and understand how to create a new module position in the .xml file, then edit the template’s index.php file to add a bit of code to hide that position, but when I tried it it didn’t work. Looking for another method.
  • What should I show in the sidebars on the subpages? What’s valuable?
  • Should I show the same newsfeeds in the footer on all pages, or vary the footer content?

I’m hoping to get this project finished in the next few weeks and launched – looking forward to seeing how it’s received.

I’m sore today – both heels (I know I need new shoes) and the left IT band. I felt that begin to have a problem right after the 10-mile mark in the half marathon yesterday, but not bad enough to stop. Actually, I don’t think anything short of breaking an ankle would have made me stop by that point.

I was extremely pleased with my time, the weather, how I kept up the 3 minute walk/2 minute run intervals the entire way. And the medal’s nice, it’s hanging with the other one on my dresser.

Final time: 3:05:02. Very happy – that was a full 10 minutes faster than I’d anticipated given the best conditions.

Next: the Boulder Backroads Half Marathon. And tomorrow, a 20-minute run if it feels good.