Elegant Themes Blog

Stay up to date with our most recent news and updates

Converting HTML Sites to WordPress Sites

Posted on February 13, 2015 by in Tips & Tricks | 52 comments

Converting HTML Sites to WordPress Sites

In the beginning (of the web) all websites were made with nothing but text and static HTML. Now though, over 20 years later, the web is a much different place. Websites are much more complex. They provide richer and more enjoyable experiences for site creators and visitors alike.

First-Website

Check it out, the world’s first website! See it live here.

This is in large part thanks to open source projects like WordPress. Which, over the last ten years or so, has succeeded in its core mission to democratize online publishing (and a lot more in the process) so that anyone with a WordPress install and the right theme/plugins can have a modern website with advanced design and functionality. No coding–not even HTML!–required.

divi2-screenshots

This is Divi by yours truly, Elegant Themes. This is one of the most advanced WordPress themes on the market today. And it requires zero coding ability to use!

This is why to avid WordPress users like myself, it’s almost hard to believe that in 2015 someone might still be operating a static HTML website instead of a WordPress website with a theme and plugins. But the fact is there are still a significant amount of active HTML only sites out there. (Or HTML with a bit of CSS.)

Granted, these site owners may have good reasons for not upgrading or converting. Maybe their site content never changes and the simple formatting and design already in place is serviceable? Or maybe it’s less of a hassle than worrying about keeping a WordPress site updated? Both are valid reasons (among others). Prime examples of, “Don’t fix what isn’t broken.”

However, I have a feeling that these might not be the primary reason some (perhaps many) haven’t made the leap. The most obvious one being that they simply don’t know how to convert their HTML site into a WordPress site. Especially without losing content or needing to do excessive formatting on a page by page basis.

Thankfully, as is often the case with WordPress, there are a number of ways to go about solving this problem. I’ve compiled some options below.

Your Options for Converting a Static HTML site to a WordPress site

How you choose to convert your static HTML site into a WordPress site will no doubt depend upon your personal preference, desired time/monetary investment, and skill level with code. You will have to be the one to decide which is best for you, but with the summaries below you should be able to decide quickly and skip straight to the most relevant information in this post for your specific situation.

There are three main options:

1. Manually create a WordPress theme based on your current static HTML site.

This will require you to get into your code. You will have to access your current site directory via FTP and use your existing code as a starting point. From there you will need to create the necessary files for a WordPress theme and copy bits of code from the WordPress codex. This is fairly simple and straight forward if you have some experience with HTML, CSS, and a bit of PHP.

2. Install a pre-made theme and simply migrate your content.

This is probably the best option at the intersection of simplicity and value. Assuming you already have hosting for your current website, you will only need to spend money if you choose to purchase a premium theme. The plugin we will use for importing content is freely available in the official WordPress Plugin Repository.

3. Paying to have an HTML to WordPress conversion service re-create your site.

This is the easiest solution, as it doesn’t require you to do much of anything. However it will not do much for familiarizing you with WordPress and the cost will vary depending on who you choose to hire. I won’t be covering this option in the sections below because if this is the route you are interested in, you can simply do a quick search for service providers and they will take care of the rest.

Preparing for HTML to WordPress Conversion

No matter which route you decide to take below, there are a few things you will want to do before diving in.

The first is choosing a hosting plan. You’ll want to look over the options that are out there and decide on a package that best fits your needs. Or perhaps you’d like to create a local WordPress installation instead? You can always migrate it to a hosting service later.

Once you’ve chosen, you will need to install WordPress and log into WP Admin. This is the point at which our two possible paths divide.

Manually Converting Your Static HTML Site to WordPress

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 own custom theme. Thankfully, that is not as scary as it might sound at first. 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.

Step 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 named.

Next, create a few files (which all go in your new theme folder) in your code editor. Don’t do anything to them just yet. Just leave them open for further editing.

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

Step 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.
Version: 1.0
Author: You
Author URI: Your website address.
*/

After this section simply paste your existing CSS below. Save and close the file.

Step 3: Separate Your Current HTML

Before we get into step three, let me give you a quick note on how WordPress works. WordPress uses PHP to call and retrieve pieces of data from its underlying database. Each file that we’re using in this little tutorial is designed to tell WordPress which part of your site content is to be displayed and where.

So when I say we are going to “chop up” your existing HTML, what we’re actually doing is simply cutting and pasting parts of your existing code into the different files we’ve just created, so that WordPress will know where to display them.

Here we go.

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.

Second, 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.

Third, in your index.html select everything after your sidebar and copy and paste it into your footer.php file, save and close.

Finally, 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!

Step 4: Finalize Your Index.php File

In order 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. Or in other words, put back together the elements we just “chopped up”.

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

