Convert an HTML Template to a WordPress Theme: How-

Though WordPress has a huge number of themes available, I often get clients asking me if it is possible to take a standard HTML / CSS template and transform it into a WordPress theme.The answer is yes, and to do the basic conversion, it is affordable and fast.The way I convert a template to a WordPress theme involves a few easy steps. In this post, I’ll explain how to get a simple conversion underway.

Step 1: Prepare
At this point, you should have an HTML file, a CSS file, and a directory of images for your template. Make any design changes now, because later you will need to edit more than one .html and one .css file. Where the main content of your page is, make sure there is only one ‘content block.’ You won’t need any others, as WordPress loops through this section to populate your page with posts.Once you have your design finalized, you are ready to cut that html file up into the component parts of your new WordPress theme.

Step 2: Slice ‘n’ Dice
Create a new directory for your theme. It is in this directory that you will place the PHP files, with content supplied by your converted template. Go through your HTML file, and mark each section in the file. The sections you are looking for are:

• Header
• Sidebar
• Footer
• Main Content (where your posts will go)

Mark the header, sidebar and footer sections with something like

1	<!-- HEADER STARTS/ENDS HERE -->

, and where your main content is, use

1	<!-- WP LOOP STARTS/ENDS -->

for the beginning and end of each section.Now create files called header.php, sidebar.php, and footer.php. Cut the code between the

1

<!-- -->

tags and paste it into the relevant files.Finally, take all the remaining code, and paste it into index.php. Replace the

1	<!-- SECTION STARTS HERE -->

tags for each section with the relevant php code:

1	<?php get_header();?>

or

1	<?php get_sidebar();?>

or

1	<?php get_footer();?>

Finally, copy your CSS file (rename it to style.css if necessary) and your image folder into your theme directory.

Step 3: Add a Dash of WordPress Code
Add the following to your header.php file:

1 2 3

<meta http-equiv="Content-Type"content="<?php bloginfo('html_type'); ?>;charset=<?php bloginfo('charset'); ?>" /> <title><?php bloginfo('name'); ?><?php wp_title(''); ?> </title> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"type="text/css" media="screen" />

You can find code to add to your sidebar and footer in the WordPress Codex.Lastly you need to add the WordPress Loop, the code which will generate all of your small business’ or personal blog content.Add the following above your

1	<!-- WP LOOP STARTS -->

comment in index.php:

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

Where the article title would be (usually inside h1 or h2 tags) you should add this code to get the page or post title:

1	<a title="Click to read: "<?php strip_tags(the_title()); ?>" href="<?php the_permalink(); ?>"><?php the_title(); ?></a>

And the following code should replace your sample article:

1	<?php the_content("Read more..."); ?>

Add all the following above your comment:

1	<?php endwhile; ?>

Navigation between articles can be added:

1 2 3 4 5 6 7 8 9

<!-- Article Navigation --> <div class="navigation">     <div class="alignleft">         <?php posts_nav_link('','','« Previous Entries') ?>     </div>     <div class="alignright">         <?php posts_nav_link('','Next Entries »','') ?>     </div> </div>

You can then add this code for anybody who has an outdated link to a post or page:

1 2 3 4

<?php else : ?>     <h1>Error: Not Found</h1>     <p>The page you were looking for is not here.</p> <?php endif; ?>

Step 4: Install
Once this is done, save the page as index.php, single.php, and page.php. You can customize each of these to have different display elements for the main page (index.php), single post pages (single.php), and pages (page.php).There are many more ways you can customize your theme, by adding additional WordPress features (see the WordPress Codex for examples), but for now, either zip all your files and upload your theme with the Theme Installer, or copy your theme folder to your wp-content/themes/ folder in your installation of WordPress.

Step 5: Final Tweaks and Maintenance
Once the theme is copied or installed, CHMOD all files to allow you to edit them within the WordPress theme editor (Appearance -> Editor), and continue editing and tweaking until you are happy with your new theme.