How To Convert an XHTML Website Template into a WordPress Theme
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
- An XHTML web template
- A WordPress install
- A text editor (Like Dreamweaver or Notepad++)
- An FTP client (Like Filezilla)
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.
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
Author URI: your-URI
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.
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)
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php endwhile; endif; ?>
Template Tags Within The Loop – (video)
<?php the_title(); ?>
<?php the_permalink() ?>
<?php the_content(‘<p>Read more</p>’); ?>
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.
Feel free to contact me if you would like to learn how to bring your theme to the next level with a sidebar, comments and other interactive elements.