/ Software Development

Converting Your Static HTML Site to WordPress Tutorial

Md. Masumur Rahman

Md. Masumur Rahman

I am Md.Masumur Rahman, From the age of twenty I knew that design was my passion. I specialize in designing and developing user interfaces and digital products.

Read More
Converting Your Static HTML Site to WordPress Tutorial

If your aim is to not only get your content from your static HTML site into WordPress but also copy your current design, this means you will need to create your own custom WordPress theme.

So let's see how you will do the HTML to WordPress conversion with ease.

Steps on HTML to WordPress Conversion:

Step 1: Create a New Template Folder and Necessary Files

Create a new directory to hold your theme files. Name it whatever you want.

Then, create the necessary 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.

The necessary files are-

1.Style.css

2.Index.php

3.header.php

4.sidebar.php

5.footer.php

Step 2: Copy Existing CSS Into New Stylesheet

If you are looking to duplicate a design, this probably means you have at least some CSS that you want to save. So the first file you are going to want to edit is your Style.css file.

Add the following to the top of css 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.
*/

Save and close the file.

Step 3: Distinct Your Current HTML

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.

  • open your current site’s index.html file. Showing everything from the top of the file to the opening div class=”main” tag. Then Copy and paste this section into your header.php file, save and close.
  • Go back to your index.html file. Showing the aside class=”sidebar” element and everything inside it. Then Copy and paste this section into your sidebar.php file, save and close.
  • In your index.html select everything after your sidebar and copy and paste it into your footer.php file, save and close.

At last, 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.

Step 4: Finalize Your Index.php File

Your new theme’s index.php file you wish to make positive it will call up alternative the opposite section (besides the most content) that are housed within the other files you’ve created.

Or in different words, replace together we just “chopped up”.

Your index.php file, place the subsequent 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(); ?>

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 all keep inside 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 recently created theme ought to seem there.
  • Go ahead and activate it!
  • All that’s left to try and do at this time is populate your new WordPress web site along with your old site’s content.
  • Follow along side the section below (skipping over the half regarding employing a pre-made theme) to visualize how that's done.
  • Using a Pre-Made WordPress Theme and Importing HTML Content

If the steps above appear too intensive or time intense to you then rest assured, there is another way.

Instead of changing whatever style you happen to be working with straight away 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 subject you prefer (and have its zipped file package downloaded) you’ll need to move back to WP Admin > look > Themes > Add New and
  • Install/activate your new WordPress theme.
  • Once this is often done, you will have a new WordPress website and theme–but little else.
  • When you preview your website, it will be empty of content and probably look sort of boring.

That’s ok, as a result of next we tend to area unit getting to import your previous site’s content.

In WP Admin move to Plugins > Add New and seek for a plugin referred to as hypertext markup language Import a pair of by Stephanie Leary.

Once this plugin is installed and activated, follow its handy user guide to import your entire directory of hypertext markup language pages.

Complete with images!

After this you may have all of your previous content living on WordPress and formatted by your new theme.

Or, if you created your own theme on top of, your web site should just about appear as if 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 many 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 different 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.