Creating a WordPress theme with WP Framework

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.


Leave a Reply

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