In the early years of the internet, all sites were created with nothing but static and plain HTML. However today after 20 years later, the internet is a whole new world with new web technologies that provide more enjoyable and richer experience to the web users. And the biggest part of the credit goes to the evolution of Content Management Systems such as WordPress that has become one of the most popular platforms to create sites and web applications that deliver results.
In fact, WordPress has overpowered all the other platforms for creating quality websites. More than 24.7% of websites are being created using WordPress and the number is only growing with time.
WordPress offers a plethora of themes and plugins that make developing a site a lot easier even for non-technical users. With WordPress, no coding, Not even HTML and CSS, is required.
However, even WordPress being available for free, many web users are still operating their sites in HTML, which is indeed shocking but it is the fact. Well, these webmasters may have some good reasons for not updating their sites. Maybe their website has a static design and content that does not change ever. Or maybe they don’t have enough resources and time to keep a WordPress site updated. However, the primary reason seems to be the unawareness about HTML to WordPress conversion.
Fortunately, with WordPress, everything is as easy as a pie. There are various ways to easily convert a HTML site to WordPress without losing any content and functionality.
Today, in this tutorial, we are going to share the whole process step by step to make it easier to convert a site without even having any technical knowledge and programming skills.
Converting your HTML site to WordPress:
Follow the below steps to convert your HTML site to WordPress successfully.
Step 1: Creating theme folder and PHP files
The first thing is to create a new theme folder and name it with a name you’d want to give your new theme. Now, create two files namely index.php and style.php and put them inside the folder.
For style.css file, you need to copy and paste the following code at the top:
/* Theme Name: Replace with your Theme’s name
Theme URI: Your Theme’s URI
Description: A brief description
Author: Your name
Author URI: Your website address. */
Once you have added these comments to your file, copy and paste the existing code of your CSS file below this.
Step 2: Divide your HTML into PHP files
Now, it’s time to separate your existing HTML into PHP files. WordPress works with PHP to call functions or in simple language, different parts of your content. Therefore, you would need to separate Header, Content, Sidebar, and Footer section of your HTML and then create 3 different files namely header., sidebar.php and footer.php.
Take out the header section from your HTML file and place it in the header.php file. Similarly, cut the sidebar and footer section and place them in sidebar.php and footer.php files respectively.
Note: Make sure the HTML is pasted in between these lines of code <?php — ?>
What about the content section?
Copy it and paste it in the index.php file we created in the first step.
Step 3: Putting everything back together
Till now, you have separate HTML into 4 different files (header.php, index.php, sidebar.php and footer.php).
With the help of few lines of PHP code, let’s put them together.
Add the following line of code at the top in your index.php file:
<?php get_header(); ?>
Now, come to the bottom of the file after all the HTML, and paste these two lines of code:
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Your HTML is now back together. You can make any changes in your files as per your needs.
Step 4: The loop
The final step is called The Loop, which displays your posts from the database.
Copy and paste the following code inside the content section in index.php file:
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<div id=”post-<?php the_ID(); ?>”<?php post_class(); ?>>
<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 class=”comments”><?php comments_popup_link( ‘Leave a Comment’, ‘1 Comment’, ‘% Comments’ ); ?></div>
</div><!–end post footer–>
<?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>
<?php else : ?>
<?php endif; ?>
Step 5: Uploading your theme into /wp-content/themes/
Congratulations, you have successfully created a WordPress theme out of your HTML website. It is now time to upload it to /wp-content/themes/. Once uploaded, log into your wp-admin and activate the theme by clicking on appearance -> themes.
Isn’t it easy? Let us know your experience in the comments section below.
Marie Thomas is the senior WordPress Website Developer working for Wordsuccor Ltd., a well established HTML to WordPress Conversion Company located in USA. She utilizes her wide in-depth knowledge to help her clients produce amazing web results online. She has a strong passion for writing useful and insights about WordPress tips and tricks.