Roshan Book

My Tech Notebook

How To Convert an XHTML Website Template into a WordPress Theme


Source: http://www.jonbishop.com/2010/03/convert-html-wordpress/

So you have an XHTML valid website template and you would like to put it on top of WordPress. Whether you are starting from scratch or moving your existing website to WordPress as a CMS, this guide will help you get the conversion done.

Keep in mind that these are the basics and this is not a guide on how to develop themes for public release.

What You Will Need

Getting Started

First, let’s set up our theme files.

Prepare your files

For this tutorial we are going to use the minimum number of theme files needed to create a functional WordPress theme. Your existing template files should include the following:

  • An HTML Template File
  • A CSS Stylesheet
  • An images folder

You should rename your HTML Template File to ‘index.php’ and your CSS Stylesheet to ‘style.css’. This is important and is how WordPress knows which files are which.

This is an example of what your theme folder should look likeThis is an example of what your theme folder should look like

Add WordPress Theme Info (video)

This is where your WordPress Theme gets your theme name, description, author link, etc. All you need to do is create a commented out area at the top of your stylesheet as follows:

/*
Theme Name: Rose
Theme URI: the-theme’s-homepage
Description: a-brief-description
Author: your-name
Author URI: your-URI
Template: use-this-to-define-a-parent-theme–optional
Version: a-number–optional
.
General comments/License Statement if any.
.
*/
CSS Goes here…

Adding Template Tags To Your Theme

Template Tags are bits of code that WordPress uses to populate your website with content. Different tags display different bits of information from the WordPress database. These are the main tags needed to make your WordPress theme work.

Page Title – (video)

Change whatever is within your <title></title> tags to:

<?PHP wp_title(”); ?>

Stylesheet – (video)

We are going to need to swap out the call to our stylesheet with:

<link rel=”stylesheet” href=”<?PHP bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”screen” />

Plugin Hooks – (video)

Next you will need to add Action Hook Template Tags so WordPress plugins can access your theme. All you need to do is add:

<?PHP wp_head(); ?>

to your header (Usually write above the closing </head> tag).

Then you should add:

<?PHP wp_footer(); ?>

to your footer (Usually write above your </body> tag).

Media and Script Paths – (video)

By default, your paths will most likely reference your site root. You will need to point all of your multimedia, scripts and stylesheets to your new theme folder within the WordPress file structure using:

<?PHP bloginfo(‘template_directory’); ?>

The easiest way to do this is to do a search and replace for ‘src=’ and add the appropriate template tags. This is not fool proof as not all template structures are created equal but it will work a majority of the time.

Search and Replace to change paths to WordPress theme pathsSearch and Replace to change paths to WordPress theme paths

Adding The WordPress Loop

The WordPress loop is what handles all of your websites content. Its main components are:

  • A header
  • A permalink
  • Some Content

First you will need to identify where your content starts/repeats (if it repeats). The easiest way to do this is to look for your content’s header and begin The Loop there. The Loop will usually end immediately after your content unless you are displaying extra information below your entries. You will also need to identify where your content begins and ends. Scroll to the end of this section to view some example code.

The Loop Code – (video)

Beginning:

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

End:

<?php endwhile; endif; ?>

Template Tags Within The Loop – (video)

The Title:

<?php the_title(); ?>

The Permalink

<?php the_permalink() ?>

The Content

<?php the_content(‘<p>Read more</p>’); ?>

Example Code

So this becomes this.

Navigation – (video)

Most themes will have the navigation within an unordered list. This makes things easy for you. All you need to do is replace the list elements (everything between the <ul></ul> tags) with the following:

<?PHP wp_list_pages(‘title_li=&depth=1&sort_column=menu_order&exclude=’); ?>

This is the most basic of menus and wont display child pages. You can exclude pages by simply adding the page ids separated by comas after “exclude=”. Learn more about wp_list_pages().

Upload and Activate Your Theme

Now all you have to do is upload your theme folder which should now consist of:

  • An index.php file with custom code
  • A CSS file with header information about the theme
  • An images folder with all of your images

If all goes accordingly you should have a functional WordPress theme that allows you to add new pages and posts as well as use most popular WordPress plugins. It is important to note that you will not be able to add widgets to your sidebar and people will not be able to comment on posts. There may also be some other limitations due to the themes simplicity.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: