I am Ryan Arrowsmith

Note: If you are a pro, don’t be an ass and critique my methods. :) I am going to start simple and build.

My goal with this tutorial is to only show you how to customize Wordpress’ look and feel. I’m not going to dive into how everything works or what a flux capacitor is, because the average user probably doesn’t need to know that. With that said, let’s…

Get Started
To do this the easy way, you’ll probably want a text editor that handles PHP and CSS. I say this because most of them will number each line. Later on, I’ll be using the line numbers as a guide. I’ll try to still explain everything well enough so that those without a neat little gizmo like Textmate will be able to follow along. It’s just handy, is all. :) (Note: PC users can get an open-source [free] PHP editor here. Mac users [WOOT!] can pick up a freebie here.)

Wordpress uses template files to run and style your site. The content of your site, your entries and comments, are all stored in a database (MySQL). When someone views your website or a specific entry, Wordpress uses PHP to pull that information out of your database. The template files tell Wordpress what you want to pull out of the database and how to render it.

In order to change the appearance of your site, you will need to start with a basic set of templates, then edit as you wish. To get started on my redesign, I downloaded the following:

• Basic Wordpress Theme by Visual Assault.
• Christian Montoya’s Comments Template.

Download them in that order. Once you have downloaded the Basic theme, decompress the download and open the comments.php file. After that, go to Christian’s site and click the download link for his comments.php file. Instead of being another file download, Christian’s link will take you to the source code. Copy all of the code, then paste it into your open comments.php file. Save your changes to the file.

At this point, you can upload your new theme to your web server. You can have pretty much as many themes as you want with Wordpress, you just need to upload them into their own file. If you need an FTP client, I use SmartFTP on PC and Cyberduck on Mac, both are free.

We’re going to talk about your root folder often. The root folder is your home folder. Think of it like a highrise building; the root folder would be the first floor, or the lobby, and your sub-directories would be all of the floors rising above it. Wordpress should already be installed in your root directory. To upload a new theme, you just need to drop the theme folder into the following Wordpress directory: root > wp-content > themes.

Congrats! You have just uploaded a new theme to your website! Now go to your Wordpress administration page and activate the theme to see how incredibely terrible an unstyled site looks! Click on the link that says Presentation, then activate your theme by clicking on it.

Deciding on your layout
For me, I have to design the structure of the site before I start laying graphics over it. And since I am a visual person, I write the code and get that portion mostly done before I even open Photoshop, or any other graphics program. Also, since I’m doing this redesign live, I needed to add some structure to the site so the content was at least accessible, even if it ain’t pretty.

To do this, we need to start editing our style.css and the other template files. Open your style.css, header.php and footer.php files. The first thing I did was set some basic style, which is done under the selector “body”.

body {
color: #000; /* this sets my font color */
font-family: “Lucida Sans”, “Lucida Grande”, “Lucida Sans Unicode”, Verdana, sans-serif; /* This sets the default font face */
font-size: 13px; /* How large the default font is */
line-height: 17px; /* Tells the browser how tall each line should be */
margin: 0; /* No margin on the body */
padding: 0; /* No padding on the body */
text-align: center; /* This always has to be center when you want your container to be centered on the page because of Internet Explorer */
}

After that, I defined the main container, which will house all of my content. Without this element, my content would just be a big blob, expanding to the very edge of the browser.

#container {
width: 850px; /* This sets the width. The other two lines are a Internet Explorer hack */
\width: 860px; /* Add 10 to your actual width or your container will not display correctly in IE */
w\idth: 850px; /* Original width */
margin-left: auto; /* Required to center the Container on page */
margin-right: auto; /* Required to center the Container on page */
padding: 0px; /* Defines whether or not the content hits the edge of the container */
text-align: left; /* Required or your content will be centered */
overflow: hidden; /* Makes sure things larger than the container don’t screw up your layout */
}

You can copy and paste the text above into your style.css file, save it and upload it to your theme directory. Now go to your open header.php file. The web browser will automatically read your “body” style, but we need to add a call to our Container. Edit it as below:

So what did you just do? You told the template that, before it loads any content, you want it to load your Container. The <body> tag represents the beginning of your webpage so, by placing the call to your container directly below that, the browser will process the container first.

Quick CSS tip:

• Elements: A CSS selector defined with a # before it (#container) is an element. To call it your template, you use <div id=”container”>. You should never use the same element more than once on a page. Instead, use a class.
• Classes: A CSS selector that has a period before it (.container) is a class. To call it in your template, you use <div class=”container”>. Classes can be used multiple times on the same page.

Any CSS element you open, whether it is an element or a class, has to be closed before the end of your document. Since in my case, I want the Container to house all of my content, I’m going to terminate my Container in the footer.php document of my template.

Do to your open footer.php document and add the following:

To close a CSS element, you use the tag </div>. So, after all of this, what have you accomplished?

• You’ve created a new theme, by uploading it to your server.
• You’ve begun a valid CSS document.
• You’ve defined your body classes, font face, size and color.
• You’ve edited a PHP doc.
• You’ve applied your container to templates, so your content has structure.

What’s Next?
In the next segment, I am going to cover how to use multiple loops and includes to show articles from different categories on the same page. For example, I’ve already implemented this on my homepage. I have my main articles, then I used an include in my sidebar to pull articles from my “asides” category, or short posts.

In the third installment, I plan on showing how to create an Ajax Shelf (as seen on Derek’s Foliage Mod theme). Of all the e-mails I get, the Ajax shelf seems to be the most interesting to readers. The technique is relatively simple, so I’ll go over that. In the mean time, if you have any questions, shoot me an e-mail.