Convert a HTML Template into a WordPress Theme

It may be that you want to add some more functionality to your website using the power of WordPress. It may be that you are making a new WordPress website and want to incorporate an awesome HTML template that you found online. In either situation, you will need to convert the HTML template that you currently use into something that WordPress can understand and use. This tutorial will cover the basics of converting an existing template into a WordPress theme, and assumes that you have prior experience working with HTML, CSS, and PHP.

Planning

When doing any conversion, you need a plan of action. When turning a HTML template into a WordPress theme, the plan of action will require answering specific questions about how you want your site to look and function. After answering them, you may need to identify what specific elements should be added, changed, or removed from your HTML template.

Some Questions to be Asked

What do you want your front page to display? Static content, or your latest posts?

Since this page is where most of your viewers will first land, do you want to show a static page or do you want a list of your most recent posts? If your site is being upgraded from an old HTML site to WordPress, then a page showing the content you used to have on your homepage might be for you. If your site is centered around new content, then your latest posts should work.

Do you want a sidebar next to your content?

A search form, a list of your social media profiles, or many other widgets can be placed into a sidebar. Not having one gives you more space for the main content, but many users enjoy the features that a sidebar can offer.

Do you want people to be able to comment on your posts?

WordPress was originally just a blogging system, so the ability to comment has existed since the earliest versions. Of course, the ability to allow your viewers to comment on your posts is your decision. You can allow no comments on any posts, allow commenting on all post, or somewhere in between. If you do not want any commenting on your site, then you do not have to include a comments template when making your theme. It is still a good idea to have a comments template, however, just in case you find yourself needing it in the future.

Will you have a drop-down menu in your navigation?

Little things like this need to be addressed when converting your HTML template into a WordPress theme. WordPress allows you to make menus that can be several layers deep, but does your HTML template support that? You should check, and add whatever CSS is necessary before you discover that your navigation menu breaks your entire header layout.

Conversion

Now that you know what you want to do, now it is time to accomplish it. This section will focus just on a straight conversion. No adding or changing the HTML template. We’ll save that for the next section.

Breaking the Template Apart

The first step to making a WordPress theme out of a HTML template is to separate the sections of the template. Those sections include the header, the footer, the sidebar (if you have one), and the main content area. Each of these sections will get their own file within your new theme’s directory on your server. To start, FTP into your website’s wp-content directory, then go to the themes folder. Make a new folder using whatever name you choose, as long as that name includes only letters, number, dashes, dots, and underscores, and as long as that name starts with a letter or number.

Next, make the following files in the directory that you just created:

  • functions.php
  • footer.php
  • header.php
  • index.php
  • sidebar.php
  • style.css

The functions.php file is where all of this theme’s PHP custom functions should be placed. Footer.php will contain the bottom portion of your site, usually starting around the

<div id=”footer”>

or

<footer>

tags, and ending at the closing HTML tag. The header.php file will contain the top portion of your site, starting at the first line of the page and ending just after the header portion of your website. It will contain the

<head>

and the beginning of the

<body>

sections of your website. The index.php file will be the main file of this theme, and should be the leftovers of the template after everything is split into separate files. Sitebar.php is for the code needed for the main sidebar, if the HTML template includes one. Finally, the style.css file should contain information about your new theme and all of the CSS styles for this theme. Go to the WordPress Codex’s page on Theme Development in order to see what information should be put at the top of the style.css file. After that information is placed, copy all of the CSS styles from the HTML template’s stylesheet into style.css.

Linking the Files Together

You have separated the pieces of the HTML template into separate files, but you need to link them together so WordPress knows where to put each piece. First, open index.php in any code editor. Second, locate where the header used to be, and place in its place.

<?php get_header(); ?>

Third, locate where the footer used to be, and place in its place.

<?php get_footer(); ?>

Fourth, locate where the sidebar used to be, if the template has a sidebar, and paste the following code in its place.

<?php get_sidebar(); ?>

Finally, save index.php and open header.php. Find where the reference to the stylesheet is made, and replace the URL with Now save header.php.

<?php echo get_stylesheet_uri(); ?>

Adding a Sidebar

Assuming that you want or need a sidebar, you will need to set up your theme in order to allow WordPress to define what exists within the sidebar.

To access a sidebar, WordPress needs you to register it first. To do that, copy and paste the following code into your theme’s functions.php. If your template came with multiple sidebars, just copy and paste the first

register_sidebar

