Creating a WordPress theme with WP Framework, continued…

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.

1 comment

Leave a Reply

Your email address will not be published. Required fields are marked *