From time to time it happens that we get good tips from our readers. One of these days I get a mail from one of Cashrevelations readers. The name of the reader is Jon. Jon wrote:

I subscribe to your site as I always enjoy your tutorials and informative posts. I would like to request a tutorial on how to convert a simple xhtml/css website into WordPress. There’s nothing really out there that’s too clear or noob-friendly

And like president Obama would say: Yes, we can (write that tutorial)!

This tutorial will be in two parts and we will keep this first part as simple as possible. We will use an XHTML template, Natural Blues, by Reality Software (you can see a preview below) and convert it to a WP theme. In this first part of the tutorial we are going to do this by using a minimum of files to create a somewhat working WordPress theme.

You need to be able to test your theme before you put it online. We deeply recommend you to Install WordPress Locally On Your Computer – it is not difficult and it is fun.

1. Preparation

Create an empty folder and name it with your theme name, and in that folder you paste a copy of your XHTML template (with the stylesheet and images folder).

You should have the following files:

• One XHTML Template File
• One CSS Stylesheet
• One images folder

Open the HTML Template File and rename it to ‘index.php’ – and then open your CSS Stylesheet and rename it to ‘style.css’. If there is sample content in your template – remove all of it from the index.php. Keep the index.html for a while like a reference.

2. Add WordPress Theme Info To The CSS Stylesheet

Open style.css and paste the code below in the very top of the CSS stylesheet:

/*
Theme Name: YOUR THEME NAME
Theme URL: FULL HOMEPAGE URL OF THE THEME
Description: YOUR DESCRIPTION OF THE THEME
Author: YOUR NAME
Author URI: FULL URL OF YOUR HOMEPAGE
Version: OPTIONAL NUMBER
Tags: DESCRIBING TAGS SEPARATED WITH COMMAS
*/


Do not forget to paste (and change the capital letters to your information) this code to your stylesheet. This piece of code gives your new theme a name and all the other basic information needed by WordPress.

3. Add WordPress Template Tags To Your Theme

WordPress uses Template Tags to add content to your page. Below you have the basic tags you need to make a working WordPress theme.

Page Title

Open your XHTML template with your favorite text editor and change this:

<title></title>

to this:

<title><?php wp_title(""); ?> <?php if(wp_title(" ", false)) { echo " | "; } ?> <?php bloginfo('name'); ?></title>

The CSS Stylesheet

Remove the CSS stylesheet linking (in the head section of the XHTML template) and replace it with this code:

<style type="text/css" media="screen">
@import url( <?php bloginfo('stylesheet_url'); ?> );
</style>

Add Action Hooks

Just above the </head> tag, you paste the following code:

<?PHP wp_head(); ?>

And this code above the </body> tag:

<?PHP wp_footer(); ?>

These pieces of code make some WordPress plugins able to access your theme.

4. Add The WordPress Content Loop

The Loop is used by WordPress to display each of your posts. Copy and paste all this code inside the <div> where you want your content to appear (see the source files).

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>

These tags below get the current post’s title, and other information (like date etc.):

<h2 id="post-<?php the_ID(); ?>">
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
<?php the_title(); ?></a></h2>
<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>

This tag displays the content of the post:

<div class="entry">
<?php the_content('Read the rest of this entry &raquo;'); ?>
</div>

Below each post in the index.php file is a place to display more information (categories, date, and comment information):

<p class="postmetadata">
Posted in <?php the_category(', ') ?>
<strong>|</strong>
<?php edit_post_link('Edit','','<strong>|</strong>'); ?>
<?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></p>

The following tag ends The Loop:

<?php endwhile; ?>

This code is directly after the end of The Loop, displays navigation controls to move forward and backward:

<div class="navigation">
<div class="alignleft"><?php posts_nav_link('','','&laquo; Previous Entries') ?></div>
<div class="alignright"><?php posts_nav_link('','Next Entries &raquo;','') ?></div>
</div>

If there is no posts to show up:

<?php else : ?>
<h2 class="center">Not Found</h2>
<p class="center">
<?php _e("Sorry, but you are looking for something that isn't here."); ?></p>
<?php endif; ?>

The WordPress Codex has an excellent explanation of the The Loop in Action.

5. Add The Menu

Many XHTML templates have the top menu within an unordered list. In that case you remove everything between the <UL> tags, and paste this code between them:

<?php wp_list_categories('title_li=0'); ?>

Our template didn’t have an unordered list as a menu – so we must make some changes in the CSS stylesheet. You can see the changes we did if you download the source files to this tutorial. You can also read more about this in the WordPress Codex: wp_list_pages.

By now, you should have a functional WordPress theme. To take full advantage of the WordPress flexibility, you need some more work. It is now possible to use the theme as it is, but you will not be able to add widgets and people can not comment on your posts.

Add Some Extra Tags To Your WP Theme

RSS Feed & WP Version Info

Paste the following code to the <head> section of the template:

<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />

<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href=">?php bloginfo('rss2_url'); ?>" />

This code will add WP version info and your RSS feed to your theme.

Blog Name

Paste this code to logo section of the theme:

<a href="<?php bloginfo('url'); ?/"><?php bloginfo('name'); ?></a>

In our case it was inside the <div id=”logo”></div> – this code will automatically display your blog name.

Images

If there are images in your template XHTML layout (you don’t need to do this with images in your stylesheet or posts), paste the following just before the image URL:

<?php bloginfo('template_directory'); ?>

For example, change this:

<img src="images/cnn.gif" alt="" />

to this:

<img src="<?php bloginfo('template_directory'); ?>/images/cnn.gif" alt="" />

Copyright

Paste this code to the footer section of your theme:

Copyright © 2010 <?php bloginfo('name'); ?>. All Rights Reserved.

In our case it was inside the <div id=”footer_left”></div> tags – this code will display copyright notice.

Now it is time to test your theme. Do not put it online before you have done that. It is always problems and some more tweaking before it is presentable – and to test your theme you use your local WordPress Installation.

This ends the first part of this tutorial. In the next part, we make this XHTML template to look more like a real WordPress theme (with sidebar.php, footer.php etc.). Good luck with your project, and do not forget to download the source files.

• Download The XHTML To WordPress Source Files