Complete HTML to WordPress Migration Guide

In order to make content management and publishing easy on the web, static HTML website owners are flocking in droves to brilliant, feature packed and dynamic content management systems and platforms like WordPress. The free open source software lets you build, customize and go live with a fully fledged website without so much as glance at a code.

In that context, it’s easy to want a WordPress website of your own. But when you already have a static HTML website and are not sure on how to proceed with migrating the entire thing to WordPress, you’ll need some help. This post is a general guide to HTML to WordPress migration to give you a basic idea of how it’s done.

html to wordpress

html to wordpress

1. Web Host Requirements

Before you make the switch, make sure to read up on the two types of WordPress: The Managed .com version as well as the Self Hosted .org version. Generally, the major difference is that the self-hosted WordPress website will give you significantly more control over design and feature customization.

If you are going with WordPress.org (completely free and self-hosted), you would need to get your website hosted (on a server) yourself. Considering you already have a domain name, you will need to take note of various hosting types (shared, VPS, dedicated, etc.) and consider the various limitations of plans in terms of bandwidth, storage, allowed visitors, download limits, and so on. WordPress websites require minimum PHP 5.6 and MySQL 5.6 servers.

web host

web host

2. Install WordPress

Now that the hosting concerns are straightened out, you need to download the CMS from <a href=”https://wordpress.org/download/”>WordPress download page</a>. Download and install the system as directed in the WordPress Codex ‘famous 5-minute install’ and login to your website back end, aka The WordPress admin dashboard.

If you want to transfer all your previous site’s content, data as well as the design, this is the point where you’ll the services of an HTML to WordPress theme conversion company to create you a WP theme exactly mimicking your previous site design. Here’s how they do it:

install wordpress

install wordpress

3. New Theme Directory

A new theme folder (aka directory) is created. This folder will be named after the theme. So let’s say our theme is called ‘Erstwhile’ (I like Dickens, sue me), so the folder will be name Erstwhile (I also hate subtlety apparently). This folder houses the following code files (created with a code editor or text editor like Notepad++) named as follows: style.css (Style sheet) and all necessary Templates files: Index.php, header.php, footer.php, sidebar.php, archive.php, etc. etc.

4. Creating stylesheet

The previous static HTML website, no matter how bland it was compared to current trendily designed website front ends, must have had some CSS to dictate style and visual presentation of the content. These rules are written in CSS and typically found in the file style.css. The developers copy that CSS from your previous website, add improvements (responsiveness and browser compatibility) and paste it in the WordPress theme folder (Erstwhile).

By WordPress standards, the style sheet ought to start like this, so professional developers will often place this bit at the top of their WordPress themes:

/*

Theme Name: Erstwhile

Theme URI:

Description:

Version: 1.0

Author: Theme developer’s name

Author URI: Theme developer’s site address

*/

This entire bit is a comment and will help any future developers looking at your theme’s code.

5. Creating Templates

Chopping: It’s not quite as axe-murder-y as it sounds.

The static HTML site has an index.html file which houses the markup of the website. Developers take this markup file and sift through the code, dividing all the HTML into separate parts (corresponding with separate parts of your web page) with different templates. So all HTML beginning from top to div class = “main” will now become your header template, going neatly into header.php template file.

Once all the bits of markup have found their correct places as templates in WordPress themes, the remaining markup is taken up as index.php. This WordPress template file is the ‘boss’ and calls other template files in correct sequence when a page is requested with call functions like:

<?php get_header(); ?>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

And so on.

Once all the templates have been called, the index.php calls the Loop, which displays fresh content to visitors and keeps things dynamic.

<?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; ?>

Once all the files have been created and saved (with correct names), the custom WordPress theme (mimicking previous site design) is ready to go.

The theme is then uploaded to WordPress installation directory in path wp-content/themes and then activated via admin dashboard, where it will be visible. The settings (if your developer gave you any) should be visible in WordPress Customizer and the theme itself is available under Appearance >> Themes

6. Importing Content

Even the developers know how absolutely priceless content really is. This is why WordPress developer Stephanie Leary created the HTML Import 2 plugin to help you import the complete set of content, directories and more from your previous static HTML website to currently active WordPress website.

It may require some adjustments (in terms of images, URLs, etc.) but a developer can sort that pretty easily.

Endnote

That’s how ‘apparently’ easy HTML to WordPress conversion is. Of course, there are nuances I deliberately left out – every website’s markup is different and needs vary depending on the project, so one method can never fit everyone. This is the outline of HTML to WordPress conversion.

Lucy Barret

Lucy Barret is a web Developer working a leading WordPress Web Development Company, HireWPGeeks. She has a team of developers who convert HTML to responsive WordPress theme. She is also a blogger and loves to write WordPress related tutorials.

Latest posts by Lucy Barret (see all)

Leave a Reply

Your email address will not be published.