Converting a Web ( HTML) Template into a WordPress Theme

In the event that you are not into all the buildup encompassing WordPress, you most likely have likely caught wind of its convenience particularly for end-clients. The stage is likewise simple to oversee and conveys a just about boundless number of gadgets to help include usefulness.

Numerous clients are typically not intrigued by the improvement methodology and just need a deciding item that is easy and adaptable enough to permit extra characteristics as the site develops. WordPress provides for you that edge. Nonetheless, before you can port your current site or format into WordPress, you have to have a fundamental understanding of both HTML and CSS. WordPress utilizes PHP capacity calls to recover or call information components. To make altering less demanding, you likewise require some crucial learning of how PHP functions.

Create the Basic Files and Folders

Initially, you have to make another envelope and provide for it the name of your topic. Inside this envelope, you will need to make two records, “Index.php” and “Style.css”.

From your unique CSS record, duplicate all its substance into the new “Style.css”. To help WordPress recognize your new topic, include the code beneath at the precise top inside your “Style.css” file:

Theme Name: Replace with your Themeâs name.
Theme URI: The URI of your Theme goes here
Description: Describe your theme under this section.
Version: 1.0
Author: DavGit
Author URI:


Slicing the HTML

Since WordPress uses PHP function calls to call files from within your template folder, we will need to slice the layout of the website into 4 different sections. These sections include the header, content, sidebar and footer. These 4 different sections are actually 4 separate files that will be called using PHP.
Create 4 new files, “Index.php”, “Header.php”, “Sidebar.php” and “Footer.php” within your theme directory. For the header.php file, copy and paste the PHP code below:

<html xmlns="" xml:lang="en" lang="en">
<head profile="">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>"
wp_title(''); ?> <?php if ( !(is_404()) && (is_single()) or (is_page()) or (is_archive()) ) { ?> at <?php } ?>
<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(); ?>

Copy the PHP code between thetags of your old “index.html” page into the above file. Save and close. Copy the content section from the old “Index.html” file into the new “Index.php” file. Save and close. Do the same for the “Sidebar.php” and the “Footer.php” files, ensuring that you transfer only the appropriate sections from the old to the new files. You should now have the original “Index.php” file chopped into 4 different PHP files. To put these files back together using PHP, open the new “Index.php” which now contains the main content and add the line below at the very top:

<?php get_header(); ?>; ?>

At the absolute bottom of the same file, add these 2 lines:

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

These lines tell WordPress to fetch the header, sidebar and footer PHP files we just created and display their contents within the “Index.php” file. Now that the entire code has been put back together, we can edit the different sections of our “Index.php” file by editing the respective files instead of sorting through the main index file.

Adding the Loop Function

To call and display posts from the within the database, WordPress uses the Loop PHP function. First you will need to create a div that will hold the content inside the “Index.php” file and add the code below inside the div:

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

The above code tells WordPress to display your posts and comments onto the webpage.
You can take the theme even further by customizing and enhancing its look using Template Tags and Template Files. These can be used in the header, sidebar and footer sections to call posts, menus and other WordPress elements.

Author: Ashif

Hi, my name is Ashif. I've been earning a living online since 2006 and love to share what I've learned. You can connect with me on Facebook, Twitter, YouTube and Google Plus. Don't forget to subscribe to my blog to keep up with my latest tips and tricks. You can also send questions in my mail.

Leave a Reply

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