Complete Guide to Convert HTML Website to WordPress

Are your clients bored or confounded by static HTML websites?

If you answered yes, you are not alone.

In the age of dynamic content and rich interactive interfaces, static HTML websites just don’t cut it. Even if you do manage to create an amazing HTML/CSS website, you will then spend the rest of your time adding tags to every sentence you ever want to publish or teaching your client to do the same.

HTML-CSS-and-JavaScript

Enter WordPress.

Cited by millions as the most user-friendly and easy-to-manage CMS out there, WordPress doesn’t require coding skill to be administrated properly. The coding languages (HTML, CSS, JavaScript, and PHP for scripting, and MySQL for database) coupled with the amazing APIs mean that a professional developer can do much more with WordPress than he/she could with just HTML and CSS in given amount of time.

Regardless of your reasons, you are making the right choice switching to WordPress. This guide is to take you step-by-step through the HTML to WordPress conversion process without losing your content.

Note: This article is a guide for developers to manually convert HTML to WordPress. If you are completely unfamiliar with coding or apprehensive at the idea of doing it yourself, I recommend you hire WordPress developers or a professional HTML to WordPress conversion service.

Step 1. Hosting Plan

WordPress comes in two ‘flavors’: the managed WordPress.com and the self-hosted WordPress.org. For our purpose, we will need the self-hosted solution.

This means you’ll have to choose a hosting plan (VP, dedicated, shared, etc.) based on your site traffic and WordPress requirements (server must support PHP 5.6 or above and MySQL 5.6 or above).

Step 2. Install WordPress

Go to WordPress download page and download the zip package. Install WordPress and log into WP admin.

Step 3. Decide what you want to transfer

  • If you want to keep you HTML site’s design, you will need to code a custom theme for yourself (as described in steps. 4 to 8). Note that you’ll need a code editor and knowledge of HTML, CSS, and PHP to do that.
  • If you can forego the HTML website’s design and just need to transfer the content, skip to Step 9.

 

Step 4. Create a new Theme folder

Create a new folder on your desktop. Let’s name it HTMLTheme. This will be your theme’s name. Yes, you can change it.

Open code editor (Notepad++, Komodo, etc.) and create files named:

  1. Style.css
  2. Index.php
  3. header.php
  4. sidebar.php
  5. footer.php

…and so on. These files are the theme’s templates.
Leave them empty and save them in the HTMLTheme folder.

Step 5. Copy Existing CSS into Style.css file

Your previous HTML website likely used CSS to style page elements. Copy it and paste it into Style.css file. This will direct the appearance of select components across the entire site and all its pages.
If you are doing this for a client, it’s good practice to add the following bit at the top of stylesheet:

/*
Theme Name: HTMLTheme (your own theme name)
Theme URI: Your theme’s URI
Description: A brief description of your theme
Version: 1.0
Author: Your name
Author URI: Your website address
*/

It’s optional, but it helps your clients stay in touch with you.

 

Step 6. Cut up your current HTML

Also called ‘chopping’, this is easier than it sounds. In HTMLTheme folder (on desktop), there are some files we created in Step 4.

Open your current site’s index.html in the code editor:

  1. Copy everything from the top, right up to the tag div class=“main”. Go to theme folder, open header.php and paste it there. Save it and close.
  2. Copy the tag and everything inside aside class= “sidebar”. Go to theme folder, open sidebar.php and paste it there. Save it and close.

…and so on.

You have to identify HTML tags for various page elements and paste them into the related php file.
Once that’s done, copy everything that hasn’t been pasted in its own php file. Paste in into index.php
Save it.

Step 7. Finalize Your Index.php File

Your index.php should be able to call up all the other sections (template files we created in previous step).

This is how you call the header:

<?php get_header(); ?>

At the bottom (after the rest of the code in index.php, you call the sidebar and the footer like this:

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Almost done…

Know that WordPress theme anatomy has two powerful components which are characteristic to all, namely the template hierarchy and The Loop. The loop displays your post content to the visitors. Add this bit of code within the content section of your 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( ‘M j y’ ); ?></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. You are now done creating the theme.

Step 8. Install your New Theme

Your theme files are complete and saved neatly in the folder on desktop (we named it HTMLTheme). Now you’ll have to place this theme folder inside WordPress installation directory to make it accessible.

Open WordPress install folder in your system and copy-paste the theme folder (HTMLTheme) inside /wp-content/themes/.

Now launch WordPress and go to WP Admin >> Appearance >> Themes. This is where all themes you create/download and install will appear. You should be able to see your custom theme by name there. Activate it.

Step 9. Importing HTML Content

Remember that if you already found a ready-made (free or premium) theme you liked, you can simply download the theme folder and install it in the same way as directed in Step 8. Go to your admin dashboard, then go to Appearance>> Themes>> Add New to activate it.

Now all that’s left is to import your previous HTML website’s content. This is super easy, thanks to Stephanie Leary’s plugin HTML Import 2, “absolutely one of the handiest tools in the converting/importing industry” as one reviewer calls it. Before you install the plugin and import a directory of your content, make sure you go through the user guide carefully.

And you are now, officially done! Welcome to WordPress, Scott.

Endnote

Keep in mind that you’ll need to address certain issues specific to you (poor quality HTML code, no CSS, etc…) in your own way. As long as your web developers are willing to spend some time and energy learning the WordPress Template Hierarchy and The Loop, there should be no hassles.

Written by lucybarret

Lucy Barret is a Sr. WordPress developer with over 5 years of experience. She has achieved great success in converting HTML to WordPress theme and hence now handling all major projects at HireWPGeeks Ltd. She is also a blogger and whenever she gets time, she enjoys reading and writing tutorials. Follow her company HireWPGeeks on Facebook.