How to Create a WordPress Theme Part 3

Now it’s time to put in the WordPress codes into the new theme. This time, we will copy-paste from WordPress’s default Kubrick’s theme.

Main Index Template

In index.php, we need to remove all the leftover codes from what we’ve copied from the css library that we no longer need. Essentially, we only require the div tags, and anything outside these are unneeded. In the 2 column layout we are using right now, that would be the following:

<b>Content Column: <em>Fixed</em></b> <script type=”text/javascript”>filltext(45)</script>

Remove these and in its place we will paste in the WordPress codes:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<?php the_date(”,’<h2>’,'</h2>’); ?>

<div class=”post” id=”post-<?php the_ID(); ?>”>
<h2><a href=”<?php the_permalink() ?>” rel=”bookmark”><?php the_title(); ?></a></h2>
<div class=”meta”><?php _e(“Filed under:”); ?> <?php the_category(‘,’) ?> — <?php the_tags(__(‘Tags: ‘), ‘, ‘, ‘ — ‘); ?> <?php the_author() ?> @ <?php the_time() ?> <?php edit_post_link(__(‘Edit This’)); ?></div>

<div class=”entry”>
<?php the_content(__(‘(more…)’)); ?>
</div>

<div class=”commentlist”>
<?php wp_link_pages(); ?>
<?php comments_popup_link(__(‘Comments (0)’), __(‘Comments (1)’), __(‘Comments (%)’)); ?>
</div>

</div>

<?php comments_template(); // Get wp-comments.php template ?>

<?php endwhile; else: ?>
<p><?php _e(‘Sorry, no posts matched your criteria.’); ?></p>
<?php endif; ?>

<?php posts_nav_link(‘ — ‘, __(‘&laquo; Older Posts’), __(‘Newer Posts &raquo;’)); ?>

After saving, add these to your style.css:

.post {
margin: 0 0 40px;
text-align: justify;
}

.post hr {
display: block;
}

.entry ul li:before, #sidebar ul ul li:before {
content: “0BB 020″;
}

.entry ol {
padding: 0 0 0 35px;
margin: 0;
}

.entry ol li {
margin: 0;
padding: 0;
}

.postmetadata ul, .postmetadata li {
display: inline;
list-style-type: none;
list-style-image: none;
}

These are the div classes that corresponds to what we’ve just copied and pasted into the index.php. Again, this is taken from the WordPress default theme.

Single Page

Copy everything in your index.php and paste it into your single.php. Whenever you make changes to your index.php, you should do the same in single.php, unless you want your individual post or page to look different than your index.

You can also choose not to have a single.php file. This will result in WordPress using your index.php as the template. Doing this will save you time required to update your single.php file all the time, but it’s recommended to have a the single page file since some plugins requires you to edit that page.

Sidebar

It gets a little tricky here, since the theme we’re trying to create has 3 sidebars, but right now we only have one. But here is how a little ingenuity can actually help us get what we want. All we have to do is actually nest another 2 column layout into the single sidebar.

But rather than using the same 2 column layout codes from the css library, this time we’ll take the codes from the 3 column layout in order to make things a little simpler for us.

Before you start though, you should edit your style.css and sidebar to change the div class “leftcolumn” to “sidebar” instead. This is important because we do not want duplicate class names, which will mess up your theme. Right now you won’t see any duplicated class names, but the class “leftcolumn” also exist in the 3 column layout we’re about to copy from.

Following the steps from the previous post, copy and paste related codes from the library and into your theme. All you need is the codes for the 2 sidebars, so copy the rightcolumn and leftcolumn codes into your sidebar_right and sidebar_left pages as well as the corresponding css classes into your stylesheet.

Once that’s done, edit the css codes to fit with what you want:

#sidebar{
float: left;
width: 370px; /*Width of right column*/
margin-left: -400px; /*Set left margin to -(RightColumnWidth) */
background: #FFFFFF;
}

#leftcolumn{
float: left;
width: 185px; /*Width of left column in pixel*/
margin-left: -7px; /*Set margin to -(LeftColumnWidth + RightColumnWidth) 400*/
padding-left: 7px;
padding-top: 5px;
background: #FFFFFF;

}

#rightcolumn{
float: left;
width: 185px; /*Width of right column in pixels*/
margin-left: -7px; /*Set margin to -RightColumnWidth 200*/
background: #FBEAC5;
padding-left: 7px;
padding-top: 5px;
}

Earlier on, I’ve changed the width of my #maincontainer class to 960 pixels, which will be the total width of my theme. I’ve changed the sidebar width to 370px wide, and since I wanted both the left and right sidebar to be of equal size, I’ve set it to 185px each.

Take note that whenever you change the size of your sidebar, update the numbers in your contentcolumn class. The size should be the total size of your sidebar or slightly higher.

Play around with the background colors. If you’re not familiar with css, then check the html color code table.

Next, it’s time to widgetize your sidebars. Simply replace the non-div codes from your sidebars and add the following:

<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(’sidebar_right’) ) : ?>
<?php endif; ?>

Don’t forget to change the sidebar name ’sidebar_right’ so you can tell which sidebar is which in your widgets tab.

Next, add these to your functions.php

<?php
if ( function_exists(‘register_sidebar’) ) {
register_sidebar( array(‘name’ => ’sidebar_left’, ‘before_widget’ => ”, ‘after_widget’ => ”, ‘before_title’ => ‘<h2>’, ‘after_title’ => ‘</h2>’) );
register_sidebar( array(‘name’ => ’sidebar_right’, ‘before_widget’ => ”, ‘after_widget’ => ”, ‘before_title’ => ‘<h2>’, ‘after_title’ => ‘</h2>’) );
}
?>

The above are the codes required in order for widgets to work. Again, don’t forget to update the sidebar names to match what you’ve used.

Now you’ll need to link the different sidebars together under sidebar.php. As usual, remove any non-div codes in your sidebar.php and replace it with this:

<?php include (TEMPLATEPATH . ‘/sidebar_top.php’); ?>
<?php include (TEMPLATEPATH . ‘/sidebar_left.php’); ?>
<?php include (TEMPLATEPATH . ‘/sidebar_right.php’); ?>

What this does is call the 3 different files and open it within the file that contains the codes – your sidebar.

Now save and view your blog to make sure that everything is working correctly. If the sidebar appears to be stacking (the 2nd sidebar is under the 1st instead of 2 separate sidebars) try reducing the size of each sidebar (leftcolumn and rightcolumn) or increasing the size of the sidebar itself.

I recommend widgetizing your left and right sidebars, but hardcode the contents of the top sidebar by yourself if you know some html. This is where you should add your rss, opt-in box, sell ads and so on.

Comments and Search Form

Simply copy the codes from the default WordPress theme for both comments.php and search.php into your theme’s own.

One of the most time consuming part of using this copy-paste approach is looking for the corresponding css classes and copying them over. The comments and search usually have a rather long list of classes, but to make your life simple, just download this file and copy them into your style.css.

The theme is now halfway there and if you’ve managed to come this far, then give yourself a pat on the back. You’ve already created the structure of the theme itself. We’re pretty much done with the “creating” part, next it’s time to get creative and start to make it look like how we want it. It will be time to “dress” the theme up.