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

0saves
Leave a comment below and continue the conversation, or subscribe to my RSS feed to get articles like this delivered automatically to your feed reader.
  • http://www.wordprax.com/services/html-to-wordpress Maria Mincey

    High Quality HTML to WordPress conversion services of wordprax : http://www.wordprax.com/services/html-to-wordpress

  • Pingback: Converting an existing HTML file to WordPress? | Top Blog Tips

  • Pingback: Convert HTML to WordPress Tutorial | WP Deals and Tips

  • Pingback: Converting an existing HTML file to WordPress?

  • Pingback: 10 Reasons WordPress Is The Best CMS | WordPress Workshops

  • http://twitter.com/RifdanellaMedia Rifdanella Media™

    hi jon ,, many thanks for your info…

  • Pingback: How do I convert a Dreamweaver template into joomla or wordpress? | Technology World

  • Pingback: HOW TO CONVERT AN XHTML WEBSITE TEMPLATE INTO A WORDPRESS THEME

  • Pingback: Converting an existing HTML file to WordPress? | HTML Trends

  • http://richardcummings.info Richard Cummings

    I am now converting an HTML site to WordPress and your page here provided needed refresher info.

    Many thanks,
    Richard

  • http://www.apptec.net AppTec

    Very nice tut

  • andy

    Followed this exactly and it doesn’t find my style sheet for some reason.

    • http://www.midwebsdesign.com Marvin

      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.

  • http://www.mcxlive.in Mcx Tips

    Greate Thanks! For Sharing

  • habibullah

    Great ! very usful for wordpress developer and desginer

  • Pingback: Convert website

  • http://tanuj.6te.net Tanuj

    Thanks Friend for such a Nice Tutorial…

  • http://3dwebdesign.org/%D0%B8%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%BA%D0%B0-%D0%BD%D0%B0-%D1%83%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82-%D0%B7%D0%B0-%D1%87%D0%B0%D0%B9-%D0%B8-%D0%B1%D0%B8%D0%BB%D0%BA%D web design

    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.

  • http:///user/view/734260 Waylon Litzinger

    I’m usually to blogging and i really respect your content. The article has really peaks my interest. I’m going to bookmark your website and maintain checking for brand spanking new information.

  • jiji v john

    Great tutorial my friend. Thanks.

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

    Thanks
    Jiji

  • http://www.icipl.co.in Builders

    nice tutorials thanks

  • http://learnhowto.in nikhil

    easy to understand…. thnks for this tuts…

  • http://halcousa.com/ Military Velcro USA

    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.

  • http://www.jintech.in Jyotirmay Intellisense

    your short tutorial is not difficult to understand and looking more tutorial from your site, I’ve bookmarked the site..

  • http://www.damntruth.com WpLover

    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!

  • omg

    Whats with the stupid videos? Is it so hard to write?

    • http://www.jonbishop.com Jon Bishop

      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.

  • http://411ny.org 411 New York

    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.

  • Keijo

    Thx! Very good tutorial.

  • http://stormbloom.com Stormy

    so from the get “” generates syntax errors in my dreamweaver

  • darkhorn

    will work? it has no dot with comma.

  • http://www.namase.com Rajesh

    Excellent tutorial thanks

  • Miki

    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…”

  • http://www.indiworldweb.com/ Kap

    Find free premium CMS based web templates @ http://www.indiworldweb.com, easy to customize and SEO friendly.

  • http://www.web-flash-template.com/ Charlie

    Thank you for the useful tips.

  • http://www.fast-house-sale.co.uk ralph cook

    thanks for advise Jon

  • http://www.fast-house-sale.co.uk ralph cook

    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.

    • http://www.jonbishop.com Jon Bishop

      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.

  • Pingback: Weekly WordPress Review - WPCanada

  • Pingback: caut ajutor platesc instant - GTop.ro / GTopStats.com official forum

  • Ian

    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.

  • ali

    thanks for this post
    its greaaaaat!!
    you are my hero :)

    • http://www.jonbishop.com Jon Bishop

      Always nice to hear others found this useful :)

  • http://www.rangopur.com Rana

    This is good. Its gonna work for me.

    • http://www.jonbishop.com Jon Bishop

      Glad I could help.

  • http://webdesign.ducktoes.com Cathie

    I’m really interested in this since so many clients want CMS. I’m going to try it.

    Thanks.

  • hadingrh

    Awesome… thanks for a great tutorial

  • Pingback: How To Convert an XHTML Website Template into a WordPress Theme – Jon Bishop – WordPress Themes

  • cpreston

    excellent tutorial my friend.

    best ( and most useful cause of the vids ) i’ve seen so far.