Designing and Coding a Wordpress Theme From Scratch (Part 4)

Developer Newsletter

Webmaster Blog

Designing and Coding a Wordpress Theme From Scratch (Part 4)

You’ve gone from Photoshop PSD to slices to XHTML using Parts 1, 2, and 3 but if the end result is a Wordpress theme the majority of the work still has to be done. First of all it’s important to understand one bit of the operational mechanics of Wordpress. Wordpress looks for certain information the header of a file called style.css, this is how it can tell themes apart. Here’s a better explanation from Codex:

In addition to CSS style information for your theme, the stylesheet, style.css must provide details about the Theme in the form of comments. No two Themes are allowed to have the same details listed in their comment headers, as this will lead to problems in the Theme selection dialog. If you make your own Theme by copying an existing one, make sure you change this information first.

Thus, we need to separate our inline CSS and put it in a separate file called style.css

Cleaning up Your XHTML

Let’s start by creating a blank document called style.css in the same directory as your HTML file. Open the CSS file and add the following information:

/*
Theme Name: your-themes-name
Theme URI: the-theme's-homepage
Description: a-brief-description
Author: your-name
Author URI: your-URI
Template: use-this-to-define-a-parent-theme--optional
Version: a-number-optional

General comments/License Statement if any.
*/

like so

Now let’s open the HTML file the Photoshop created for us which should look something like this.
The inline document is essentially divided for us already because everything between the <style> and </style> tags is going to be cut out of our html document and pasted into the CSS document just after the heading we just added. Let’s do that now, copy the style data out of the HTML document and into the CSS document and make sure that you close the tags once you’ve done so.

The resulting HTML file should now look like this:

and the CSS file like this:

Got it? Now lets do some major cleaning. Now that we’ve removed the style from our HTML we need to add it back. We’re going to replace the empty <style> tags with the following line:

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

This line is telling our document some very useful information:

rel - the relationship of the linked document to the current document
href - the url to the linked document
type - the MIME (Multipurpose Internet Mail Extension) type of the target URL
media - denotes on which device the document is meant to be displayed

or the translation for humans: “Hello, the text file that lives at this URL is a stylesheet that was made for use with documents that would be displayed on computer monitors and screens.”

We have to do this because we’ve taken out the style information but since we still want to style our HTML document we have to tell it where the style information now lives. Next we want to empty all our <div> tags.

Since all our our photoshop images are essentially background images any line from our HTML document that looks like this:

   <div id="aqua-01_">
	<img id="yourfilename_01" src="yourfilename_01.png" width="549"
                  height="126" alt="" />
   </div>

Should be changed to look like this:

	<div id="aqua-01_">
	</div>

But only when you change the corresponding ID container the CSS document to look like this:

	#aqua-01_ {
	position:absolute;
	left:0px;
	top:0px;
	width:549px;
	height:126px;
	background:url (images/aqua_01.png);
	}

What we’ve done is taken the image out of the <div> container in our HTML document and placed in the corresponding ID container in CSS. This is important because now we can put other things like text or other images into the HTML files <div> container. This will also allow our page to structure itself properly even if a few images are slow to load.

Finally we want to take anything that is an image and place it in a folder called “img” or “images”. If you look at the code above I’m telling the CSS to look for image files in a folder called “images”. We want to do this for organizational purposes. Of course this is entirely optional but it’s good practice and somewhat of an organizational standard.

Are you still confused?
Download these files and examine them to see if you can figure out what I did to make the page render properly.

In the next lesson we’re going learn how to optimize our page for speed using javascript. Sweating yet? Don’t worry we’re already a lot closer than when we started!

Bookmark It