Turning a Template into a WordPress Theme

There’s simply no point in overlooking the internet’s vast collection of web templates just because you find the WP conversion process daunting. Turning a basic web template into a WordPress theme simply requires some slice-and-dice routines and a little bit of patience. Here’s how to do it:

The First Step: Opening the Template’s Index File

The first step in the process is simply to get a handle on what needs to be done with the downloaded web template. This is best done by opening the site’s index file, typically named something like index.htm or home.htm. This file will look like a standard XHTML document, with <head> and <body> tags inserted appropriately. Within the body tag will be a clearly denoted header, navigation area, content body, and footer. This is the main focus when it comes to turning a simple index page into a series of templates.

The first thing a user should focus on should be the WordPress header.php file. This is the file which displays the page’s title, announces its file format and programming language, includes keywords, and displays the masthead, navigation, and other above-the-fold information. Generally speaking, the page’s header starts at the DTD document tag (look for a line which declares the file XHTML 1.1 Strict, or something similar) and ends after the code passes the body tag and displays navigation links. Simply copy all of this information and paste it into a new, blank text file. Save that file as header.php and prepare to make some edits.

WordPress requires certain variables and information be placed into the page header, and this is a relatively simple conversion process. Most important is that the page’s title information can be dynamically modified by the WordPress software itself depending on where a user is locoed within the site. Remember that this header is used on every WordPress page, so a static <title> tag is of no use. Locate that <title> tag and replace it with something similar to the following example:

<title><?php bloginfo( 'name' ); ?> ); ?></title>

The title above will display the blog’s actual name first (this is defined within the WordPress Dashboard), and it will then display information such as the entry title, the page name, or the currently-selected category. In between the page title and the page name, it will display the “>” character. In practice, it looks like “Your Blog> Your Page”. This can be modified by either rearranging the two tags, or by changing the “>” character in wp_title.

Next, the wp_head tag must be added, which adds some critical information about a website such as its current WordPress version and any RSS feeds which are relevant to the page currently being displayed. That variable is pretty simple:

<?php wp_head(); ?>

Finally, the header must define a pingback URL and it must include the current theme’s stylesheet. Those two lines of code look like the following and must also be placed within the <head> tag:

<link rel="stylesheet" href="" type="text/css" media="screen" />
<link rel="pingback" href="" />

This might be an opportune time to rename the stylesheet file included with the theme to the name stylesheet.css, which is the standard convention for placing it within a WordPress theme folder. Now it’s time to skip to the bottom of the downloaded theme’s index page to define the footer.

Closing the HTML File with the Page Footer

Create a new, blank file in your text editor an name it footer.php. Into this file, place everything that lies below the main content area (the body and sidebar, or similar features). This will include basic copyright information, theme author credits, and the </body> and </html> tag. Remember, you can modify the information in this footer so as to remove author credit (although that’s not very nice), and to insert your site’s own name and copyright information. Also, the wp_footer variable must be placed into this document. That variable can be seen here:

<?php wp_footer(); ?>

With your site’s information added to the footer, and the WordPress footer tag added to the mix, it’s time to save the document and close it. It can now be placed with the finished header.php file and the renamed stylesheet.css file in the theme’s containing folder.

Creating the Main Content Area for WordPress Pages

So far, the theme has been placed into its own folder which now contains a header, a footer, and a stylesheet. This is actually the hardest part of slicing a non-WordPress theme into one which works with the software’s dynamic variables and PHP includes. The next two steps simply involve creating and including a sidebar, and bringing the standard WordPress Loop into the main content area so that entries, archives, categories, and tags can be viewed by readers.

For the sidebar, things are pretty simple. Locate the current sidebar code (but NOT the containing <div> tags) and cut it out of the file, just like what was done with the header and footer. Paste that information into a new file named sidebar.php which should be created using a plain-text editing program as in the prior steps of this guide. Modify the actual XHTML content of this sidebar to your liking, and then add the following code to enable the placement of WordPress widgets within this content area:

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : endif; ?>

Save the sidebar file, as it is now complete and ready to be uploaded alongside the theme’s other files. Next, return to the theme’s main index file. This is now going to become the index.php file of the WordPress theme, and will also be saved as single.php, page.php, category.php, and archive.php. Because these templates generally print the same information and have a uniform appearance, the index.php template can simply be used to provide their basic form and functions.

The first thing that needs to be done is to include the WordPress sidebar file which was just created. This is done by using a standard WordPress variable. Where the sidebar content was once located, simply paste the following short variable to dynamically call the sidebar.php file you created:

<?php get_sidebar(); ?>

That’s all there is to it. The sidebar is now called and included on every WordPress page. Now, the only that remains is bringing the standard WordPress Loop into the template so that entries, categories, and other information can be displayed to the end user. The WordPress Loop, in a most basic form, looks like the example below.

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

<h2 class="title"></h2>

Posted on by

<span class="the-content">
<?php the_content(); ?>
</span>

<p>Posted in <?php the_category('; '); ?></p>

<?php endwhile; else: ?>
<p><?php _e('Sorry, there's nothing here for you to see!.'); ?></p>
<?php endif; ?>

Loop information can be vastly changed using a large number of WordPress variables, and those developers who are not familiar with all of the options available to them would be well-advised to consult the WordPress Codex for full documentation on which information can (and should) be contained within the Loop and which information should be placed outside of it. However, the example above will print the entry title, date, author, content, and categories, as well as provide for an error message if a user arrives at a post that no longer exists or has been moved to a different location.

One Small Addition to the Template Files

The index file is now complete and ready to be used as a WordPress theme, and it has been saved as a category, archive page, single entry page, and dynamic content page, as well. It is paired with the header and footer, and all of these files are subject to the pre-defined information in the theme’s stylesheet file which has been renamed to stylesheet.css. It seems as is everything is finished, but that is actually not the case. Two things must now be done.

The first is the creation of a comment template that contains the default appearance of comments submitted by readers on each entry. This file is generally included with WordPress themes, but is sometimes left out of regular web templates which are not designed to serve as blogs. Peruse the included files that came with the downloaded theme and search for a comments template; if one exists, simply place the WordPress comment variables into the template within the Comment Loop. If one doesn’t exist, it’s time to roll up your sleeves and create a comment template from scratch.

Alternatively, examples exist online of very basic, standard comments templates which can be used in this case and simply included within the page’s main content area. Be sure to take on only the design commitment which your skills can handle.

Finally, the theme must be uploaded and tested for any bugs. Remember that this is not a theme which is native to WordPress, and your coding may be inaccurate in some places or you may have forgotten to insert a tag in others. Be sure that the entire assembly comes together and functions as well as it looks. When it does, the job is finished and the downloaded template has been successfully converted to a stunning and unique WordPress theme.

Author: (40 Posts)

Vladislav Davidzon is the principal of US-based online marketing consultancy Vladislav Davidzon & Associates, developing integrative solutions through high impact search engine optimized WordPress websites for socially responsible customers of all sizes around the world.

Comments