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.