In this tutorial, I'll show you the easiest method of creating a WP theme with minimal hassle and coding knowledge.
A note on the article
This is a bit of a work in progress and as it's my first attempt at a pretty massive article and so I'm not sure how easy it is to follow and will be improving on it at later dates.
To follow this tutorial, you must download the WP-Theme Package .zip file from here and unzip that file, ready for use.
Content Management Systems such as WordPress and Joomla have notoriously difficult systems for coding templates/layouts and implementing them correctly. Unlike simple sites running with standalone pages (i.e. each separate .html/.htm page includes a full syntax with individual doctype declarations, headers, CSS styling and of course, body content), layouts for WordPress and other CMSs have to first be coded as any other layout, as a single .html standalone page, and then sliced into several different portions to be included into what will then be the raw content area, just text, images and other body content.
Coding templates for WordPress is at the beginning much the same as slicing layouts to run with PHP Includes (header.php and footer.php files are 'PHP included' into the content file). Please have a layout fully coded and readied with correct syntax, sequencing and valid HTML and CSS.
The code for your layout should look like a meatier version of this skeleton:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>SITE NAME HERE</title>
<style type="text/css">
body {
background: #000;
font: normal 80%/170% Trebuchet Ms;
color: #FFF;}
</style>
</head><body>
<div id="header"></div>
<div id="content"></div>
<div id="sidebar"></div>
</div id="footer"></div>
</body>
</html>The first step after finishing your layout is to select all of your code from the top <!DOCTYPE html.. to and including <div id="content"> but not selecting the closing </div> tag, copy it, and paste it into a Notepad file and name that header.php. Of course your layout will be different to my skeleton so basically what you copy is everything from the top to the place just before where your content and text start.
After that, we have to add some PHP codes and link defined by WordPress. You needn't fully remember these but if you want to exploit all of WordPress' features such as RSS feeds and etc. please add these:
<link rel="alternate" type="application/rss+xml"
title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="application/atom+xml"
title="<?php bloginfo('name'); ?> Atom Feed" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />Now I'll briefly explain what the above basically are. The first <link rel... does links the header.php to your WordPress generated RSS feed, likewise the second is for your Atom feed and the third is a WordPress feature called "pingbacks".
Another <link rel... tag you're going to need to add is the below. You can add it right next to the others or anywhere else inside the <head></head> tags.
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"
type="text/css" media="screen" />This one is to link your external CSS stylesheet to header.php. Our CSS is currently still inside the header.php file but now we are going to create an external stylesheet. Copy all the CSS inside the <style></style> tags excluding the actual tags from header.php and then paste this information into a new Notepad file. In the stylesheet you can also define the name, author and other information of your layout by entering the below on the top of the stylesheet:
/*
Theme Name: NAME OF LAYOUT
Theme URI: URL OF THEME'S WEBSITE
Description: DESCRIPTION
Version: 1.0
Author: YOUR NAME
Author URI: YOUR WEBSITE URL
*/When finished, save this stylesheet as stylesheet.cssor style.css or similar.
The next step is to extract your footer portion from the original .html file; this is almost exactly the same process as the first step for header.php. However, this time we are going to copy everything (in my example) from the closing tag (</div>) of <div id="content"> all the way down to the bottom. In yours, just follow this simple rule: copy everything that would go under your content text in a standalone .html file. Name this file footer.php accordingly.
In WordPress unlike PHP Includes, the sidebar area is in a separate .php file and then attached into the footer.php or header.php file depending where you originally coded the sidebar to be. Much like making an external stylesheet, think of this as an "external sidebar". If you're using a traditional layout style (i.e. the 100% width header and footer with the sidebar and content area side-by-side in between, this should be easy or as long as you have a defined sidebar area. The reason for an external sidebar is because WordPress needs to be able to access the sidebar independently in order to add widgets to it. Make sure you have written everything you want in the sidebar and copy all this (excluding the sidebar DIV tags) from where it is in either header.php or footer.php. Paste your sidebar information into a new Notepad file and save it as sidebar.php. Now we have to PHP include the sidebar.php to where the information used to be in either the header.php or footer.php files. Use this code:
<?php get_sidebar(); ?>
Open a new Notepad file and now we will attach (or include) the both header.php and footer.php into this file which you should save as index.php. To do this put this, <?php get_header(); ?> at the top of the file and this <?php get_footer(); ?> at the bottom. Make sure to keep these two always at the direct top/bottom.
Now in index.php paste the below between the two tags we've added in above.
<?php
function comment_plugger($show = 1, $limit = 0, $sep = ' ', $none = ' none') {
global $wpdb, $tablecomments, $id;
$cid = ($show) ? ($id - 1) : $id;
$request = "SELECT DISTINCT comment_author_url, comment_author FROM
$tablecomments";
$request .= " WHERE comment_post_ID='$cid' AND comment_author <> '' AND
comment_author_url <> ''";
$request .= ' ORDER BY comment_author ASC';
$request .= ($limit > 0) ? "LIMIT $limit" : '';
$commenters = $wpdb->get_results($request);
if ($commenters) {
$output = '';
foreach ($commenters as $commenter) {
if (!empty($commenter->comment_author_url)) {
$output[] = '<a href="'.$commenter->comment_author_url.'"
title="'.$commenter->comment_author.'">'.$commenter->comment_author.'</a>';
}
}
}
if (is_array($output)) {
$sep = ", ";
echo implode($sep, $output);
} else {
echo $none;
}
}
?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<h1>
<a href="<?php the_permalink() ?>" rel="bookmark" class="title" title="Permanent Link to <?php the_title(); ?>">
<?php the_title(); ?></a><br />
<?php the_time('l jS F, Y - g:ia') ?> <!-- by <?php the_author() ?> --></h1>
<div class="entry">
<?php the_content('Read the rest of this entry »'); ?>
</div>
<h6>
Posted in <?php the_category(', ') ?>
<strong>|</strong>
<?php edit_post_link('Edit','','<strong>|</strong>'); ?>
<?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?>
</h6>
<?php endwhile; ?>
<p class="alignleft"><?php next_posts_link('« Older Entries') ?></p>
<p class="alignright"><?php previous_posts_link('Newer Entries »') ?></p>
<p class="clear"></p>
<?php else : ?>
<h1>Not Found</h1>
<p>Sorry, but the page you requested cannot be found. If you feel this is an error, let me know.</p>
<?php get_search_form(); ?>
<?php endif; ?>It is not necesscary that you understand exactly what all that means, especially if you don't have a full knowledge of PHP however, here is the general purpose of all that technical jargon above. The above code is just calling and displaying your WordPress post and all the other features found on a WordPress blog page. This index.php is obviously just to display on your main blog page, usually the front/homepage.
The rest of the steps are simple. Basically when making a WordPress template the goal is to one, slice the original layout and two, package all the separate files into a bundle (i.e. one folder). Create a new folder; name it whatever your layout's called or whatever your prefer; drag and drop the header.php, index.php, footer.php, stylesheet.css and any image files into this folder. There are a couple more files that you'll need so WordPress recognizes and is able to use your template. They involve just a lot of copying and pasting of WordPress-unique PHP files which WordPress operates on. You don't have to remember anything about them but make sure you include them. Many of them can be edited to better match your template although knowing where and how to edit requires more knowledge which I'll cover it future articles.
I'll provide the rest of these files for download. After downloading these files, take them out of the folder they come in and drag and drop them into your template's folder and upload the finished template onto WordPress.
A Quick Word on Images
Copy and Paste all the images you have used in your layout into the folder named "images" in your WordPress theme's directory. Make sure now that all the images mentioned in your CSS and HTML coding in your .css or .php documents point to your file directory. I usually do this AFTER I have uploaded the theme onto WordPress and then figure out the directlinks to every image and copy and paste that into the CSS or other.
Your theme may also include a favicon (.ico) which you can upload into the images folder or not and use the favicon code as normal. You can also include a screenshot of your layout for identification purposes into the directory (not inside the images) file although it sis isn't necesscary.
Comments
Using this nowwww.
I'm a jack of all trades in training.