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 -->
<?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(); ?>
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.





10 Responses to “Designing and Coding a WordPress Theme From Scratch (Part 7)”
May 28, 2008
WhuziI’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
JonGosEssentially 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
KEZERhello 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
JonGosBasically 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
MaxHi, 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
kezerhi 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
kezeramend 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
kezerhi 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 SherrineHi,
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
AnonymousThis is one of the good tutorials. Simple, explanatory, error free.
Let me follow you Jon