Categories
How To Themes Web Development WordPress

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

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 like
This 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 paths
Search 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.

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.

More Resources

53 replies on “How To Convert an XHTML Website Template into a WordPress Theme”

Looking to convert my own portfolio website into wordpress and so far this looks to be the best wordpress theme tutorial i’ve found. I’ll report back with my results.

hi
I have this site along with 56 other related to property, which i purchased from a guy.

I would like to convert these sites from PHP site into wordpress
how easy is it ??
some of the sites have thousands of pages (page for every town village and city in UK) and the guy wrote a script for these sites the changed the text content, im also worried that if i change these site i find that all the content is the same and the script he wrote was blackhat and having duplicate content on that many pages will kill the site completely.
can someone advise please how i can sort this

as dropped from number1 google to between page 5 and 7 but still between number 1-3 on bing and yahoo.

You could ultimately use this tutorial but it might be best to hire a developer if you wont to take advantage of custom post types, sidebar widgets and the new navigation admin. Every town could be its own “town” custom post type.

Otherwise you could follow the tutorial above and look up how to implement sidebars on another site. Form there you could easily add each town as a new page and work form there. Then you could take advantage of a plugin like WordPress SEO to manage duplicate content.

You deserve a Nobel price 🙂 Thank you for this, mayby you need to continue this tutorial and explain wordpress functions in “page, single, comments.php…”

We have been looking way to make WordPress visually resemble (and function) as IP.Board so this could prove useful to our 4 year old New York tourism site.

Will have to come back to this later on a LAN connection that is able to handle the YouTube videos since we are on the go.

Some people find the videos easier. It’s hard to explain when people don’t know the correct terminology. The point was to write a post with quick advice on creating basic WordPress themes. I think the videos were perfect compliments to the very basic content.

It’s soo easy going through the tutorial, and I like the video tutorial most. Love to learn everything about WordPress. Now I am getting crazy about WordPress. Before I came to know coding and all these stuffs in WordPress, I make my sites converted by http://www.wpconverter.com. And interestingly, they have converted my old site to a brand new wordpress site. Starting from that moment onwards, I start loving wordpress and having fun with it. Plz post more wordpress related tutorials!

Every town could be its own “town” custom post type.Otherwise you could follow the tutorial above and look up how to implement sidebars on another site. Form there you could easily add each town as a new page and work form there.

Great tutorial my friend. Thanks.

I would like to learn next level with a sidebar, comments …
could you please help me.

Thanks
Jiji

I am satisfied that you simply shared this useful and important information with webdesign. It’s really a cool and helpful piece of information. Please stay us informed just like this. Thank you for sharing.

[…] 39 For this regard you can take the help of an expert Web Designer and if you have some knowledge about this you can do yourself. But you need to be careful while performing this task. Hope the below mentioned link becomes helpful to you in this regard. How To Convert an XHTML Website Template into a WordPress Theme […]

Three things that may help.

I always name my stylesheet ‘style.css’ as I think WordPress looks for this.

Always place a forward slash ‘/’ after the ” section

Finally, Your style sheet will need a header to be recognised by WordPress. Place the follow at the very top of your main style sheet.

/*

Theme Name: The title of the theme.

Theme URI: the theme’s uri

Description: Describe the theme

Author: Your name

Version: 1.0

License:

License URI:

Tags: key-words, key-words, key-words, key-words, key-words,

*/

Your theme should now show up in your admin panel.

Hope this helps.

Leave a Reply

Your email address will not be published. Required fields are marked *