Your first normal wordpress template

Introduce

Now,let’s make all together (w3c valid 2 columns xhtml ,ul li css none-js SEO friendly sub-menu),we get a full wordpress home page html template–Click HERE to view.It looks nice simple & usefull, right ？let’s start to convert it to wordpress theme.

First,We should know some basic wordpress theme Knowledge:
What’s a basic theme include ?

• css style (required,style.css,style the page also put your personal info. like theme name , author …)
• index.php (required,WordPress Theme start with this file if without the home.php)
• a screenshot (optionally,screenshot.png)
• single.php (optionally,this file to generate the structure for a single post,if no such a file the wordpress will use index.php to generate the structure )
• page.php (optionally,this file to generate the structure for a single page,similar as single.php)

so we know a very minimum wordpress theme should include (index.php,style.css) .but usually in order to keep the site in a more good structure and can maxmum reuse , flexible .The page’s structure is separated to
several parts:

• header.php
• sidebar.php
• footer.php
• comments.php
• comments-popup.php

reference those in the template php file is very easy.For instance,header.php :

<?php get_headerer(); ?>

the comment, use the comments_template() template tag.
the sidebar, use the get_sidebar() template tag.
the footer, use the get_footer() template tag.

Also can use

include(TEMPLATEPATH . '/script.php');

to reference any php file in the template folder.

Start coding wordpress theme now

First ,we need declare the theme in style.css .For instance

/*
Theme Name: red theme
Theme URI: http://www.brightyoursite.com/blog/2010/01/11/your-first-normal-wordpress-template/
Description:Your first wordpress theme
Version: 1.6
Author: alex 
Author URI:  http://www.brightyoursite.com
Tags: red, fixed width, two columns, widgets 
*/

you can see the define theme name , url version aurhor …. there .
Next , do the page segmentation and create the header.php , footer.php , sidebar.php and index.php .
to make it easier we can copy the those files from the wordpress default theme . we just need copy our html codes and do some adjustment. for instace change the menu to wordpress page list ：

  <div id="menus">
  <ul>
 <?php wp_list_pages("title_li=&depth=2"); ?>
 </ul>
  </div>

the main posts loop:

<?php if (have_posts()) : ?> 
  <?php while (have_posts()) : the_post(); ?>
       <div <?php post_class() ?> id="post-<?php the_ID(); ?>">
       <div class="item_head">
       <div class="item_header_text"><h1><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a</h1</div>					
	 </div> 
	 <div class="item_description"><?php the_content('Read the rest of this entry &raquo;'); ?></div>
         <div class="tags" ><?php the_tags('Tags: ', ', ', '<br />');  ?> </div>  
	 </div> 
	 <?php endwhile; ?> 
	 <div class="navigation">
		 <div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
		 <div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>
	 </div> 
	  <?php else : ?>
		<h2 class="center">Not Found</h2>
		<p class="center">Sorry, but you are looking for something that isn't here.</p>
		<?php get_search_form(); ?> 
         <?php endif; ?>

Online demo and free wordpress theme download

Preview red theme (3067)

Download there