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:

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

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.

This is a basic tutorial that I wrote while building my second custom WordPress theme using WP Framework, this week. I’m by no means an expert at this, and this is my first large tutorial in a while, but if you’re just getting started with WP theming I think this might be quite helpful to you, too. I didn’t delve into functions or get very fancy here – the result is just a solid, basic theme.

Part I.

Before You Get Started

Download and install the latest copy of WordPress (if you haven’t gotten it in the last 10 minutes, there’s probably a new version out by now).

Upload your usual WP plugins, but don’t activate them until you’re done with the theming just so if there’s a problem with one that affects your theme, you’ll be able to tell quickly.

Download and install the latest copy of WP Framework. Upload the entire folder into the wp-content/themes/ directory, then rename it if you like. I usually call mine ‘skin.’

Go the Appearance>Themes in WP and select your WPF theme. Activate it and open up the site in a new browser tab so you can see what you’re doing.

The Theme Conversion – CSS File, header.php and Layout Options

Copy the entire contents of the CSS file for your XHTML/CSS page into WPF’s /library/media/css/screen.css file – it’s empty, just waiting for your code. Whatever you put in this file overrides the elements in base.css. And WPF comes with a reset.css so if that’s part of your CSS file, you can delete that section.

Now for the WPF folder. Let’s start at the top – open up the WPF header.php file in your favorite editor, and also open up your XHTML/CSS page. You’re going to be copying the elements in the header section of your page into the WPF header.php file where they logically should occur – WPF is simply and cleanly organized so it should be fairly easy to determine what goes where.

If you want to use a favicon, there’s already a line for that in header.php, just upload it to the /library/media/images/ folder.

Rename styles as necessary – I found it easier to rename my styles to WPF’s conventions rather than the other way around, but you might find the opposite to be true. For example, if your ‘wrapper’ is WPF’s ‘container,’ just change the name of #wrapper in your CSS file and HTML file.

WPF comes with several layout stylesheets. The default is a 2-column layout with the sidebar on the right and that’s the I used for this tutorial. Find and open the stylesheet here:  /library/media/layouts/2col-r.css.

The four major areas of the layout’s structure are in this layout file: .container (what I usually call ‘wrapper’), .hfeed (the main content area on the left), .aside (the right sidebar) and .footer. You’ll want to make sure to change those parts of your CSS in this file rather than in screen.css. Start by copying over the styles for your page’s #wrapper or main container from screen.css to .container in 2col-r.css.

Images for your page should be uploaded to /library/media/images/. To reference them from within header.php, use this path style:

img src="/library/media/images/myimage.png"

Keep going and get your header.php file working nicely (keep checking it in the browser – the header should end up looking exactly like your XHTML/CSS page’s header section.

—-

Part II of this tutorial is here.

—–

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

Earlier this week due to a number of irritations with one particular project (it started off as a really bad week!), I decided to take the plunge and learn how to create a custom WordPress theme myself.

I’ve been integrating WordPress into other websites for quite a while so I did have some basic understanding of how it worked. I found this nice article in Smashing Magazine about WP theme development frameworks and read it all. I looked at a few of them and picked WP Framework because it looked like something I could handle, as a beginner.

A half hour into my workday Tuesday and I’d downloaded and installed WP Framework and made that my active theme. I found the actual migration of my HTML/CSS page elements into WP Framework was quite easy – the main issue was figuring out which of my elements needed to be renamed.

Basically with WP Framework, there’s a base.css file that contains a pretty minimal amount of CSS styling. There’s a screen.css file that’s blank and takes precedence over base.css – that’s where you can copy and paste your CSS styles from your HTML/CSS page. And then as I mentioned, you have to determine what styles of yours need to be renamed (or, which styles in the theme HTML need to be renamed). As long as you get all the styles in agreement, it works either way.

I had to create one additional template for the home page, which wasn’t the blog in this case. That gave me a little trouble because I hadn’t done that before, but when I figured out I just made a copy of the theme’s index.php file, made the changes I needed in the code and gave it a theme name in the commented section at the top, it began to make sense. I created a new header_custom.php file that would call a second stylesheet with adjustments for just that template, changed the header file call in my new version of index.php to that new header_custom.php. This did take a while to figure out but it does make sense to me now.

Then in the ‘home’ page’s editing window in WordPress I just selected this second template name for my page, and all was working fine.

It took me exactly 10 hours to build my first custom WordPress theme – there’s still a little CSS glitch at the bottom with the footer, but otherwise it’s done and I’m very happy with it.

I learned a really important and marketable new skill as a result of all the trouble I had with on this particular project – so it definitely turned out for the best.