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.
