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.
Tags: Design, Development, PHP, theme, wordpress
JonGos in PHP, Photoshop, WordPress |
on Tuesday, April 29th, 2008 at 8:51 am.
RSS 2.0 |
Leave a response | Trackback
