How to create a Wordpress Template or Theme
Step Two: Making Wordpress Recognize Your Theme
Here’s where the fun begins. The first thing you want to do is make your stylesheet “theme ready”. All Wordpress requires from you (so that your design can be seen in the Presentation > Themes area) is to give yourself credit in the stylesheet. So open up your stylesheet in a text-editor (no, Microsoft Word is NOT a text editor. I use Notepad.) and at the very top of your stylesheet, simply place this code:
/*
Theme Name:
Theme URI:
Description:
Author:
Author URI:
Version:
*/
Let’s define these variables - what is each line for? Well, when you open up your administration panel, the “Themes” area will recognize the new theme by the stylesheet, and it will create a clickable area for you to use to apply the design to your site. Here’s what each line does:
Theme Name: The name of it, of course! In the “Themes” area, this will be displayed as the link above the screenshot.
Theme URI: The URL of the location of the theme. For example: http://www.yoursite.com/wordpress/wp-content/themes/themename
Description: This is shown in the Theme area as the description for the theme, beneath the screenshot.
Author: Your name, of course.
Author URI: Your website address.
Version: Version number - you can put anything you want. Some people like to start with “1.0″ for the first version of a new theme. Personally, I do dates. For example, my first theme, “Orange Crush” was version 5.242006 - I started creating it on May 24, 2006 
The only fields that are really required is the Theme Name and Description. So, once you’ve done this to your stylesheet, save it as “styles.css”, and move on to the next step. (And if you want a screenshot to show up in the Themes area, then open up your original HTML template in a browser window, hit “ALT” + “Print Screen”, then paste the view into your favorite graphics program. Resize the image to 300px x 225px, and save it as “screenshot.png” - there you have it.)
Okay, now we need to split apart the template. You must have your theme split into 4 parts: header.php, footer.php, index.php and sidebar.php. So, to define each of these parts:
Header.php: generally, this is the very beginning of your template, down to the opening section of the body that comes first in your template. Sometimes this is the sidebar, others, it’s the main content area.
Sidebar.php: this will be, of course, the sidebar.
Index.php: the “meat” of the site - this is where most of the good stuff goes. It also generally only houses the main content area of your site.
Footer.php: the end.
What Wordpress does, to put it in layman’s terms, is put your site together like a puzzle. Each of these files is a piece of the puzzle, and when it’s put together, it makes a whole. The reason it’s very nice to have it this way is because - well, let’s give an example. Say you have a site that’s 100 pages large. The site’s template looks exactly the same for every page. Now, in a static site, if you added a link to the sidebar, or if you changed the text in the header, you would have to go through every single file - all 100 of them - and change that or add to it so the site still stayed the same throughout. But with this, it’s very nice, because you only have to change one file and it’ll make the change site-wide. In other words, if you want to change your header text, you change it once in the header.php file - and all 100 pages will reflect that change. If you want to add a link to your sidebar, you add it in your sidebar.php file, and all 100 pages will show the new link. Very nice.
Now, using the above example layout we initally created, I will show you an example of breaking the site apart into these sections:
header.php:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="copyright" content="Copyright 2005" />
<meta name="author" content="" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<link rel="stylesheet" href="global.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
</div> <!-- closing header div -->
<div id="content">
Now, you see, this file will be included in every single page I create using Wordpress. All of the pages will begin with the above code.
sidebar.php:
<div id="sidebar">
</div> <!-- closing sidebar div -->
Whoa. That’s huge 
footer.php:
</div> <!-- closing content div -->
<div id="footer">
</div> <!-- closing footer div -->
</div> <!-- closing wrapper div -->
</body>
</html>
Yes, I know I skipped over the index.php section. But I wanted you to see the main sections which, for the most part, are made static by this separation. Of course, you can now dynamically generate content for each section (and I’ll be showing you how in a bit), but for now, we’re going to render them as static pages. I saved the best for last, the index.php file.
index.php:
<?php
get_header();
?>
<?php
get_sidebar();
?>
<div id="main">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php the_date('','<h2>','</h2>'); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<h3 class="storytitle">
<a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h3>
<div class="meta">
<?php _e("Filed under:"); ?> <?php the_category(',') ?> —
<?php the_author() ?> @ <?php the_time() ?> <?php edit_post_link(__('Edit This')); ?>
</div>
<div class="storycontent">
<?php the_content(__('(more...)')); ?>
</div>
<div class="feedback">
<?php wp_link_pages(); ?>
<?php comments_popup_link(__('Comments (0)'), __('Comments (1)'), __('Comments (%)')); ?>
</div>
</div> <!--closing .post -->
<?php comments_template(); // Get wp-comments.php template ?>
<?php endwhile; else: ?>
<p>
<?php _e('Sorry, no posts matched your criteria.'); ?>
</p>
<?php endif; ?>
<?php posts_nav_link(' — ', __('« Previous Page'), __('Next Page »')); ?>
<?php get_footer(); ?>
</div> <!-- closing main div -->
Ahh…now, I know there’s a lot of extra stuff in there that wasn’t there before. However, if you look, you will still see our original code for the content area at the top and bottom of the code. It’s the “meat in the sandwich” that I wasnted to bring to your attention.
Let’s break it down.
<?php
get_header();
?>
<?php
get_sidebar();
?>
…and at the end…
<?php
get_footer();
?>
Wordpress will call up the index file. It’ll see these sections, and refer itself to your header.php, sidebar.php and footer.php. Yes, it’s bringing the puzzle together into a whole. The index.php file calls in the other 3 pieces - this is what meshes it all together. Now, all that gobbeldeygook in the index area…
Posted by
September 21st, 2006
it really helped me, thanks a lot, let me get started with wodpressing
Spoken on November 25th, 2007 at 11:11 am