Quick Inquiry

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

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

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

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

In 2003, when WordPress was introduced in 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 in an efficient manner.

With the introduction of WordPress, you just 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 kind of coding, not even HTML is required. In this kind of scenario, it’s very hard to believe that someone is still using static HTML-based websites.

As there is a popular saying that:

“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 perfectly for them.

However, there are many website owners who 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 & Simply Migrate Your Content

This 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 kind of money for this method unless you’re opting for a premium theme.

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

Option 3: Hiring A Dedicated Developer For Website Redesign

This 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 kind of 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 2 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 access 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 have some kind of CSS which needs to be saved. 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, simply 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. Basically, 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 simply 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 that is 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

In order 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 at a specific 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 just 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 2 where we will discuss this thing.

2.   Install A Pre-Made Theme & Simply 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 fairly 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 own 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 a WordPress installation with you and also a theme installed on it as per your own business requirement. Now, it’s time to import the content.

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 definitely help you to import the website content.

Once you’re done with 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 would 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 hire 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 kind of 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 risk of this migration.

At the time, the world of WordPress Website 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 Technologies – A Custom WordPress Development Company where you can Hire WordPress Developer as per your requirements.

Have an App Idea?

Get your free consultation now

Get Your Free 20-Minute Website Discovery Consultation

To explore how we can help you create a sales weapon that’ll capture and convert more customers, fill out your details below and we’ll be in touch within the next two hours.