In the initial days of Internet most of the websites were built using static HTML. Now websites have become very complex and using open source WordPress, you can create advanced websites easily. Now anyone can install WordPress, appropriate theme and some plugins and can create a advanced website full of functionalities. It won’t require much of the coding skills.

Most of the website owners have upgraded their basic website into WordPress or any other CMS. Some of the owners don’t want to convert HTML to WordPress as they don’t know how to do it. Here we are telling about ways to control HTML website into a WordPress site.

You can decide which method you will use to control your static HTML site into WordPress site depending upon your preference, money, time and coding skills. Generally there are 3 main methods to do this:-

Manually creating WordPress theme depending upon your current HTML site

This method requires to edit some part of your code. You should have access to your current site directory via FTP and use your existing code. Then you have to create some required files for a WordPress theme and take some code from WordPress codex. If you have some knowledge of HTML, CSS and PHP then this is very easy to do. 

Installing a pre-created them and migrating your website content

This is very easy to do. You have a hosting for your existing website then you have to buy a premium theme and then you can easily intall the plugin for importing content into WordPress website. You can find the free plugin on the official WordPress Plugin database.

Taking services of HTML to WordPress conversion services to recreate your website

In this method you don’t have to do much and you can contact and take services of a HTML to WordPress conversion company. Cost will vary upon which company you hire based on their experience and expertise. You can search for such a conversion company on internet.

Converting Your static HTML site into WordPress theme site manually

If you want to keep your content from your static HTML site into WordPress then it means you have to create your own custom theme. It needs creating some folders and files, a bit of copy-paste and the uploading the result. For this, you will need a code editor like Notepad++ and access to your HTML site’s directory and your new WordPress install directory.

Step 1: Create new theme folder and some required files

Create a new folder to keep your theme files and name it the name which you want to give to your theme. Then create some files in the new theme folder in your code editor. Keep these files for editing later.

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

Step 2: Copy the current CSS into a new Stylesheet

You must be having some CSS hence you have to edit your Style.css file to copy the design. Add the below code at the top of your css file.
/*

Theme Name: Replace with your Theme's name.

Theme URI: Your Theme's URI

Description: A brief description.

Version: 1.0

Author: You

Author URI: Your website address.

*/

After adding this code now paste your current CSS below and save and close the file.

Step 3: Separate your existing HTML

Open your current site’s index.html file and highlight everything from top of the file to the opening div class = “main”. Now copy and paste this section into your header.php file and then save and close the file.

Now go back to your index.html and highlight the class =”sidebar” element and everything inside it and copy paste this section into your sidebar.php file and then save and close the file.
Now open your index.html, select everything after your sidebar and copy-paste it into your footer.php file and save and close the file. Now in your index.html file, select all that is left which is the main content section and paste it into your index.php file and save and close the file and also now close your index.html file.

Step 4: Make final changes to your index.php file

At the top of your index.php file you have to add the below PHP code.

<?php get_header(); ?>

After that at the bottom of your index.php file, add these lines of php code.

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Finally, we will add the loop. WordPress uses this code to display your post content to the visitors. Final step is creating your new theme’s index.php by adding the below code within the content section.

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

Now save and close your index.php file. You WordPress theme is now finished. Now upload it into your WordPress website.

Step 5: Uploading your new Theme

Now you have already created your theme files and stored them in your theme folder which is needed to access your new WordPress install directory. Now place your new theme folder inside this folder /wp-content/themes/. Then you have to go back to WP Admin > Appearance > Themes and your newly created theme will appear there now. After that activate this theme now.

Now you can easily update your new WordPress website with your old website’s content.

Conclusion

As we have shown the steps to migrate your website into WordPress theme site. With this you are now part of the largest open source communities of WordPress with so many developers, designers, bloggers in this community which are regularly building and creating websites using WordPress themes and plugins. You can also visit the official WordPress site at WordPress.org to learn and download useful themes, plugins and other WordPress resources.