A Simple guide on migrating a HTML theme to Wordpress

With 74.6 Million websites depending on wordpress, it’s becoming a more common platform to develop and manage websites. Given a huge framework to work with, and ever growing community, it’s a common question of how one could migrate a standard HTML web site to a wordpress website. It’s simple as creating a folder structure in your file system. Well, a bit more work to do other than that. :)

Step 1

As our initial step, we should go through our existing HTML pages and identify the structure of it. Well for a wordpress theme to work, it should consist the following file structure in it. The rest of the folders depend on your theme requirements. The following files should reside inside a single folder which will become our wordpress theme root.

Style.css
Index.php
header.php
footer.php

As you can see, the main styles sheet is in the root folder.

Step 2

Since we are converting an existing HTML design, the next step is to migrate all the main styles to the Styles.css including the following comment segment.

/*
Theme Name: Should be your theme name.
Theme URI: Your Theme's URI
Description: A brief description on the theme.
Version: 1.0
Author: Your name
Author URI: Your website address.
*/

Step 3

The next is the to separate the markup as required for Wordpress. For this, you should open up your current index.html file. If you looked closer at the php files we created, it consisted three main files called, index.php, header.php and footer.php.

The header.php should include all the codes which resides in the header section of the current index.html of your website. This file then gets imported in the main index.php file along with the footer.php file.

Footer.php file should include the footer code segment of the index.html.

Finally

Now we should edit the index.php file to include the rest of the markup so that it includes everything from the index.html file. Copy the rest of the code and paste it to the index.php file. But at the very beginning of the file, include the following code segment.

<?php get_header(); ?>

Then again, at the end of the page, include this code segment.

<?php get_footer(); ?>

Now your theme is almost done and needs to be imported to the wordpress theme manage. For this, copy the newly created theme folder and paste it to /wp-content/themes/ then head to the admin console of your wordpress installation. The theme should appear in the Appearance > Themes section and activating the theme will set it to the current wordpress theme. To further develop your theme, codex will be a major help.