I have to get this out of the way, I am a huge fan of Wordpress. Both our blogs use Wordpress. Whenever I get a web design project, my first thought is, “How can I best utilize Wordpress for this project.” Granted, my second thought is frequently, “Maybe Wordpress isn’t the best solution for this [flash, static, e-commerce] site.” Be that as it may, Wordpress is still by far my favorite blogging platform. And it’s not just for blogging. With a few minor changes WP can become a truly powerful CMS as well. So if you’re looking for a free, powerful, and open platform with an insane developer community, look no further than your new best friend Wordpress.

This is the first in a series on turning the Default WP Theme into something wonderful. Today we’re going to go over the basic structure of a Wordpress Theme. I’m not going to go over the WP installation process, so check out the Wordpress 5 Minute Install if you need some help with that (if you are having any issues with the install, feel free to ask me).

By the way, we’ll be using Wordpress 2.5.1, the shiny new version of this beautiful platform.

Wp-Theme Structure: Your Main Page

style.css:
This is your CSS stylesheet for your WP theme. If you’re not familiar, CSS (Cascading Style Sheets) is a way to define the font, layout, design of your website. CSS is great because you can use one document to set the style of your entire site. Thus, if you want to change the color of all the links on your entire site, you can just change the CSS link tag. W3schools is a great resouce. Maybe we’ll do a css tutorial some time too.

header.php:
Header.php contains your posts meta tag and title information, links to stylesheets, rss information, and links to javascript. It also contains your header image and the top of your container (Page) <div> (which sets the border around your page, as well as other things such as size, positioning, etc.).

index.php:
This is the main body of the page that someone sees when they go to www.[Your Web Page].com/[WP Folder]. It contains includes for the header, sidebar, and footer.

Index.php also contains the heart of a WP page: The Loop. The loop is what WP uses to show posts, and information associated with posts, such as the author, tags, metadata. By editing the loop you can make WP do all sorts of neat and helpful things.

sidebar.php:
The sidebar contains all of your navigation in the default theme (we’ll be changing this as we go). It includes your searchform, login and administrative links, and gives you the option to display lists of categories, authors, archives, and links. There are also areas in the sidebar that display specific information depending on the page you are on.

searchform.php:
Searchform is exactly what it says. It is the form that holds your search field and button.

footer.php:
By default this file closes your container (Page) <div>. It also includes post and comments rss a link to wordpress.org (a nice thing to keep).

Press on to the next page: Individual Posts, Archives, and Search Results