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

Designing and Coding a WordPress Theme From Scratch (Part 7)

This is the seventh post in series about creating WordPress themes with your Photoshop designs. You may want to review before we continue….

Part 1 – “Tools For The Task” and “Preparation”
Part 2 – “Layout And Structure” and “Designing WordPress Themes in Photoshop”
Part 3 – “Photoshop to XHTML in 24 Hours”
Part 4 – “Cleaning Up Your XHTML”
Part 5 – “Preloading Images with Javascript and CSS”
Part 6 – “Marking Up is Hard to Do” and “The Anatomy of a WordPress Theme”

Beginning with PHP for WordPress

First we’ll duplicate index.html and rename the copy index.php. We’re only keeping the original .html file for reference to make sure that the finished PHP operates and looks the same.
Let’s open index.php in our text editor. Right now it’s just a .html renamed .php. Our job is to make make it true PHP.

Go ahead and create some more blank documents in your theme folder. Let’s call them header.php, footer.php and sidebar.php (if you have a side bar in your theme). We’re going to divide the HTML into the major sections and make each section it’s own PHP file to be marked up separately.
Cut everything that you consider the header of your document. Make sure all tags are closed. Below you’ll find an example of my code which is really irrelevant, your own code will look and function differently based on your unique design. Still, for the sake of a working example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The Wonderful World of Web Design!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type="text/javascript" src="scripts/preload.js"></script>
</head>

<body>
<div id="container">
	<div id="header">
    <div class="description">The Blog Title</span></div>
	</div>
    <div id="header-nav"><div class="content">
    <a href="">ADVERTISE</a>  |
    <a href="">CONTACT</a>  |
    <a href="">RSS</a></div></div>
    <div id="spacer1"></div>
    <div id="upper-menu"><div class="navigation">
    <a href="">HOME</a>
    <a href="">NEWS</a>
    <a href="">BLOG</a>
    <a href="">HIRE ME</a>
    <a href="">PORTFOLIO</a>
    <a href="">QUESTIONS</a>
    <a href="">LINKS</a>
    <a href="">POPULAR</a>
    </div>

    </div>
	<div id="right-top"></div>

 <!-- End header.php -->

Paste your header information in to header.php. Do the same for sidebar and your footer, cutting the code from index.php and pasting it in the corresponding file.
I use comment tags like <!– End header.php –> to write notes that help me remember what’s going on in my code.
If you do this correctly you’ll be left with a pretty sparse index.php document. All that should be left is some That’s good because now we’re going to tell index.php where to find all the information we just moved. We do this with PHP functions like so:

<?php get_phpdocumentname(); ?>

This get_ function does exactly what it sounds like it goes and fetches a requested document and displays the contents of that document in the area requested. My index.php document looked like this:

<?php get_header(); ?>

    </div>

	<div id="post">
	  <div class="entry">

		<div class="posts">
     		</div>

	  </div>
	</div>

<?php get_footer(); ?>

Ofcourse, for now we’ll leave the body <div>’s empty. This is where our content will eventually go.
You’ll notice that I have no sidebar, that’s because I call for it in the header.php document instead. Why? Because browsers read code from top to bottom and I want page to request the header and side bars to first before requesting the body.

In the next lesson we’ll start to analyze the PHP functions needed to request and display the dynamic content of a WordPress theme.

Share this story:

Tags: Design Development PHP Tutorials theme WordPress Tutorials

Author Description

10 Responses to “Designing and Coding a WordPress Theme From Scratch (Part 7)”

May 28, 2008
Whuzi Log in to Reply

I’m a little confused on this section. I’m going to experiment and see what you mean, but images would help a little more like you did on previous sections.
May 29, 2008
JonGos Log in to Reply

Essentially you need to divide your xhtml into sections and place those in the proper areas. You header goes into “header.php”. Your footer code goes into “footer.php”. This step is putting things in their place before you begin marking up. Please continue to ask questions, I’ll answer what I can here!
July 4, 2008
KEZER Log in to Reply

hello im a little confused too where exactly does the header code come from so far we have only created a index.htm from photoshop that photoshop created but when i open index.htm i do not see header information that you say to cut and paste to header .php where do we get this from i refering to you saying i i quote “Cut everything that you consider the header of your document” ????please can you explain a bit more THANKS

ALSO PLEASE CAN YOU DO A TUTORIAL ON HOW TO SLICE IMAGES IN PHOTOSHOP TO MAKE THEM READY FOR WORDPRESS LIKE HOW MANY SLICES DO AND WHERE TO DO THE SLICES AND DO YOU NEED ONE FOR HOME CONTACT ETC PLEASE DO A TUTORIAL WITH IMAGES AS I THINK THIS IS A WONDERFULL TUTORIAL ONE OF THE BEST ON THE WEB BUT WITHOUT THE TWO IMPORTANT INFORMATION MISSING IT SPOILS IT

NUMBER 1 WHERE TO GET THE HEADER CODE WHICH FILE

AND

NUMBER 2 HOW TO SLICE DESIGN IN PHOTOSHOP TO MAKE READY FOR WORDPRESS MANY THANKS PLEASE DO NOT POINT US TO THE WPDESIGNER “HOW TO SLICE IMAGES IN PHOTOSHOP” AS HIS TUTORIAL IS TOO HARD TO FOLLOW IM SURE YOURS WILL BE A LOT BETTER

MANY THANKS AND SORRY FOR SUCH A LONG COMMENT
July 13, 2008
JonGos Log in to Reply

Basically your WordPress theme “parts” come from copy and pasting the areas of your index.htm file. So anything you designate as header information should be copy an pasted into header.php. Anything you designate as footer information goes into footer.php. I’m not sure how else to explain it as it really is kind of arbitrary and up to your own discretion.

Due to popular demand, I’ll do a slicing specific tutorial this month.
August 2, 2008
Max Log in to Reply

Hi, Great tutorial.
But I have a question.
I named My slices according to where I want to put my content.
you know like header,footer,side bar, advertisement.

But, when I download them into my folder. it come out as div id=website_1, website_2, and so forth.

How can I keep the name of my slices as they are download?

This well help me code better, I know it will.
September 6, 2008
kezer Log in to Reply

hi jongos can photoshop 7 also do xhtml/css or do you need to have photoshop cs3 when you metioned there charge bucks when can be done in photoshop can i do it in photoshop 7 please
September 6, 2008
kezer Log in to Reply

amend above post can you do Photoshop to XHTML with photoshop 7 aswell if this is easy why are they paying to get it done ?? i guess not everyone know you can do photoshop to xhtml with photoshop and there wasting there money paying for the service
September 6, 2008
kezer Log in to Reply

hi jongos also will you be doing the slice wordpress tutorial i been waiting you did say it will be this month in july thanks
October 23, 2009
Kira Sherrine Log in to Reply

Hi,

I am now looking to do a web blog and came to your site… I emailed you and have not heard from you and upon these comments it looks like you have not been responding since July.

I have the same questions asked as Max and Kezer. On my index.html it writes: (I’m copy pasting)

KiraSherrine Blog

So Im quessing somewhere in there there is the header coding that I have to guess via the pics in the image folder…
But what is the Nav is different from the header?

And on your sample you have listed “upper middle”, what are these refering to on the why its written to the location?
October 1, 2010
Anonymous Log in to Reply

This is one of the good tutorials. Simple, explanatory, error free.

Let me follow you Jon