Wordpress
April 18, 2013 posted by Maan

Swiveling From Novice to Pro-Basic HTML to WordPress Conversion

Swiveling From Novice to Pro-Basic HTML to WordPress Conversion

Let’s put it straight- static HTML sites don’t serve the purpose of savvy business owners anymore! Struck with the whim to lade their business portals with enticing features and functionalities, web owners are now looking for more dynamic and reliable alternatives. And WordPress has emerged as the choicest quick fix to their pursuit. Interestingly enough, till date WP 3.5 has been downloaded more than 16 Million times and the number is increasing with each passing minute! With such a huge acceptance of this robust CMS, conversion from HTML to WordPress seems inevitable. If you are a novice developer, who has a WP conversion project in hand, then the first thing you must refer to is a tutorial. There is ample number of tutorials available over the web, but most of them are gruesome to comprehend for amateurs. So to make the conversion process a plain sailing, here’s a facile step-by-step tutorial.

Note: This tutorial has been designed with the assumption that you have sound knowledge of CSS and HTML as well as about the functioning of WordPress. Also, you already have a HTML site, which is ready for conversion.

First Up

Here’s how to begin your conversion process:

    1. Create a new folder and assign it a name of your choice. This will be the name that you want to give to your WP theme.
    2. Now create two files- index.php and style.css- in this new folder. Your WordPress theme will be customized based on only these two files.
    3. Copy the code from your old CSS file and paste it into style.css file which you have just created and at the top of it, add the following code:
/*
Theme Name: Replace with your Theme's name.
Theme URI: Your Theme's URI
Description: A brief description.
Version: 1.0
Author: You
Author URL: Your website address.
*/

Your style sheet is now all set for conversion.

The Chopping Chapter

It’s time to chop up your HTML file. Just as WP uses PHP to call data from your database, it also uses PHP to call files which are stored in the local template folder. Now, chop your HTML code into different sections. Say, you chopped it into 4 sections. Instead of keeping all the chopped sections together, place them in separate files. Then call these codes one by one using PHP.

Moving ahead, sort your HTML code and add marker at places from where you will be cutting the code into separate sections.

Note: The following steps have been devised keeping in mind that you have set up your page from left to right as- header, content, footer and sidebar. If you have a page with different set up, you will need to rearrange some of the steps.

  1. Create three new files namely, sidebar.php, header.php and footer.php, in your theme directory.
  2. Now refer to the code placed between the <head> tags in the Twenty Ten theme file. Copy this code and paste it to the new header.php file that you just created.
  3. Open the original HTML file you had, copy the code section that you marked off as header and paste it in the new header.php file. Save and close.
  4. Next, open the section marked as content in your HTML file. Copy its code and paste it in the new index.php file.
  5. Similarly, copy the original code of sidebar section in the sidebar.php file and the original code from the footer section into the newly created footer.php file.

Get’em Together

Now your original code is segregated in four different sections- idex.php, header.php, footer.php and sidebar.php. It’s time to put them back together using a few PHP code snippets.

1.  Open the index.php file which includes the code from the content section of your original HTML file.
2.  At the top of this file, add the following code:

<?php get_header(); ?>

3.  Now, go to the bottom of the file and add the following line of code:

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

These code snippets will ask WordPress to fetch these 4 files and display them. You have now officially put the files together!

Knitting the Loop

You are almost done with the index.php file. It’s now time to add actual content into the index file. For this purpose, WordPress uses the Loop function of PHP. This function fetches the content from the database and displays it on call. Just copy the code below and paste it into the index.php file of your new theme.

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

Congratulations! You just initiated basic loop functionality in your code. WP will use this loop and display the content and comments on your website.

The Terminus

The coding part is complete! Now, you simply need to upload your theme in the /wp-content/themes/ folder. Once uploading is complete, log into WP admin and activates your theme. You are good to go.

Wasn’t that simple as ABC? HTML to WordPress conversion renders high-end functionality and scalability to your otherwise stagnant site. So, switch to WP today to revamp and step up your online presence.

Editor noteContributor Mike Swan is a part time content writer and web developer by profession, loves to share knowledge on HTML to WordPress theme & PSD to WordPress theme conversion tips and tricks for over 3 years and working as a strategist with markup conversion firm Markupcloud for past 2 years.

Maan

21 year old designer, blogger and front-end developer. love to share creative design and inspiration.

comments powered by Disqus