3 Step Process to Convert HTML Site into WordPress

commas-left

WordPress has been making waves from quite some time now, and if you have questions on the reasons for its success, they sure won’t go unrequited.

WordPress is a massively useful platform to create websites that can be adorned with fabulous features, and at the same time, made sure that search engines have an affinity for them as well.

commas-right

best-html5-wordpress-themes

Also, for the folks creating websites using WordPress, the entire process is amazingly simple and they do not need to be coders to build a site that comprises of all of the desired features.
This has lent a greater significance to the HTML to WordPress theme conversion, as it lets you add a suite of additional features to your traditional web template. Let’s take a detailed look at how to convert HTML site to WordPress:

1. Create a Folder with a Name of Your Choice

The whole process begins by creating a folder and assigning it a name of your choice. This is followed by creating files, “Index.php” and “Style.css” and copying them in the folder. These two files are used during all the stages of website development. Then, take your original CSS file, and copy the contents from it into the Style.css file you placed in the above-mentioned folder. In order to make your theme comprehensible to WordPress, add the below code:

/*
Theme Name: Replace with your Theme’s name.
Theme URL: Your Theme’s URI
Description: A brief description.
Version: 1.0
Author: You
Author URL: Your website address.
*/

2. Break Your HTML File

WordPress make use of the PHP when it has to invoke data from the database. Similarly, it also invokes files from the template folder using PHP only. Any website you see on the Internet comprises of a header, footer, sidebar and content. This is what you have to follow with your website, and thus, you chop the HTML code with you in 4 different sections. This division also makes it easier for PHP to identify and call the requisite files.

Thus, you need to build 4 new files,

1
"Index.php"

,

1
"Header.php"

,

1
"Sidebar.php"

, and

1
"Footer.php"

and place them in the theme directory you created earlier. The following code is placed in the header.php file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type');?>"
charset="<?php bloginfo('charset'); ?>"/>
<title>
<?php wp_title(''); ?> <?php if ( !(is_404()) && (is_single()) or (is_page()) or
(is_archive()) ) { ?> at <?php } ?>
<?php bloginfo('name');>
</title>
<meta name="generator" content="WordPress <?php
bloginfo('version'); ?>" /> <!-- leave this for stats -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"
type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?
php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php
bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3"
href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_get_archives('type=monthly&format=link'); ?>
<?php wp_head(); ?>
</head>

The PHP code from the <head> tags of the old index.html page has to be copied into the above file and saved duly.

The place the content that lies inside the old

1
"Index.html"

file into the new

1
"Index.php"

file. You shall follow the same steps for the respective “Sidebar.php” and

1
"Footer.php"

files. Make absolutely certain you do not make a wrong move here.

After following the above steps carefully, the original

1
"Index.php"

file is now divided into 4 different PHP files. The next step involves combining these files by the help of PHP, for which, you need to open the new Index.php holds the main content. The following line must be added at the top of this file:

1
<?php get_header(); ?>

Again, at the bottom, you have to add the following lines:

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

Now, Word Press is well placed to fetch the different sections and display the required content. lets proceed now to editing different sections of Index.php

3. Integrate the Loop Function with the Code

The final part of the whole process consists of inserting the content into the code and displaying the actual post. For the purpose, Loop PHP function is called. In the index.php, create a section to paste the following content:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<?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;?>

Round off the whole exercise by uploading the theme folder to /wp-content/themes/. Activate the theme from your WordPress account.

The final theme create above can be further packed with feature using various tags and plugins. But for now, make sure you got all the basics right.

Author bio

Mike is a content writer by mood and a web designer by profession. He loves to share his thoughts & Ideas on various HTML to WordPress conversion services. You can log on to his business website (Markupcloud) for more information on various other conversion services.

Leave a Reply

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

CAPTCHA

*