Step-By-Step Guide To Convert The HTML Sites To WordPress Sites

At the beginning of the web, people were making all the websites with only text and the static HTML. However, in the last two decade or so, the landscape of website development is gone to a whole new level.

Nowadays, websites are much more complicated than they used to be. They provide more productive and enjoyable User-Experience (UX) for all of the website visitors.

In 2003, when WordPress came into the web development market, a whole new dimension was added to the website development field.

The core mission of the WordPress CMS (Content Management System) was to ease out the online publishing and provide a way for users through which they can manage the website content efficiently.

With the introduction of WordPress, you have to choose the right theme or the plugin for that matter. You will have all the modernized feature that you want in an advanced level business website.

Here, you won’t need any coding, not even HTML is required. In this kind of scenario, it’s tough to believe that someone is still using static HTML-based websites.

As there is a famous saying:

“If it ain’t Broke, don’t fix it.”

The same applies to the case of statics websites where the website owners don’t want to switch to the modern style CMSes, as they feel that the old methodology is working correctly for them.

However, many website owners want to switch from their old static HTML site to CMSes like WordPress but don’t know the procedure for the execution.

For that kind of audience, today we’re going to provide a step-by-step guide on how to convert the HTML sites to WordPress sites which will ease out all their problems. So, let’s get this started, right now.!

Option 1: Manually Creating A WordPress Theme Based On Current Static HTML Site

This option will require you to get into the technical details. Here, you will have to access the current site directory via FTP and use the existing code as a starting point.

From there, you need to create the files which are necessary for WordPress Theme and copy bits of code from WordPress Codex.

If you have got the experience of working with HTML, CSS & PHP, then this is the best possible option for you.

Option 2: Install A Pre-Made Theme & Migrate Your Content

It is probably the best option in terms of simplicity as well as the value.

If you have got the hosting plan for your existing website, then you need to spend any money on this method unless you’re opting for a premium theme.

The plugin used for importing the content comes at a free of cost.

Option 3: Hiring A Dedicated Developer For Website Redesign

It is the easiest option out of all the three which are listed here. The reason behind that is, it will not require you to do much, and the cost will vary on the developer you’re looking to hire.

However, we would advise you to contact any Custom WordPress Development Company for this complicated & time-consuming project.

Prerequisites For HTML To WordPress Conversion

  • You will need a hosting plan in place.
  • A local WordPress installation.

In addition to these prerequisites, you should also be aware of the Things To Do Before Launching A WordPress Website, as it will come handy for you in the future.

After fulfilling the above prerequisites, you can either opt for the option 1 or option 2. For option 3, we will not go into the details, as the choice of developer is entirely dependant on the individual. So, let’s explore option 1 and option two one-by-one in detail.

1.   Manually Creating A WordPress Theme Based On Current Static HTML Site

If your ultimate aim is to not only to migrate the website content from HTML to WordPress platform but also to clone the design, then you need to create a custom theme.

In addition to that, you will also need an editor like Sublime or Notepad++.

Lastly, you will need access to the HTML site as well as the entrance to the WordPress website.

Step 1: Create A New Theme Folder & Necessary Files

On the desktop, create a new folder which will comprise your theme files. Give an appropriate name to the theme folder. After doing that, create few files which will rest inside the theme folder. The files are as listed below:

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

Step 2: Copy Existing CSS Into New Stylesheet

Now, as we have discussed earlier that, we’re looking to duplicate the design. For that purpose, you need to have some CSS which you need to save. So, the first file that you need to edit is Style.css. Just add the following code to Style.css file to get the things underway.