example until the number of registered sidebars equals the number of sidebars included with your theme. You will have to change the ID and name of each sidebar that you make, using any naming scheme you choose.

<?php
function my_register_sidebars() {
	/* Register the sidebar. */
	register_sidebar(
		array(
			'id' => 'sidebar',
			'name' => __( 'Sidebar' ),
			'description' => __( 'A short description of the sidebar.' ),
			'before_widget' => '<div id="%1$s" class="widget %2$s">',
			'after_widget' => '</div>',
			'before_title' => '<h3 class="widget-title">',
			'after_title' => '</h3>'
		)
	);
	/* Repeat register_sidebar() code for additional sidebars. */
}
add_action( 'widgets_init', 'my_register_sidebars' );
?>

To use the sidebars that you just registered, you will need to find where they currently exist. Find the code that makes up one of your sidebars, perhaps wrapped in a “sidebar” ID, and place

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("sidebar") ) : ?>

just after the ID is declared (changing the “sidebar” within

dynamic_sidebar("sidebar") )

to be the name or ID of the sidebar to be displayed), and place

<?php endif; ?>

just before the section is closed. If things were done correctly, you should end up with something that looks similar to the code below.

<div id="sidebar-primary" class="sidebar">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("sidebar") ) : ?>
   <div>{static sidebar item 1}</div>
   <div>{static sidebar item 2}</div>
<?php endif; ?>
</div>

Adding a Menu

WordPress added the ability to set custom menus in version 3.0. Similar to using sidebars, you can have multiple menus and rearrange content using a drag-and-drop interface. This also means that once you have the menus set up properly, you do not have to edit any files when you need to alter any of your menus.

Again, similar to sidebars, you need to register your intent to have a menu so WordPress can allow you to edit it in the admin interface. Placing

<?php register_nav_menu( 'primary', 'Primary Menu' ); ?>

into your theme’s functions.php will register one menu that you can use as your primary navigation menu. The “primary” text is the menu’s ID, the “Primary Menu” text is the menu’s description, and both values can be changed if needed.

When using a custom menu in your theme, you may have to modify some CSS styles in order to properly display the code outputted by WordPress. To actually add the menu, just copy and paste

<?php wp_nav_menu( array('menu' => 'primary' )); ?>

into the location where your menu previously resided. You many need to experiment with the placement of the code in order to see where the CSS initially works the best. More information about customizing the display of the menu can be found at the Codex page for wp_nav_menu

Static to Dynamic Content

If you decided to use WordPress to run your site, you probably want to be able to easily add or change the content on your site. Right now, your theme is still using the text included with your HTML template. This means that you will have to replace what is there with tags and functions that WordPress can understand and use to display your dynamic content.

To display posts, pages, or any list of posts and pages, WordPress uses what is called the “Loop.” The most basic version of the Loop is displayed in the code below.

<?php if (have_posts()) : ?>
               <?php while (have_posts()) : the_post(); ?>    
               <!-- do stuff -->
               <?php endwhile; ?>
     <?php endif; ?>

Whether displaying one post or twenty posts, the Loop can handle them all. That code checks to see if you have posts to be displayed, and then runs through a

while()

loop to display each post using the code placed where

<!-- do stuff -->

is located. Since you will want to display content from the Loop, you will need to place the content’s template from your HTML template into here, and replace things such as the title, metadata, and content with functions that WordPress provides.

For the title of the content, replace it with

<?php the_title(); ?>

, and use

<?php the_permalink() ?>

for the title’s link source. If you want to display the time the post was published, use

<?php the_time('F jS, Y') ?>

for a Month Day, Year format. Displaying the author is as simple as adding

<?php the_author_posts_link() ?>

wherever you want to display the author’s name with a link to his or her author page. For the post content itself, replace what was included with the HTML template with

<?php the_content(); ?>

. When adding these tags, you will have to remember to keep whatever wrapper is in place for each element, such as

<h2>

for the title and

<div>

or

<article>

for the content.

A few more functions to add

Your theme may be ready to display your content, but there are some important functions to reference in your theme before it is ready to go live. For the title of the page that displays in your browser, replace the text within the

<title>

tags in your header.php file with

<?php wp_title('|',true,'right'); bloginfo('name'); ?>

. Also in the header.php file, add

<?php wp_head(); ?>

just before the

</head>

tag. For classes defining the body, add

<?php body_class(); ?>

to the

<body>

tag, turning it into something that may look like

<body <?php body_class(); ?>>

