Converting a Web Template into a WordPress Theme

Jul 3, 2012
PHP WordPress
173 Shares
By

If you are not into all the hype surrounding WordPress, you probably have likely heard about its ease of use especially for end-users. The platform is also easy to manage and delivers an almost limitless number of widgets to help add functionality.

Many users are usually not interested in the development process and only want an end product that is painless and flexible enough to allow additional features as the website grows. WordPress gives you that edge. However, before you can port your existing website or template into WordPress, you need to have a basic understanding of both HTML and CSS. WordPress uses PHP function calls to retrieve or call data elements. To make editing easier, you also need some fundamental knowledge of how PHP works.

Create the Basic Files and Folders

First, you need to create a new folder and give it the name of your theme. Inside this folder, you will need to create two files, “Index.php” and “Style.css”.

From your original CSS file, copy all its contents into the new “Style.css”. To help WordPress identify your new theme, add the code below at the very 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: www.e-labz.com
*/

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="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>

Copy the PHP code between the <head> tags 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.

  • Jason

    Love it. More please!

    • http://twitter.com/DavGit David Gitonga

      Hi Jason. keep watching this space.

  • KevinLloyd

    I thought all that meta generator stuff was auto generated with WordPress? Why are we coding this manually?

    • http://twitter.com/DavGit David Gitonga

      Hi Kevin. As an independent web designer, you want to display only what you want. Auto-generated content is not customized and takes away your privacy.

      • KevinLloyd

        Isn’t wp_head() coded to add meta name=”generator” content=”WordPress, pingback URL,s etc?

  • http://twitter.com/lum3ll Luca Mellano

    Nice article… keep going this way! =)

    • http://twitter.com/DavGit David Gitonga

      Hi Luca. Thank you.

  • veiadigital

    basic but important! thanks

    • http://twitter.com/DavGit David Gitonga

      True that.

  • veiadigital

    When I said I was referring to the basic simplicity but did not intend to disparage the article, because for me it was based, important, ok?! I am Brazilian and my English is basic (not mine, Google Translator) hehehe

  • http://twitter.com/TheNiyi Adeniyi

    Am new to WordPress and i find some of these codes confusing.

  • http://twitter.com/ArnoldB7 Arnold B

    Is there any plugin that can do this work?

  • S@kiv

    Hi..
    This blog is good and easy to understand. I also want to know how
    can we chop the each sections. For i.e. in header section there is a
    sidebar with a big image, text and learn more button. If I want to
    control whole of the header section with the php code. How can we do this section to
    make it dynamic?

    Thanks

  • Harris

    I did this with an html 5 template but i keep getting “Stylesheet is missing” when i upload it to wordpress.