How to Convert Your HTML Site to WordPress

If you came of age during the 90’s, you likely remember watching “Friends” on TV, eating cereal Saturday mornings while watching cartoons, and staying up late to play video games using your Game Boy Color. When you searched the web during that time, all websites had nothing but text and static HTML. Fast-forward two decades and “Friends” is on streaming services or syndication, Saturday cartoons have been replaced with entire channels dedicated to the genre, and handheld video games are most commonly played on your mobile phone.

how to convert static html to wordpress

HTML only websites have given way to websites that are more complex. They provide a more immersive, exciting, and enjoyable experience for visitors as well as website creators. A lot of this new flexibility is thanks to projects like WordPress. Now, just about anyone who installs WordPress can quickly create an exciting website with functionality that was not thought of decades ago. They don’t need code, and they don’t need HTML.

What can you do if you want to migrate your HTML only site to a WordPress site? Thankfully, there are a number of options available to address this problem.

Three Ways to Migrate Your HTML Site to WordPress

  1. Manually Make a WordPress Site Based on a Static HTML Site
    Depending on your level of expertise with coding, this may not be a difficult option, or it may be a daunting task. The idea is to take the code that you already have and use that as a base in creating WordPress theme files. You’ll need a little bit of PHP, CSS, and HTML experience. But, at the end of the day, you’re going to be doing a lot of copying and pasting.

    The good side is that you will have a WordPress theme that looks like your original site. The downside is that you won’t have the WordPress flexibility that allows you to use widgets and edit your site on WordPress’ back end.

  2. Take a Pre-Made Theme and Then Move Your Content over to It
    WordPress has so many pre-made themes that you will likely find one that has a similar feel and style to the site you have. You can simply adjust it so that its design and appearance resembles your old website. If you do this, you will have complete access to all of the features of WordPress. In the future, you can expand that existing theme, taking advantage of the best that WordPress has to offer.
  3. Pay Someone to Do It for You
    This option has the benefit of being the easiest option on our list. Depending on your budget, you can find someone who’s experienced at migrating HTML only sites to WordPress to do it for you. The downside is that you miss out on getting a feel for how WordPress works. Once you understand how WordPress works, you will be able to do a lot of the adjusting yourself when needed. Something that not many know is that some of Canada’s best web hosting companies offer HTML to WordPress migrations for free.

    4. How to Manually Make a WordPress Site Based on Static HTML

    Start by creating a theme folder with basic files. It’s a lot like when you create a directory on your computer, so you can pick whatever name you want. Then, use a code editor to create various text files. They should have the following names:

    • style.css
    • index.php
    • header.php
    • sidebar.php
    • footer.php

    You will get back to those in a minute.

    Next, Copy Your Existing CSS onto Your WordPress Stylesheet.

    This goes into the style.CSS file you created earlier. Here you will need to include things such as:

    • Author – Your name
    • Theme Name – The name you want to give your theme
    • Description – How you wish to describe your theme
    • Author URI – This links to your homepage

    Following the header, you should copy and paste CSS from your original static HTML website. Save things and close things up.

    Before doing the next step, it’s good for you to understand the way that WordPress works. WordPress relies on PHP when it wants to call and retrieve data from underlying databases. The files that you are creating indicate to WordPress where each piece of content will be displayed. In this step you’re basically taking the HTML that you’ve created and will paste it in different files so that WordPress knows where to put them.

    We’ll start with the index.html file. You want to copy portions of your index.html that are on the left of the following list and paste them into the file that is on the right of the list. After you paste, you save and close.

    • From the top of the file to the opening DIV class=“main” >> header.php file
    • Everything inside the aside class =”sidebar” including the element >> sidebar.php
    • Everything after your sidebar >> footer.php file
    • All of the remaining information in your index.HTML file>> index.php file

    Close the index.html file

    Now, you will finalize your index.php file. You do this by placing <?php get_header(); ?> at the top of the file.

    Then, at the bottom of the file, you will place <?php get_sidebar(); ?> <?php get_footer(); ?>

    The last thing to do is to make a loop. This is what WordPress is going to use when displaying your content to those who visit your site. Add the following code:

    <?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 file and then close it.

    Finally, the time has arrived to upload your new theme. This means taking all of the theme files that you stored with your theme folder and allowing them to access your WordPress install directory. You can do this by taking your new theme folder and putting it inside the/WP – content/themes/folder. Then, go to WP admin> appearance> themes> you should see your new theme. Activate the new theme, and all that’s left is adding your old content.

    But That Seems Complicated

    If the above-mentioned steps are complicated, then we recommend using the two other methods we mentioned, either taking an existing theme and adjusting it to meet your needs or having a professional do it for you.

    If you’re like most people, once you start using WordPress, you’re not going to want to go back to any other way of making websites. WordPress is full of themes, plug-ins, and resources. It has tricks, tips, variations, and a vibrant community to help you.

    Do you have any experience migrating HTML only websites to WordPress? We would like to hear from you in the comments section below.