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.

As a result of a recent post on Freelance Folder about increasing your income by narrowing your focus, I made some changes to both my website’s front page and my internal policies about the type of projects I’m going to accept.

My favorite jobs include gallery sites (photographers, artists, designers, architects, etc.), WordPress sites where I can do custom theming, and general design or redesign projects. I’m going to start concentrating on those types of clients and moving away from what I don’t enjoy doing – like the large e-commerce sites. I’d be happy if I never touched one of those again.

Not to say that I won’t do any e-commerce but from now on, it’ll be smaller product lines where I can use tools like FoxyCart, or medium-sized product lines where something customizable like E-commerce Templates or OptionCart works nicely.  No more X-Cart or ZenCart; those are some of the most hairy apps I’ve ever seen as a web developer.

I’m using FoxyCart on two client sites right now, and while it did take some back-and-forth on the forums to get it working, I really like it and the clients do too.

One of the things that prompted this was a recent client who wanted a placeholder web page for her new business. She ‘loved’ what I did for her, then three days later had a meltdown about it and redesigned it in Word. She wound up paying me about $500 for a simple one-page placeholder because she didn’t know what she wanted.

I have no desire to do any more work for clients who give me designs to code for them, unless said client is a designer-type themselves. I like working with other web and graphic designers and am happy to code for them, but for general clients, I’ve decided that if you don’t trust me enough to use my design expertise, you shouldn’t be using Red Kite at all. I’m leaning into the design and front-end dev realm and away from so much back-end development work.

This week’s going to mark the return to work – I’ve done very little client work in the last 10 days (it’s been nice!) but have instead spent some time on Twitter, LinkedIn, adding more content and tools to my website and getting caught up with QuickBooks.

I have networking meeting and working lunch tomorrow, then a massage which I need badly (the recent windtrainer riding has made my lower back sore, and it never gets sore), then I’ll be finishing up an interface design project for handoff to the developer.

This week will also see the testing and configuration of a jAlbum/Fotoplayer gallery for my current photography client, and all the content’s finally ready for another client so that will be dropped into place. I have to rework her navigation tabs and add a WordPress integration there too.

Other than that, mostly I’m working on design ideas for a local pen/stationary shop and for my marketing lady, and I have one other meeting late Friday with a prospect. Oh – and I’m giving a presentation on using Twitter for business to my networking group Friday morning.  And sending out my monthly newsletter. Hopefully it won’t be a terribly overbooked week.