/*
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 this code, copy and paste your existing CSS below and save the file.

Step 3: Copy Existing CSS Into New Stylesheet

Before going into the details of this step, let us give you a brief idea of how WordPress works. WordPress uses a PHP call and retrieve the data from the database.

Each of the files that we will be using right through this tutorial will tell the WordPress where and which content it should display on the website.

So, when we refer to the word “Chopping Up” HTML, we mean that we’re cutting the HTML file into smaller pieces and then arranging them into various parts of the website.

Now, to perform this step, open your existing site’s index.html file. Highlight everything right from the top of the file till div class=”main” tag. Copy & paste this entire section into header.php and save the file.

Again move back to the index.html file and highlight aside class=”sidebar” element and everything inside it. Now, copy & paste this section into sidebar.php and save the file.

Once second, move to index.html file and select everything after the sidebar and copy it into the footer.php and save the file.

Lastly, copy everything left inside the index.html file and paste it inside the index.php file & save it. Now, you can close the index.html file.

Step 4: Finalize The Index.php File

To finalize your index.php file, you need to make sure that it can call the other section besides the main content which is resting in the other files that you’ve created in Step 1.

For that purpose, at the very top of index.php file place the following line.

<?php get_header(); ?>

Now, at the bottom of index.php

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

Lastly, we need to form a loop with the help of PHP programming language which will inform the WordPress to display the specific content to a particular place. For that purpose, add the following code to index.php file just below 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 your index.php file which means your theme is now ready to use. You need to upload it to your WordPress website.

Step 5: Upload Your New Theme

So far, you’ve managed to create a customized theme for your WordPress website. Now, it’s time to upload that theme in the WordPress directory. For that purpose, access your WordPress directory via FTP or cPanel.

Once you’ve got the access, then place your new folder inside the /wp-content/themes/. After that, navigate back to WP Admin > Appearance > Themes and you will find a newly created theme here. Now, activate the newly created theme.

In the end, you need to populate your new WordPress website with the old website content. To know more about this, analyze option two where we will discuss this thing.

2.   Install A Pre-Made Theme & Migrate Your Content

If you’re not comfortable with too much coding and technical details, then you should always opt for this method, without any doubt. This option is relatively simple as well as less time-consuming.

Step 1: Choose An Appropriate Theme

There are many themes both free as well as the premium which is available at the WordPress Marketplace. If you’re confused about how to select an appropriate theme for your business website, here are the Do’s And Don’ts Of Choosing A WordPress Theme.

So, decide the theme as per your requirements and then, move forward to the next step.

Step 2: Install & Activate The Theme

For installing the theme, navigate to WP Admin > Appearance > Themes > Add New and then, complete the installation process. Once you’ve installed the theme, then activate the theme.

So, after completing this step, you will have a WordPress installation with you and also a theme installed on it as per your business requirement. Now, it’s time to import the content.

If you’ve still got any doubt regarding this subject, then you should Hire WordPress Developer. He/She should be able to guide you on this subject.

Read also: How Can You Secure your WordPress Site?

Step 3: Import The Content From Old Website

For importing the content, WordPress provides you with many plugins. However, the best plugins out of all as per the user review and our own experience has been HTML Import 2.

Now, move back to WP Admin > Plugins > Add New and then, complete the installation process of the plugin. Once you’ve installed and activated the plugin, all you need to do is follow the plugin manual which will help you to import the website content.

Once you complete this step, you will have all your old content living on the new WordPress website and formatted as per your new theme or if you’ve created a customized theme, your new site will look like pretty much same as it was on the static HTML.

3.   Hiring A Dedicated Developer For Website Redesign

The third and last option is to engage a dedicated developer website redesign.

Now, before selecting any developer for this task, you should always inquire about the background of the developer which will give you an idea of whether he/she would be able to pull off such complex task or not.

In addition to all these, pricing is also a factor that you need to consider for a dedicated developer. Always conduct a market survey and then, make any choices.

Conclusion

Converting the static HTML sites to WordPress websites is not an easy task, and therefore, there are very few website owners who’re willing to the take the risk of this migration.

At the time, the world of Custom WordPress Development has become more & more demanding. So, you always need to follow the latest trends of the market.

Taking the above scenario into consideration, here we have to try to provide you with a step-by-step guide on how to convert the HTML sites to WordPress sites which would ease out all your problems.

Which of these options would you prefer for HTML to WordPress conversion? Do let us know in our comments section. Your feedbacks are always welcome. Thank You.!

looking-for-result-driven-wordpress-theme-development-services

Disclaimer: We at eSparkBiz Technologies have created this blog with all the consideration and utmost care. We always strive for excellence in each of our blog posts and for that purpose, we ensure that all the information written in the blog is complete, correct, comprehensible, accurate and up-to-date. However, we can’t always guarantee that the information written in the blog correct, accurate or up-to-date. Therefore, we always advise our valuable readers not to take any kind of decisions based on the information as well as the views shared by our authors. The readers should always conduct an in-depth research before making the final decision. In addition to these, all the logos, 3rd part trademarks and screenshots of websites & mobile apps are the property of the individual owners. We’re not associated with any of them.

Mohit Surati

Mohit Surati

A post-graduate in Computer Engineering. Passionate about innovative writing & Content Marketing. A rich vein of experience in writing articles related to WordPress right from plugins, themes, customization, security, WooCommerce & Gutenberg. Pens down his thoughts for eSparkBiz @Custom WordPress Development Company where you can Hire WordPress Developer as per your requirements.

Related Post

Things To Keep In Mind Before Choosing a Payment Gateway For Website

Things To Keep In Mind Before Choosing a Payment Gateway For Website

For any business, it is imperative to choose the best Online Payment Gateway. eCommerce is the fastest growing industry holding immense potential. There’s a multitude…

The Cost Of Developing a Web Application And Its Process

The Cost Of Developing a Web Application And Its Process

Mobile applications dominate the online market. But the contribution by building web applications is also significant. They have been instrumental in acquiring an audience through…

Step-by-Step Guide For Converting Your Idea Into An App

Step-by-Step Guide For Converting Your Idea Into An App

Maybe you are riding your bike, or you are in the shower, or you cannot fall asleep at night, or you are out with a…

get in touch image

Growth Is Just One Click Away

Don’t feel like calling? Just share some project details & our company representative will get in touch. Schedule A Meeting with our Director of New Business

How long would you like the meeting to be?
Get In Touch