|
WP Framework For Creating A Better WordPress Site
By Debbie Campbell
Expert Author
Article Date: 2009-08-03
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.
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've called 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 Files and header.php
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.
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 very simply and cleanly organized so it should be easy to see what goes where.
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. Again, this way was easier for me.
WPF comes with a 2 column layout stylesheet, one for a right sidebar and one for a left. This default install has the right sidebar and you can open the stylesheet for it in /library/media/layouts/2col-r.css. The four major areas of the layout's structure are in this file: .container, .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 from screen.css to .content in 2col-r.css.
Images for your page should be uploaded to /library/media/images/. To reference them from within header.php, you can use something like this for a relative link:
img src="<?php bloginfo('template_directory'); ?>/library/media/images/myimage.png"
Keep working and get your header.php file working nicely (keep checking it in the browser - it should end up looking exactly like your XHTML/CSS page). I did have to change my #main to .content in screen.css, too.
Comments
About the Author:
Debbie Campbell
Red Kite Creative | Web Design Blog
|
|