And finally, we have to add what’s called 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.

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

Save your index.php and close. You’re theme is now finished! All that’s left is to upload it to your WordPress website.

Step 5: Upload Your New Theme

Now that you’ve created your theme files and have them all stored within your new theme folder, you’re going to need to access your new WordPress install’s directory.

Place your new theme folder inside /wp-content/themes/. Then navigate back to WP Admin > Appearance > Themes and your newly created theme should appear there. Go ahead and activate it!

All that’s left to do at this point is populate your new WordPress website with your old site’s content. Follow along with the section below (skipping over the part about using a pre-made theme) to see how that is done.

Using a Pre-Made WordPress Theme and Importing HTML Content

If the steps above seem too intensive or time consuming to you then rest assured, there is another way. Instead of converting whatever design you happen to be working with right now into a WordPress theme, you can take advantage of any one of the thousands of themes available in the broader WordPress marketplace.

There are free themes and there are premium themes. Before deciding which is best for you, you may want to read up on which themes are designed to cater to your needs and browse by theme category here at Elegant Themes and elsewhere.

Once you’ve chosen a theme you like (and have its zipped file package downloaded) you’ll want to head back to WP Admin > Appearance > Themes > Add New and install/activate your new WordPress theme.

Once this is done, you will have a new WordPress website and theme–but little else. When you preview your site, it will be empty of content and probably look sort of boring. That’s ok, because next we are going to import your old site’s content.

In WP Admin go to Plugins > Add New and search for a plugin called HTML Import 2 by Stephanie Leary. Once this plugin is installed and activated, follow its handy user guide to import your entire directory of HTML pages. Complete with images!

After this you will have all of your old content living on WordPress and formatted by your new theme. Or, if you created your own theme above, your site should pretty much look like it did before–just running on WordPress.

In Conclusion

If you’ve used this post as a guide for migrating your website onto WordPress then you’ve just joined one of the largest open source communities in the world. Welcome! It’s a fun place with lots of developers, designers, bloggers, DIYers, and more–all building, playing, and creating with WordPress and WordPress themes/plugins.

If you’ve “caught the WordPress bug” the official WordPress.org website is chock full of useful themes, plugins, and other resources. If you’d like to further tweak your theme files, explore the Codex for seemingly endless tips, tricks, and variations.

And of course we hope you’ll stick around to chat in the comments below and subscribe for more blog posts in the future.

Article Thumbnail via Max Griboedov / shutterstock.com

download divi

