0% found this document useful (0 votes)

345 views

How To Convert An XHTML Website Template Into A WordPress Theme

This document provides instructions for converting an XHTML website template into a WordPress theme. It explains that you need to rename files, add theme metadata to style.css, insert WordPress template tags, add the WordPress loop to display content, and modify paths and links. Following these steps will allow your template design and files to work with the WordPress content management system.

Uploaded by

Rusli Mubarok

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

345 views

How To Convert An XHTML Website Template Into A WordPress Theme

Uploaded by

Rusli Mubarok

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 15

How To Convert an XHTML Website Template into a WordPress Theme

Search This Site...

Pages Menu

Jon Bishop
WordPress, Social Media and Web Development

Categories Menu

Home

How To

How To Convert an XHTML Website Template into a WordPress Theme

Posted by Jon Bishop on Mar 16, 2010 in How To, Themes, Web Development, WordPress | 38 comments

How To Convert an XHTML Website Template into a

http://www.jonbishop.com/2010/03/convert-html-wordpress/[4/28/2013 9:09:15 AM]

How To Convert an XHTML Website Template into a WordPress Theme

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
9
Suka

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.

Email Print

What You Will Need

An XHTML web template A WordPress install A text editor (Like Dreamweaver or Notepad++) An FTP client (Like Filezilla)

Getting Started
First, lets 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 shouldincludethe 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.

http://www.jonbishop.com/2010/03/convert-html-wordpress/[4/28/2013 9:09:15 AM]

How To Convert an XHTML Website Template into a WordPress Theme

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-themes-homepage Description: a-brief-description Author: your-name Author URI: your-URI Template: use-this-to-define-a-parentthemeoptional Version: a-numberoptional . 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
http://www.jonbishop.com/2010/03/convert-html-wordpress/[4/28/2013 9:09:15 AM]

How To Convert an XHTML Website Template into a WordPress Theme

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(); ?>

http://www.jonbishop.com/2010/03/convert-html-wordpress/[4/28/2013 9:09:15 AM]

How To Convert an XHTML Website Template into a WordPress Theme

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 likelyreferenceyour 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 theappropriatetemplate tags. This is not fool proof as not all template structures are created equal but it will work a majority of the time.

http://www.jonbishop.com/2010/03/convert-html-wordpress/[4/28/2013 9:09:15 AM]

How To Convert an XHTML Website Template into a WordPress Theme

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). Theeasiestway to do this is to look for your contents header and begin The Loop there. The Loop will usually end immediately after yourcontentunless 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:
http://www.jonbishop.com/2010/03/convert-html-wordpress/[4/28/2013 9:09:15 AM]

How To Convert an XHTML Website Template into a WordPress Theme

<?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)
http://www.jonbishop.com/2010/03/convert-html-wordpress/[4/28/2013 9:09:15 AM]

How To Convert an XHTML Website Template into a WordPress Theme

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 canexcludepages by simply adding the page idsseparatedby 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 goesaccordinglyyou 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.
http://www.jonbishop.com/2010/03/convert-html-wordpress/[4/28/2013 9:09:15 AM]

How To Convert an XHTML Website Template into a WordPress Theme

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
Theme Development Stepping Into Templates WordPress Theme generator

Leave a comment below and continue the conversation, or 739 Save subscribe to my RSS feed to get articles like this delivered automatically to your feed reader.
saves