In the beginning, all websites were made with text and static HTML. There was no WordPress and need to convert HTML website to WordPress or any other CMS system.
Many businesses are still relying on simple HTML websites for their online presence. These HTML sites are usually static in nature.
This means that even changing a minor detail on the website is done by editing the coding file.
Now over 20 years later, the web is a much different place.
Powering over 25% of the Web, WordPress is increasingly becoming the content management system (CMS) of choice for the average user.
Web sites are much more complex. They provide richer and more enjoyable experiences for site creators and visitors alike.
Does moving to WordPress mean starting over and losing all the time, energy and money put into the current website?
No matter how your site is coded, once a visitor loads a page on your site, the browser takes all the bits and pieces (server-side includes, images from another directory, etc.) and puts them all together in a final static HTML page.
Even if some elements on the page are still dynamic, the code itself is all together in one spot that can be moved into a WordPress page that would still work.
There may be some exceptions to that but for most of the sites out there, that would be true.
Even if your site consists of somepage.php, which calls a file named header.inc, and a file named footer.php, when the user views somepage.php in a browser, the resulting source code is all in one place, as though it were hand-coded as a static HTML page.
This is the type of code that is needed to convert a site to WordPress.
Anyone with a WordPress install and the right theme/plugins can have a modern website with advanced design and functionality.
Migrate from Static HTML Site to WordPress Pre-steps
If you’re ready to switch to WordPress, below are four steps to take into account:
#1 Analyze Your Existing HTML Site
Check your site for irrelevant or outdated content and if found, clean it up. Examine the current navigation system and think how it can be improved.
Doing your HTML site analysis would help you decide what content, features, and functionalities should be migrated to WordPress.
This will give a clear idea about what plugins you need to install for getting the same functionality on WordPress platform.
#2 Get to Know WordPress
WordPress installation is a quite easy process. Most web hosts offer one-click install.
If not familiar, it would be good to read and inform about new platform your site will be working on.
#3 Do a Backup of Your HTML Site
It is strongly recommended to take a complete backup of your static site to avoid any risk of data loss while migrating.
#4 Convert HTML Website to WordPress
Assuming you have sufficient coding knowledge, and your site is small, the best option possible in front of you is to divide your existing HTML code into four sections (header, footer, sidebar, and content) and then copy the content of each section into its respective PHP file.
In case your site is large, you can take advantage of an HTML to WordPress plug-in, like HTML Import 2 or hire someone to convert HTML into WordPress.
How you choose to convert your static HTML site into a WordPress site will no doubt depend on your personal preference, desired time/monetary investment, and skill level with code.
With this method to Convert HTML Website to WordPress, you will keep same design and look of the site.
1. Download the HTML pages from your current host. Use WinHTTrack for doing this.
It’s a great free tool which is very easy to use. Make sure you grab the image folder too (or wherever you have your images on the old site).
2. Install WordPress at your new web host.
a. Set your permalink structure to “Post name” (/%postname%/)
b. Check the box, “Discourage search engines from indexing this site” (just until everything is done)
c. Install some Maintenance Mode plugin (if you wish) so that nobody but you can access your new WordPress.
d. Install free WordPress plugin HTML Import 2. Use it to “upload” old site to your new site. User guide to import your entire directory of HTML pages.
3. Upload the content that you just downloaded from step 1 into your new web host file structure. Put them in a folder called, for example, “html-files-to-import”.
a. Upload all the old images to your Media Library in WordPress on your new site.
4. Run Import
5. Prepare your DOS command prompt and Excel
a. At the DOS prompt, navigate to where you placed your HTML files (it’s easiest to put them in a folder named “yourwebsite” and put that folder in the C:\ drive).
Then, initiate this command: i. dir > files.txt
b. Open the files.txt file in Excel.
c. Now to Excel. Essentially, you’re going to use a couple of Excel functions, including “concatenate” to render the “canonical” code that you will put in the HTML files.
d. Place the corresponding canonical code in each HTML file. You could do this, hire it out to an outsourcer, or hire somebody to write the PHP code that would do this automagically.
6. Upload the HTML files to your web host. Put them in the ROOT (i.e., highest up) folder for your new website.
Don’t forget to upload the images folder, too, to the ROOT.
7. Make sure everything still works on the new site.
8. Uncheck the box from Step #2 – “Discourage search engines from indexing this site” and disable the HTML Import 2 plugin.
9. Change DNS at your registrar.
10. Make sure that your site’s URL resolves to the right IP (your new IP not the old IP) and that ALL pages load correctly. You may have to wait few hours for nameservers to get updated.
11. You can remove the old HTML pages after a while, but there isn’t any need to. You won’t get hit with “duplicate content” penalties because the canonical references take care of that.
You’ll want to add redirects in your .htaccess file that point your old “.html pages” to your new WordPress pages.
If your goal is to not only get your content from your static HTML site into WordPress but also duplicate your current design, this means you will need to create your custom theme.
It only involves creating a few folders and files, a bit of copy and paste, and then uploading the result.
You’re going to need a code editor such as Sublime or Notepad++ and access to both your HTML site’s directory and your new WordPress install’s directory.
1.Create a new theme folder and necessary files.
On your desktop, create a new folder to hold your theme files. Name it whatever you’d like your theme to be identified.
Next, create a few files (which all go in your new theme folder) in your code editor:
2. Copy existing CSS into new stylesheet
If you’re looking to duplicate a design, this probably means you have at least some CSS that you want to save. So the first file you’re going to want to edit is your Style.css file.
To begin, add the following to the top of your file.
Theme Name: Replace with your Theme's name.
Theme URI: Your Theme's URI
Description: A brief description.
Author URI: Your website address.
After this section only paste your existing CSS below. Save and close the file.
3. Separate your current HTML
Here comes the process of cutting and pasting parts of your existing code into the different files you created.
A) First, open your current site’s index.html file. Highlight everything from the top of the file to the opening div class=”main” tag.
Copy and paste this section into your header.php file, save and close.
B) Go back to your index.html file. Highlight the aside class=”sidebar” element and everything inside it.
Copy and paste this section into your sidebar.php file, save and close.
C) In your index.html select everything after your sidebar and copy and paste it into your footer.php file, save and close.
D) In your index.html file, select everything that’s left (this should be the main content section) and paste it into your index.php file. Save, but do not close yet.
You can close your index.html file now however and move on to the final steps. Almost done!
4. Finalize Index.php file
To finalize your new theme’s index.php file you need to make sure it can call up the other section (besides the main content) that are housed in the other files you’ve created.
At the very top of your index.php file, place the following line of php.
<?php get_header(); ?>
Then, at the very bottom of your index.php file, place these lines of php.
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Now you have “The Loop”. This is the primary bit of php that WordPress uses to display your post content to visitors.
So the final step in creating your new theme’s index.php file is adding the code below within the content section.
( have_posts() ) : ?>
( have_posts() ) : the_post(); ?>
"post-<?php the_ID(); ?>"
<?php post_class(); ?>>
'M j y'
"<?php the_permalink(); ?>"
"Permanent Link to <?php the_title_attribute(); ?>"
><?php the_title(); ?></a></h2>
><?php the_author(); ?></div>
) ) the_post_thumbnail(); ?>
<?php the_content(); ?>
<?php edit_post_link(); ?>
<?php wp_link_pages(); ?> </div>
'Leave a Comment'
/* rewind or continue if all posts have been fetched */
Save your index.php and close.
Your theme is now finished! All that’s left is to upload it to your WordPress website.
5. Upload your new theme
Now you will store created theme files within your new theme folder. Install WordPress.
Place your new theme folder inside /wp-content/themes/. Navigate to WP Admin > Appearance > Themes and you should see newly created theme there. Activate it!
All that’s left to do at this point is populate your new WordPress website with your old site’s content.
6. Copy content from HTML site to WordPress
In WP Admin go to Plugins > Add New. Search for a plugin called HTML Import 2 by Stephanie Leary.
Once this plugin is installed and activated, follow its user guide to import your entire directory of HTML pages.
After this your site should look like it did before, just running on WordPress.
If the steps above seem too intensive or time-consuming, there is another way. This is the easiest way.
Instead of converting existing HTML design to look the same on WordPress, you can take advantage of any one of the thousands of themes available in WordPress marketplace.
There are free themes and premium themes.
Once you’ve chosen a theme you like (and have its zipped file package downloaded), install/activate your new WordPress theme.
Once this is done, you will have a new WordPress website and theme. When you preview your site, it will be empty.
It is time to import content and finish process to convert HTML website to WordPress site.
In WP Admin go to Plugins > Add New and search for a plugin called HTML Import 2. Follow user guide to import your entire directory of HTML pages.
After this, you will have all of your old content but new look.
You could also use Theme Matcher. It offers automatic HTML to WordPress conversion. Just enter your site and select the appropriate area.
Theme Matcher takes images, styles, and layout from your existing website.
HTML to WordPress converts your HTML designs into WordPress themes without the need for you to write a single line of PHP.
You can choose service plan where they will convert your static HTML website to WordPress. This option can add up in price.
You can also choose Converter option which is significantly cheaper.
The conversion is fully automated, and the theme’s functionality can be extended just by adding “wp-” prefixed converter classes into your HTML.
The converter creates templates for each HTML file and references your assets and fills in all those necessary php functions.
Use Bootstrap, Webflow, Dreamweaver or whatever tool/framework you’re already comfortable with to create websites.
As long as the website is made using HTML you can convert it into a theme.
Once the conversion is completed, you need to do a few things to give your WordPress site the final touch.
Launching a business website is not an easy process. One of the biggest dilemmas is whether to choose a static HTML site or to go for WordPress.
WordPress –WordPress is perceived to be a CMS (Content Management System). Simplified HTML version for non-techie users to add and modify stuff on their websites.
CMS sites are usually dynamic, meaning that there are no restrictions to how often you change your content.
You can change everything from pictures to entire texts.
The interface is very simple and user-friendly, and nobody needs any special training to learn it.
The CMS market is highly competitive, but WordPress beats competition every time.
Another thing to remember before you start is that there is a significant difference from WordPress.com to WordPress.org because the latter is an open source CMS. WordPress.com, on the other hand, works as a blog-hosting service.
Advantages of using WordPress:
Disadvantages of using WordPress:
HTML static websites – Before there was no such thing as templates, and the only way to make a website was to hire a professional in programming to do it for you.
Therefore, all websites were built as Static HTML (Hyper Text Markup Languages). The point was to have a website.
Not to modify the content or its layout, because you would have to hire the HTML developer all over again.
On HTML websites, content is stored in static files, which makes it incredibly difficult to modify it.
HTML website advantages:
HTML website disadvantages:
You need to be professional in markup languages.
Otherwise, you won’t be able to do any significant update to your website.
Hiring a web developer over and over again will cost, even if your website is a really small one, or displays just trivial information.
Another important disadvantage is that you can’t add plug-ins, meaning that you’re facing a severe lack of functionality.
Whether needing more from your site or building a new one with a template in mind, the conversion process can seem quite complicated to a novice.
Patience and knowledge will allow you to do what you need to do with some level of success.
Once your site is live, you can take pride in knowing that you learned how to do something new and were able to apply that knowledge to your website.
Hope at least one method above helped you to convert HTML website to WordPress. If you have any other method or tutorial, let me know.
Did you ever convert HTML into WordPress and what are your experiences with it?
Let me know in comments below or if I made any mistake, feel free to unleash your rage on me.
Hello, my name is Matija but everybody calls me Kasa. I started this site to earn lots of money so that I never have to work again. Just lay down on a beach, drinking cocktails day after day while hot, beautiful chicks fight for my attention.Ok, now seriously. I love making websites, especially in WordPress. Hope reading content on this site you will find helpful tips, tutorials, comparisons, and product reviews for your business.
I would suggest using this tool http://goo.gl/WuA7fi. Though there occured some technical problems (mainly because my site contained a lot of customized things) – generally I was blown away by their level of service and professionalism.
Looks good. Thanks for the suggestion.
Hi Kasa – thank you for this article… it has been very useful. Do you have any expert advice or words of warning with regards to SEO when migrating? I find myself looking to migrate a VERY simple (like, 3 pages, one paragraph and a map) dreamweaver site into WordPress but it’s got really good rankings and I would be mortified if I ruined them…!
I have never done that kind of migration so can’t offer any quality advice here.
I think basic steps regarding preserving SEO should be enough. Maybe this content will help.
Current ye@r *
Leave this field empty
Add me to your weekly newsletter!
Send this to a friend