52 Comments

  1. nice article but really missing customer spotlight… havent got any in a while.. need some inspiration

    • yeah and some tips and tricks

    • Not nice article need good clarification idea maybe some one not understand and me also not understand ,

  2. Okay John and all You want a trick or should I say a hack Then I give you this Monarch plugin hack…

    http://s91585912.onlinehome.us/howididit/whatidid2.html

    OP3N and Derek over in the Monarch 1.2 — Now With More Stats, Smarter Triggers And Other Great New Features post was looking for an email button so i attempted it before it becomes a full needed feature. ALMOST works. Do not know what needs changing.

    • Hey Richard, looks like you have PHP embedded within your PHP at line 2555. At that line, you are already in PHP, but you have .

      I suspect you want 2555 to read something like:
      $link = sprint(‘mailto:?subject=’ . urlencode(get_the_title()),

      I haven’t tested this, but this would at least solve the PHP embedded within PHP problem! 🙂

      • Not a 100% fix though, butt a good improvement though. I was also going to throw in the link to the blog post in the body as well.

        You can do a quick test on your end and make changes to the code.

      • Not a 100% fix, but a start.

        I also wanted to throw in the link to the post in the body as well along with extra text.

    • Hey Richard, great effort on trying to “hack” Monarch. It looks like your almost there with a regular “mailto:” command. This could be a great temporary way to use a mailto option.
      I’d like the coding wizards at Elegant to design a feature like this:
      It would be even better if a mail-button didn’t call for a mail application, but use a pop-up box (just like the other buttons) instead . This way you won’t have visitors being dragged away from your web-page.

      But thanks again for the effort!

  3. This is perfect. We’re in business of converting old html sites to wordpress! We usually use divi or another framework to migrate, but we’re looking into building our own themes based off of the html site now

  4. Great article, but how about the other way around? Believe it or not, some clients want websites that don’t do much other than sit around as information pages. We all have clients who don’t do much with their websites. For these sorts of sites, it’s best to rapidly build using wordpress and say “Divi theme” and then convert the whole thing to static HTML. This way you don’t have to use up database resources, schedule maintenance and updates, and have better performance on shared hosting plans. Basically set it and forget it.

    There are some plugins out there that do this such as “Really Static” and it would be great to hear from other devs on how they go about going from wordpress site to static HTML site. That is, if this is a topic of interest to anyone.

    • I agree that there are still an awful lot of clients just wanting ‘an image website’. Also some can be persuaded to have some interactivity eg sliding panels.
      As a designer what I would also like is advice on how to use WP to design the site, and then strip it to the bare bones to get faster load times.
      True there are articles around and plugins to make the site static, that do a good job, but for a non programmer, details on how to go about this would be a great ElegantThemes article. 😉

    • I agree with Jaime and feel strongly that static files are useful in many situations. Static sites are often much faster and more secure than data-driven sites. Static sales pages, for example, are gaining popularity lately. An HTML page, some CSS, perhaps some jQuery, and a PayPal button (or other “pay now” option) and you’re good. Why complicate things?

    • Nathan B. Weller

      Interesting. Honestly I didn’t think of that. Though, wouldn’t it be close to just as easy if you simply managed these clients via a service such as ManageWP? I’m assuming you are charging them management fees, which would more than cover your costs. It would also mean that if you ever did need to change something or update their design, you could just jump back into Divi and make the changes. Regardless, you’re right. I think going the other way is the topic of another post. I’ll suggest it for the future.

      • I think that WordPress to static site is a (~simple) 3 steps:
        1. Website copier to local storage.
        2. Upload the result to some hosting service
        3. Configure/replace old site with new

        Clearly it will be faster (no DB, etc…), easy to maintain: no upgrades. But also no seo improvement and modification are made by developer and will be relatively expensive.

        I never done that. Not expecting to do it.
        Finally, if this is what the client want – so why not?

  5. When I read this, the “oh, that’s how it’s put together!” light bulb suddenly went off for me. This is probably the most useful post I’ve read in the last year – thank you.

  6. This is an excelent information.

    thank you.

    regards

  7. A few other things you will want to also do when migrating a site from static HTML to a wordpress site:

    1) make their URLs more search friendly in the directory structure by using the %postname% functions.

    2) Redirect from older URLs. You can do this with a plugin, or simply place the redirect information for all of the old URLs on the domain, pointing to the new wordpress search-friendly URLs in the .htaccess document. This way visitors with old bookmarks won’t just receive 404 errors if you’ve upgraded the URL structure.

    3) Install a mobile theme like HandHeld so that they website owner now has better viewing on mobile devices.

    • Can you further explain #2 in your list? I am not a programmer or IT professional so it takes me a little longer to get it this “redirect” stuff 🙂 I am using WP with Divi.

      Also, I installed WordPress in a folder while we are in the development stage. But before we go live, I want to change that and make the URL not have /wordpress/, (at least on the home page).

      • To get rid of the “wordpress/” from url, simply go to
        control panel ==> setting ==> general
        and change ONLY the site url.

  8. Really an eye opener article on how to convert from HTML sites to WordPress. I love this article. Great article.

  9. Sure WordPress brings advanced web design to non-coders, but security-wise it is a nightmare. Bots that steal your bandwidth and hackers and spammers that are always attempting to penetrate your site, and the vulnerabilities attached to poorly designed themes and plugins. That’s why many sites prefer to stick with vanilla html/css.

    • Nathan B. Weller

      Security is definitely one of WordPress’ biggest issues. However, I think there are an equal number of quality tools/services for combatting the security risk to make it worthwhile. In the end what you get is a much broader range of possibilities for how you can grow and evolve you website.

    • Hmm.. Many sites prefer to stick to vanilla html/css because that’s what they want and need.

      In other words, don’t for one minute believe that just because your site is built on html/css only that your server and information is safe from hackers and the likes.

      It’s like the old saying “I’m on a Mac I’m safe from viruses”…

      Please stop spreading FUD.

      Thank you

  10. Thank you for this excellent post. I love you guys – for things like Divi and Monarch as well as for your blog! This article popped up in my inbox exactly at the right moment, as I am about to migrate my old sailing website (http://cocodemer.de) to WordPress. Very informative. 🙂

  11. I want to convert this html site to wordpress. The concern I have is that it has several affliate plugins that pull data via cron jobs from the affiliated sites.

    Will the html to wp converter plugins that are mentioned here be do this or is there a special method I have to use?

    this is the site
    firstvacationsearch.com

  12. I am trying for a long time to convert my website into wordpress. Unfortunately it is not just a simple HTML page, it is in another platform. I asked a freelancer if he could do it but unfortunately he told me that it was not so easy, and it would be better to upload a wordpress theme instead of the old one. So I keep searching because I really like my template.

    • If you are serious about doing the conversion, check out http://HeadwayThemes.com – not really a theme, but a framework in which you build your own theme via drag-and-drop. Reminds me a little of Divi, but with virtually unlimited control over exactly what goes where and how it looks. Not nearly as user-friendly as Divi, though! I’m really struggling with it, trying to make my first site from the ground up, but it is looking good so far.

      I just renewed my Elegant Themes membership to lifetime – for pre-made themes, they are the best I’ve seen, although they do have some quirks. Although I want to get good at using the Headway framework, most of the time I just want to populate a good pre-made theme and get on with life.

  13. LOVED IT! I have found many HTML based themes that I would LOVE to convert to WordPress themes, but have never really known how. I started learning a few months ago and have done 7 themes so far. It was an article similar to this one that finally made me get off my but and take the plunge!

  14. This may sound dumb but in your explaination I am not using “main” right after the body tag but “container” like this;

    Should I just replace in your instructions the div class container for main?

    I guess I can just try that or go into the CSS and change the name from container to main…duh!

    Thanks

    • Just bursting in…
      If you copy your website to a local store, you can change the HTML as you like because it is going to be transferred so no real browser will ever try to display the changes that you are making.
      Good luck!

  15. If i convert my html site to wordpress site, will it impact on my site’s ranking?

    • Nathan B. Weller

      I think that depends on how (if at all) you alter your link structures.

      • That and how you SEO your new site.

  16. thank you, very helpful, from the few articles I’ve read, this is the most easily understood.

  17. hi, does this work for non blog style wordpress sites? looking to convert our html template into wordpress so how does the main content added in back end of wordpress as pages end up showing on the front end?

  18. One thing to really keep in mind when converting html sites to wordpress are the URLS. If you are ranking with a URL that has .html at the end, then you HAVE to make sure you are redirecting that .html URL to your new wordpress.

    If don’t do some kind of redirect, all your hard worked for rankings will vanish!

  19. After having my blog (wordpress) hacked I swore never to use dynamic CMS again. I’m too lazy to post updates anyway…
    But if I REALLY needed a blog – I would rather use static blog generator like “jekyll” or “octopress”.

  20. Hi I would like to change my static website to wordpress site. Now my website seo are healthy. I know it is possible to redirect existing URL to new URL.I am having small doubt. How to do the same for images and downloads links? Can anyone clarify it? Thanks in advance.

  21. i have converted the home page.. but how about the other page.. like my team page which has its own design.. i noticed WordPress tags doesn’t work on it.. I dont want to recreate a team page from inside wordpress.. i just want the team page converted.. is there any way?

  22. Hello, recently I also converted my site from HTML to WordPress. I used a bit alternative way, with the help CMS2CMS migration service, they’ve done good job. though I find this article to be also a very useful one. Nice pieces of advice, thanks.

  23. Great article and very helpful. But onething, how to make this theme with wordpress post? means, some html template’s has post section. i wanna make this section with wordpress post. is it possible, if yes, then how?

  24. Great article!

    I’m going through this hell right now. I’m converting a 10-year-old membership-based graphics site, all in HTML to a WordPress blog. I don’t want to keep the old design, so I started fresh. After weeks of work, I have that part of the project sorted out at least.

    But the biggest problem is having to migrate the massive amount of content, which involves copying and pasting data from the old pages to posts. After I do that, I have to manually go through each post and weed out the old HTML.

    As I’m having to create posts for over 1,000 product pages. It’s a slow, slow process, downright maddening. I’ve almost abandoned the project more than once.

    Why didn’t I do this earlier? Because I was unfamiliar with CSS, and what I had worked. I was so busy designing my graphics that I didn’t want to take time away to undertake such a massive job.

    Then, this summer, following Google’s latest algorithm change, I quit getting traffic, because the site is no longer mobile friendly. So for me, making this change could mean saving my online business..

  25. Not working,
    Not a good step

  26. Very informative here and a great article on how to convert from a HTML website to a Content Management System called WordPress.

    If you have your current HTML website optimised with SEO make sure to keep your URL link structure for each page the same that way the links are crawled successfully by Google.

  27. Thanks for your guidance, it’s really helpful for me.

  28. What about “posts” and “pages”?

  29. Pretty handy tutorial. But if anyone still having difficulties in migrating from HTML to WordPress then you can surely acquire profession help from HireWPGeeks Ltd. They have a great team of developers who are expert of WordPress customization and HTML to WordPress conversion.

  30. really a good tutorial….
    but i still have some problems to do this.

  31. thanks a lot for the information, this is very useful for me

  32. Hey, thank you for this. But how to redirect all old HTML urls to new WP urls?? Is there any simple and best option for this. I have almost 1000 pages on my old html website.

Join 351,380 Happy Customers And Get Access To Our Entire Collection Of 87 Beautiful Themes For The Price Of One

We offer a 30 Day Money Back Guarantee, so joining is risk-free!

Sign Up Today

Pin It on Pinterest

Share This