. Saving header.php and opening footer.php, place

<?php wp_footer(); ?>

into the line just before the

</body>

tag.

Adaptations

For the most part, your WordPress theme is ready to launch. You have converted a HTML template into something that can do so much more. However, some pieces that make up a full theme are missing, such as the ability to comment or have custom styles for particular posts or categories. This section will cover how to add in some of those features.

Comments

To add the ability for users to comment, you need to edit the Loop. Add

<?php if(comments_open()) (comments_template('', true);) ?>

just after calling the

the_content();

function. If you do not have a comments.php file within your theme, WordPress will try to use the comments template of the default theme (so make sure you do not delete it). However, if you want to customize the comments template, copy and paste the comments.php file from the default theme into your theme’s directory, then edit the file you just placed within your theme’s directory. Assuming that your template did not consider commenting when being made, you may need to add some CSS styles yourself in order to properly display the comments and comment form.

Custom Classes

Do you want a way to identify what a post is so you can use custom CSS? Place

<?php post_class(); ?>

within the tag encasing your post content. If you have any classes that are already defined, place them within the function separated by a space in order to have WordPress output them as well, making the function call similar to

<?php post_class(“class1 class2”); ?>

Summary

Assuming everything went well, you should have a WordPress theme that is capable of doing what you originally set out to do. Your theme should resemble the HTML template you selected, plus or minus some changes you made yourself. There is so much more to themes, but this tutorial was to show how a developer could convert a HTML template into a WordPress theme, which means that some of the better features that themes can use are not included with this tutorial.

If you need more features in the future, the theme that you made should allow for the use of most plugins. If needed, you can always read the pages of the WordPress Codex relating to developing themes, and add the files and functions as needed.

Whether needing more from your site or building a new one with a template in mind, the conversion process can seem quite complicated to a novice, but patience and knowledge will allow you to do what you need to do with some level of success. Once your theme is live, you can take pride in knowing that you learned how to do something new and were able to apply that knowledge to your own website.

Resources

Link: Theme Development/Template Files in the WordPress Codex
Link: Function Reference/register sidebar in the WordPress Codex
Link: Function Reference/wp nav menu in the WordPress Codex
Link: The Loop in the WordPress Codex

About 

Chris Ellison is a web developer living in the United States, and has been working with WordPress since 2009. He owns Abbson Studios, a design studio where he is free to experiment with new ways of molding WordPress into whatever he wants or his clients need.

16 thoughts on “Convert a HTML Template into a WordPress Theme

  1. Very nice tutorial Chris. I’ve been looking for the right tutorial to show me how to do this. I appreciate you sharing your knowledge and expertise with the community.

  2. actually just going through the tutorial more (thanks!) and am coming across code snippets where instructions and code are mixed up which is a little bit confusing – i think it would be a lot clearer and easier to follow if these parts were separated, thanks!

  3. find:

    “Finally, save index.php and open header.php. Find where the reference to the stylesheet is made, and replace the URL with Now save header.php”.

    replace with:

    “Finally, save index.php and open header.php. Find where the reference to the stylesheet is made, and replace the URL with”.

    and then:

    “Now save header.php”.

  4. Web2WordPress provides this service as well. GReat writeup on the tutorial – most people forget that wp_head code and the wonder why the menu doesn’t show up…

  5. Can any one tell me if i had an image inside & i want to display things separately so what should i Do.?

  6. Tariqawan,
    If you want to display the image within the area replaced by the_content(), then all you need to do is create a page in WordPress and embed that image within that page. If it’s the home page, then make sure to set that page as the front page in Settings > Reading within wp-admin.

    If the image you want to embed is not within that content block, then you can keep it as-is. The only attribute you should change, however, is the image source, where you should replace “http://www.yoursite.com” (make sure to not replace the slash after .com) with “&gt?php echo home_url(); ?<” in order to make your converted theme more flexible for the future.

  7. I definitely appreciate the idea. And I think this would be good for novice users who want to start learning on how to make their own WordPress themes from html. But, In my opinion though, manually creating your own WordPress theme may be from scratch is much better. I think we can have more control on the theme that way.

  8. My regular HTML Conversion service provider is SoftUp, more than 210 projects they successfully completed the projects with the Perfect HTML5 coding and with W3 HTML5 validated to me. Also they Blisteringly fast in Conversion. If any of you want to complete the project in short span of time, with perfect Coding standard i STRONGLY recommend SoftUp.in – http://www.softup.in

Comments are closed.