convert html to wordpress theme

5 Steps to Convert old HTML to the Modern WordPress

Modern technologies don’t stay still in our rapidly developing world, this is why the question of how to convert HTML to WordPress is a live issue nowadays. Sometimes it’s hard to accept the changes and upgrade the website according to the modern standards. Website owners don’t want to bother with this because they think that the site content will be changed. Or maybe they just don’t know how to do this?

Simplicity is the key to success and it’s absolutely right. But does “simple” always mean modern and user-friendly? No. To create a modern website with a set of features and functionalities you need to look at the world in a new way and convert HTML to WordPress theme.

The process of upgrading a website isn’t difficult and will not take much of your time. The main thing is to be stick to the sequence of the certain actions which can help you to do everything correctly and quickly. This article is devoted exactly to this sequence, so using our guide you will be able to convert HTML to WordPress step by step without losing its design and content. Let’s start!

Step 1: Create a folder

You should start with a folder creation for your files and theme. Keep it wherever you want, the main thing is you should have an easy access to it.

When this part of the work is done you should create the following files:

  1. footer.php;
  2. sidebar.php;
  3. header.php;
  4. index.php;
  5. style.css

in the code editor and then save all of them in the previously created folder. Now you are ready for the second step.

Step 2: Change or save your previous design

Here you should stop and think for a while whether you want to save the design of your website while migrate HTML to WordPress or not. If your answer is yes, then you should copy the old CSS and add it into the new file (style.css).

Let’s consider how what will be at the beginning of this file:

<?php
/*
Theme Name: (You should replace this with the name of your theme).
Theme URI: (Here you should enter the URI of your theme).
Description: (Write a brief description).
Version: 1.0
*/
?>

Not so difficult, right? Ready for the third step?

Step 3: Use your HTML

  • The third part of our guide about how to create WordPress theme from HTML step by step is to copy your HTML and paste it into the header.php file. Save the changes.
  • Next stage is to paste everything with the “sidebar” tag to the previously created sidebar.php file. Just copy everything with the necessary tag from your index.html file. Don’t forget to save!
  • After this, you need to copy the information remained after the “sidebar” class from your index.html file and paste it into the new footer.php file (you created it at the first stage). Also, don’t forget to save the changes.
  • The last effort at this stage is to copy everything that has remained in your index.html file and paste it into the new index.php previously created a file. Leave it opened and save the changes.

Step 4: Finish the index.php file

You are close to the finish. In the index.php file (which you left opened) place this code at the top of the file:

<?php get_header () ; ?>

And at the bottom of the file place these lines:

<?php get_sidebar () ; ?>
<?php get_footer () ; ?>

The last step is to add this piece of the code to your file:

<?php if ( have_posts () ) : ?>
<?php while (have_posts () ) : the_post (); ?>
<div id=«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 ; ?>

Done? Save the changes and close it.

Step 5: Choose the new theme for the website

Finally, the last step of how to make WordPress theme from HTML! All you have left to do is to choose a theme. Remember your folder from the first step? Add it to the /wp-content/themes/ in the previously installed WordPress directory.

You will be able to choose:

  1. The new theme in WP Admin.
  2. Appearance.
  3. Themes.

Free or paid, it’s up to you which one to choose for your website. The thing is that it should be the best theme which will ideally suit your business!

migrate html to wordpress
How to Change HTML in WordPress – HTML Import 2 plugin

When saw the preview of your upgraded site you may be in a panic because there is no content. Calm down and install the HTML Import 2 plugin to get your old content.

So, now everything is finished and you can enjoy your new upgraded site for which you are not ashamed. As you see, the problem of how to change HTML in WordPress was not super difficult and its solving didn’t take much of your time and efforts. Enjoy the result you’ve got and stay in trend!

1 Star2 Stars3 Stars4 Stars5 Stars (5.00 / 5, votes: 1)
Loading...

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>