Introduction: Convert Your HTML Website to WordPress in 9 Easy Steps

By
About: Mitchell Lehmann is a passionate web developer and works as a freelancer. He is an expert in converting PSD design to WordPress and HTML website to WordPress conversion. He has more then 5 years of experience …

In the age of media-rich content and interfaces that interact with touch, static HTML websites count as barely more than a ‘yellow-page’ listing on the directory of web. So if you want to move, nobody’s going to point fingers. In fact, your clients will sigh in relief, and majority of community will offer help. Like this article.

This is a guide for developers covering the basics of HTML to WordPress conversion. If you are completely unfamiliar with coding and have great content on your previous site that you don’t intend to lose, then I recommend you try not to be a hero. If you mess up, the consequences could be irreversible, and I speak from experience. Hire WordPress developers or a professional conversion service to convert HTML to Wordpress for you instead. That way, you have someone to blame.

Alright…

Step 1: Hosting Plan

WordPress has two ‘types’: the managed VIP-style WordPress.com and the self-hosted WordPress.org. For the purposes of this article we will go with self-hosted.

WordPress requires both PHP 5.6 and MySQL 5.6 or above on the servers, so make sure your server works on those versions. Choose a hosting plan (dedicated, shared, etc.) after carefully evaluating/estimating your site traffic.

Step 2: Install WordPress

  1. Check that your web host has minimum WordPress requirements (PHP and MySQL versions 5.6).
  2. Head over to WordPress download page. Download the latest stable release (currently at 4.4.1).
  3. Unzip the file and extract the content to a folder on your hard drive.
  4. Make sure you have a secure password (for your Secret Key).
  5. Install the system, run it, and login to admin.

Step 3: Decide What You Want to Transfer

Okay, this is where things get interesting:

  • If you want to continue using your HTML site’s design, you will need to write a custom theme (as described in steps. 4 to 8).
  • If you just want the content and can do with a different look, find a theme you like, install it (as directed in Step 8.), and head to Step 9.

Step 4: Create a New Theme Folder

Create a new folder on your desktop and change the name to your eventual Theme’s. Here we will call the theme NeoTheme. You can choose anything you like.

Create empty files named:

  • Style.css
  • Index.php
  • header.php
  • sidebar.php
  • footer.php

…and so on. These files will be your theme’s templates.

Save every single one of them in NeoTheme. Pay special attention to caps-lock, these will be default templates and files, and they don’t have any capital letters.

Step 5: Copy Existing Stylesheet Into Style.css File

If your HTML website used CSS to style page elements, you need to find the file, open it and copy the entire CSS to clipboard.

Now open the style.css file and paste it there.

If you are doing this for a client, a good practice is to add this bit at the beginning of stylesheet as a marketing/branding/reminder type thing. It’s optional:

/*
Theme Name: NeoTheme

Theme URI: Your theme’s URI

Description: A brief description of your theme

Version: 1.0

Author: Your name Author URI: Your website address */

Step 6: Chop Your Current HTML

Also called ‘chopping’, this is easier than it sounds.

Open your HTML site’s index.html file. Start from top, select everything up to tag div class=“main”. Copy it. Now in NeoTheme folder, open header.php file, paste the HTML there, save it and close.

Similarly, copy the tag aside class= “sidebar” and everything inside it. Open NeoTheme folder, open sidebar.php and paste it there. Save it and close.

Essentially, in this part you have to identify HTML tags that describe various page elements and paste that code into the related php file.

Afterwards, copy everything that’s left and paste it into index.php. Save it.

Step 7: Brushing Up Index.php File

index.php should be able to call the other sections (templates) as required.

To call the header:

<?php get_header(); ?><br>

At the very end of index.php, to call sidebar and footer:

<?php get_sidebar(); ?><em><br></em>
<?php get_footer(); ?>

WordPress theme anatomy has two rules which apply to all themes, i.e., template hierarchy and The Loop.

The loop displays your content to the visitors. This is the loop. And it goes into index.php:

<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class();?>>
<div class="post-header">
<div class="date"><?php the_time('Mjy');?></div>
<h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<div class="author"><?php the_author(); ?></div>
</div><!--end post header-->
<div class="entry clear">
<?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?>
<?php the_content(); ?>
<?php edit_post_link(); ?>
<?php wp_link_pages(); ?> </div>
<!--end entry-->
<div  class="post-footer">
<div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 comment', '% comments' ); ?></div>
</div><!--end post footer-->
</div><!--end post-->
<?php endwhile; /* rewind or continue if all posts have been fetched*/ ?>
<div class="navigation index">
<div class="alignleft"><?php next_posts_link('Older Entries'); ?></div>
<div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div>
</div><!--end navigation-->
<?php else : ?>
<?php endif; ?>

Save and close the index.php file.
Your theme is ready.

Step 8: Install New Theme

After completing your custom theme, correctly naming and saving the files in the right folder (NeoTheme), you just have to install it.

In your WordPress installation directory, go to wp-content/themes and place the entire NeoTheme folder there.

Launch WordPress and go to WP Admin >> Appearance >> Themes. Your new theme should be visible here.

Activate it and you’re done.

Step 9: Importing HTML Content

Or maybe not…

To import content from your previous HTML site, you’ll need Stephanie Leary’s HTML Import 2 plugin. Install the plugin and run it to import a complete directory of content from your HTML website straight to WordPress.

Endnote:

And that’s all there is to HTML to WordPress conversion!

Keep in mind that this was an overview. Certain issues specific to your situation (HTML quality, lack of CSS, conflicts, etc.) may come up, and you’ll need to address those. As long as you are willing to learn about the platform and be a part of community though, you’ll continue to level-up in WordPress development.