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:
Table of contents:
1. Create a Folder with a Name of Your Choice 2. Break Your HTML File 3. Integrate the Loop Function with the Code Author bio1. 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.
*/
Hire on-demand dedicated developers of desired skill & experience.
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, "Index.php", "Header.php", "Sidebar.php", and "Footer.php" and place them in the theme directory you created earlier. The following code is placed in the header.php file:
"
charset=""/>
"
type="text/css" media="screen" />
href="" />
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 "Index.html" file into the new "Index.php" file. You shall follow the same steps for the respective “Sidebar.php” and "Footer.php" files. Make absolutely certain you do not make a wrong move here.
After following the above steps carefully, the original "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:
get_header();
Again, at the bottom, you have to add the following lines:
get_sidebar();
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:
if ( have_posts() ) :
while ( have_posts() ) : the_post();
the_title();
if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail();
the_content();
edit_post_link();
wp_link_pages();
endwhile; /* rewind or continue if all posts have been fetched */
else :
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.
Hire dedicated team for your next web development project.
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.