html to wordpress
Wordpress

HTML was the first web language which was used to create websites and other web applications. And 20 years now, everything has changed. HTML is only used to give your website a basic structure that is only static.

There is certainly no denying that the online world is growing at a rapid pace. What once was the soul of the internet, is now considered to be obsolete. With the growing changes, many new platforms have come into the picture that are being used by almost every webmaster. And these platforms are known as Content Management Systems. Among all the CMSs available out there, WordPress has grown tremendously since its inception.

In fact, it has become the most widely used platform today to create and develop websites be it informative blogs, business websites, portfolio sites or e-commerce sites. The main reason for the popularity of WordPress is its ease of use as well as a worldwide online support community. Additionally, WordPress powers more than 24% of the websites today including various online stores.

Considering the popularity and growth of WordPress, it won’t be an understatement to say that WordPress is the future of the online world. Therefore, it does make sense to convert your static HTML websites to fully functional and dynamic WordPress sites. HTML sites are as good as a web page with a lot of content. These sites can hardly let any visitor perform any specific type of task. Thus, it becomes all the more important to keep your website updated with the growing trends of the online industry.

Converting HTML to WordPress site is no laughing matter which is why we are going to share the in-depth tutorial of this conversion step by step.

Step 1: Create Necessary Folders and Files

WordPress is a great content management system where everything is organized very intelligently from files of a theme to managing these files in folders. Therefore, in order to convert your HTML site to WordPress theme, you also need to follow the same standards and create all the relevant folders and files. Start off by creating a folder on your system with any relevant name that you would want to give your theme.

Once you have created the folder, it’s time to create the two main files of a theme i.e. index.php and style.css. To help WordPress to recognize your theme, consider adding the below-mentioned lines in your style.css file.

/*

Theme Name: “relevant name”

Theme URI: “relevant URI”

Description: “Any related description”

Version: 1.0

Author: Your name

Author URI: Your website URL

*/

Note: Enclose this data with /*…*/ so that it looks like this:

Now copy the content of your default theme style.css file’s code and paste it in your style.css file that you have saved on your system. Make sure that the default theme is TwentyThirteen default theme.

Step 2: Setting Up PHP Files

You probably have noticed in your WordPress appearance → editor that each theme has many different files such as header.php, footer.php, sidebar.php, and more. You also need to set up your theme as these components. This is only possible by separating your HTML into different PHP files. Open your HTML code and start separating it into different files like header.php, footer.php, sidebar.php and more.

Now the code you have copied and pasted into different files is all about the appearance of your site. It’s still static. You need to make it dynamic so that it can function in real time. Therefore, open your WordPress dashboard and go to appearance → editor. Open the relevant files such as header.php and copy the PHP code and paste it into your header.php file. Make sure you don’t override the existing code of your files. Similarly, copy and paste the content into other files and save it.

Step 3: Using PHP to Get Page Elements

Open your index.php files in your theme folder and paste the following code on top of the file.

<?php get_header(); ?>

Now add

<?php get_sidebar(); ?>

<?php get_footer(); ?>

at the bottom but just before </body> tag.

Step 4: Looping the Content

You need to use the “Loop Function” in your theme to add content to your website. As an instance, a WordPress blog displays the latest blog posts on the homepage which are retrieved from the database to show them on the web page.

Copy the below code in your index.php code to integrate loop function in your theme. Make sure you add the content in the main div where your main content is placed.

<?php if ( have_posts() ) : ?>

<?php while ( have_posts() ) : the_post(); ?>

<div id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>

<div>

<div><?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><?php the_author(); ?></div>

</div><!–end post header–>

<div>

<?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>

<div><?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>

<div><?php next_posts_link( ‘Older Entries’ ); ?></div>

<div><?php previous_posts_link( ‘Newer Entries’ ); ?></div>

</div><!–end navigation–>

<?php else : ?>

<?php endif; ?>

Step 5: Activating the Theme

Congratulations, you have successfully converted your HTML site to WordPress website. Now is the time to test your theme. Activate it in the appearance → theme and check if all the elements and features are working fine.

Hope you find this article helpful!

Emily Johns is a WordPress Developer by Profession and Writer by Hobby. She Works for Wordsuccor Ltd., providing HTML to WordPress Conversion Service to global clients. If you also need to convert your HTML website to WordPress you can connect with her on Google+, Facebook, and Twitter.