Recently, I’ve started working on my portfolio WordPress theme, and I needed to define different information for each project/template, like price, colors, style, etc. For this thing, I needed to create three more taxonomies which are looking like this:

Creating a new taxonomy

This is as simple as it is to look at the picture above. All you have to do is to copy the code below, in your functions.php. If your theme doesn’t have one, which I don’t think it hasn’t already one, just create the file yourself. Now, this is the code you have to write for each taxonomy you are creating:

<?php

register_taxonomy('test', 'post', array(
'hierarchical' => false,  'label' => 'test',
'query_var' => true, 'rewrite' => true));

?>

Just replace “test” with the name of the taxonomy you wish to create. That’s how you create custom taxonomies. The’ll just appear in the Dashboard below the Post Tags.

Using the new taxonomies

We have created them, but as well as tags and categories, you need some code if you want to output them in your article. That’s a little code snippet that goes into your WordPress loop, just like the post tags and categories:

<?php echo get_the_term_list($post->ID, 'people', 'People: ', ', ', ''); ?>

See it yourself

Below are some examples of what we were talking about in this tutorial:

• PopCritics.com is using custom taxonomies to output different details about the movies. See the Genre(s), Actor(s), etc…
• TypeChart.com is another great example of WordPress site that is making good use of taxonomies for finding font styling. You can see that in the sidebar.
• Soh Tanaka‘s portfolio is also using taxonomies to output details on projects. Observe the Client, Date, URL, Tasks, etc…

I hope you have understood what taxonomies are. I’m sure you have heard about them before, but never wondered what they are, but what about using them for creating a nice t-shirt store?

Using Custom Taxonomies to create a T-shirt store

Now that you have learned how to use custom taxonomies, we will use them for creating a T-shirt store. This won’t be a fully functional one, we will just build up the part that is using custom taxonomies.

1. Preparations

First of all we need a theme. We will use the new WordPress 3.0 default theme, called Twenty Ten. In order to get this theme and have it properly working, you need to download WordPredd 3.0 RC2. To get this version, scroll down to the bottom of the page, and the last one should be WP 3.0 RC2. Do not be worried working with WP 3.0, it has the same template tags.

Next, you will need a local server, so the best way to create it, is using WAMP, or just build up your own environment following this previous tutorial on 1stWebDesigner.

Now that you have your local server up and running, just install WordPress.

2. Editing the Twenty Ten theme

Now we need to create our custom taxonomies. First of all, think about what custom taxonomies you will need. For a T-shirt store we need to provide:

• size details
• price
• brand

So, just open up the Twenty Ten functions.php file and create those custom taxonomies. I suggest to write the code at the end of the file for avoiding to break the default functions that the theme has. You can see the code that you will need and as It is, without any PHP tags:

// Custom taxonomy for Size
register_taxonomy('Size', 'post',  array(
'hierarchical' => false, 'label' => 'Size',
'query_var' =>  true, 'rewrite' => true));

// Custom taxonomy for Price
register_taxonomy('Price', 'post',  array(
'hierarchical' => false, 'label' => 'Price',
'query_var'  => true, 'rewrite' => true));

// Custom taxonomy for Brand
register_taxonomy('Brand', 'post',  array(
'hierarchical' => false, 'label' => 'Brand',
'query_var'  => true, 'rewrite' => true));

After creating the custom taxonomies, we need to modify the loop too. So this will be a little difficult, because you need to take care to not break any of the theme’s code. Don’t worry, I’ll guide you through this.

Modifying the loop. Open up the index.php file from the 2010 theme. After you have opened it, you will see a tag that is calling the loop.php file:

<?php
 /* Run the loop to output the posts.
 * If you want to  overload this in a child theme then include a file
 * called  loop-index.php and that will be used instead.
 */
 get_template_part( 'loop', 'index' );
 ?>

We will need to completely delete this, and create a  our own loop. So, instead loop tag, copy and paste this following code:

<?php if (have_posts()) : while (have_posts()) : the_post();  ?>
<div id="post-<?<span class=">
<pre><?php the_ID(); ?>" ></pre>
</div>
 <h1><a href="<?php the_permalink(); ?>"></a>
<div>
 <!--Insert custom field and custom taxonomies code here-->
<pre><?php wp_link_pages( array( 'before' =>  '</pre>
<div>' . __( 'Pages:', 'twentyten' ), 'after' =>  '</div>
' ) ); ?>
 </div><!-- .entry-content  -->
</div>
<pre><?php endwhile; else: ?></pre>
<div id="post-<?<span class=">
<pre><?php the_ID(); ?>" ></pre>
</div>
 <h1  class="entry-title">Nothing here...</h1>
<div  class="entry-content">
Sorry, no T-shirts avaiable for  sale. Try coming back later.
 </div><!--  .entry-content -->
</div>
<?php endif; ?>

This is the loop that we will use. The ID and class are some theme specific styles. You have to notice that I have removed the meta data. Now, we will need to add the codes that will retrieve our custom taxonomies and we will need to make use of custom fields too, to retrieve t-shirt thumbnail. Add them exactly where you see the HTML comment in the above code. Now, here’s the code that we need:

<img src="ID, 'post-icon', true);  ?>" alt="Icon for Post #"  />
<ul>
<li><?php echo get_the_term_list($post->ID,  'Size', 'Size: ', ', ', ''); ?></li>
<li><?php echo  get_the_term_list($post->ID, 'Price', 'Price: ', ', ', '');  ?></li>
<li><?php echo get_the_term_list($post->ID,  'Brand', 'Brand: ', ', ', ''); ?></li>
</ul>

<?php the_content(); ?>

Notice that the custom field name is “thumb”. For using this custom field you need to create a new one with the name thumb, and the value of it is the link to your thumb. Now that we have everything set, what about trying to publish a sample post. Take a look at mine:

Conclusion

So, you have learned how to use custom taxonomies, and you have created a little T-shirt store. Well, not a fully functional one, but it’s a good start :)

If you have any questions regarding this tutorial please do not hesitate to ask via comments. I’ll try to solve all your problems. Thank you!

You can Download source files of this tutorial or Live preview this theme.

As I promised in the first part of this tutorial, we will do some stuff that will make your blog theme more interesting and useful. I’m re-writing the list with what we will cover in this part:

• Widgetizing your sidebar
• Making a working search form
• Using the single page template: comments, author details
• Using custom fields for showing an image for each article

1. Widgetizing the Sidebar

Having a widget-ready theme is the most important thing of a blog theme. It doesn’t matter for the reader but it helps you a lot. How a widget-ready theme is helping you? Well, imagine that you want a lot of things to be displayed in the sidebar. Think that you will have some lists like friends, archive, categories, tag cloud, advertising area, etc. It would be easy to write markup in the sidebar.php file, but it would be more easy letting WordPress for handling this. Having a widget-ready theme is a big advantage because you can add text, lists and advertising area within WordPress admin panel.

But enough with talking, let’s get started! Open your sidebar.php file that you have coded in the first part of this tutorial. Now, we’ll have to decide what pieces of code will stay even if the widgets are turned on. Widgetizing the sidebar makes a condition like: if widgets are available, show widgets and chosen sidebar markup, else, show original sidebar markup. Below are the widget tags, without any code in them:

<!--Code that will stay even if the widgets are used-->
<?php  /*  Widgetized sidebar, if you have the plugin installed. */
 if (  !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) :  ?>
<!--Code to be replaced by WordPress-->
<?php endif; ?>

Maybe this clears everything for you. The comments are very explanatory, so now we just need to use it with our sidebar markup. So, you should decide what code will remain even if the widgets are used. Normally, the search box have to always be there. Of course you can let WordPress add it but this will stop you from any additional customization to the search form elements:

<div id="navigation">
<p><strong>Navigation  Here</strong></p>
<ul>
<li><a href="<?php  bloginfo('url'); ?>">Home</a></li>
<?php  wp_list_pages('title_li='); ?>
</ul>
</div>
<div  id="extra">
<form id="searchform" method="get" action="<?php  bloginfo('home'); ?>">
<input type="text" name="s" id="s" size="15"  /><br />
<input type="submit" value="<?php  esc_attr_e('Search'); ?>" />
</form>
<?php  /* Widgetized  sidebar, if you have the plugin installed. */
 if (  !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) :  ?>
<p><strong>Categories</strong></p>
<ul>
<?php  wp_list_categories('title_li='); ?>
</ul>
<?php endif;  ?>
</div>

I’ll stop here for a moment. I added a search form, which has WordPress specific values. If you remove them, the search form won’t work:

<form id="searchform" method="get" action="<?php bloginfo('home');  ?>">
<input type="text" name="s" id="s" size="15" /><br  />
<input type="submit" value="<?php esc_attr_e('Search'); ?>"  />
</form>

The code I have been showing you previously, is the markup of the sidebar.php file, along with the widget tags. The condition for what I’ve written there, is the following: if there aren’t any widgets in use, show the categories, else, show the widgets you are activating.

We aren’t ready yet. This code won’t work if we do not add some functions. Normally, for not modifying the WordPress core files, we add new functions to the functions.php file that you will have to create. For creating the function for the widgets, add the following code to your new functions.php file:

<?php

if ( function_exists('register_sidebar')  )
 register_sidebar(array(
 'before_widget' => '',
 'after_widget'  => '',
 'before_title' =>  '<p><strong>',
 'after_title' =>  '</strong></p>',
 ));

?>

You need some explanation, right? Well, between the apostrophes you need to write your needed markup. Before and after widget could be used div tags, of course if your template needs them. For our current layout, we won’t add anything. The same thing happens for the title of each widget (e.g. Categories) which are wrapped by the paragraph and strong tags. You got it? Hope you did. This is everything you need to know about widgetizing the sidebar.

2. Adding a “Read more” link

Creating a Read more link is used for the blogs who do not want to show all the content of their articles on the front page. There are many ways we can achieve something like this:

2.1 The WordPress “more” tag

The more tag is activated by a little button when adding a new post from the WordPress admin panel. You can press ALT+Shift+T or click the following button:

If you do not know how to use it, I’ll explain you how to. Let’s say you have 2 paragraphs of text, but you want to show on the frontpage only the first paragraph. Click after the first paragraph and then click the shown button. You will see a dotted line with a little tag where it says “more”. All the content before this line will be shown.

But there is something else. You need to modify the content tag from the index.php file. As the source files from the first part do not have any parameter set to the tag, you will need to add it. Copy and paste the following code instead of the standard content tag:

<?php the_content(__('Read more...')); ?>

Do not remove the paragrpah tags. Just the content tag needs to be modified. Now in each article where you place the more tag from the WordPress will show a “Read more” link. Go and try it!

2.2 Using the excerpt

Another way to achieve this is by using the excerpt. This works a bit diffrent. When publishing a new article in WordPress, you will see a box where it says “Excerpt” If you still have the content more tag used, the excerpt will automatically use the content before the dotted line. If you won’t use it from the WordPress Editing screen, it will remain empty.

If so, you will be able to write something different, like a short introduction or description. Let’s say you have some content in the article, and just write in the excerpt a random description.

If you publish the text, you will notice that you will get the whole content on the respective article. For getting the text you have written in the Excerpt box, you will need to modify the index.php loop. So instead of:

<?php the_content(__('Read more...')); ?>

You will need to add the excerpt tag which is the following:

<?php the_excerpt(); ?>

Now, take a look and see the difference.

2.3 Using a limitation plugin

Using such a plugin sometimes is easier for you. What this plugin does? Well, depending on each plugin, it can limit your content to word number, letter number or just show the first paragraph of the article. You can see a list of 3 such of plugins:

• Content and Excerpt Word Limit
• WP Limit Posts Automatically
• A tutorial about limiting the content

Now, you just need to decide which one is best for you.

3. Comments-template: using comments in WordPress

When It comes to develop a new WordPress theme, the part I hate the most is working on the comments. It’s not because it’s hard, it’s because I need to make a lot of stylings to achieve a nice comment area. I won’t get into styling because it relies on your creativity and CSS skill. I will only show you how to use the comments in a theme and what the used tags are doing. I suggest learning some basics of PHP before editing the comments.php file, because you’ll need some basic knowledge about PHP to code your own comments. For now, I’ll just show you how to use them. So let’s get started by opening the comments.php file from the WordPress Classic theme which is located in the wp-content/themes/classic directory.

Now, save the comments.php file in your layout07 directory. Ok, you won’t understand much things in this file if you don’t have some basic PHP knowledge. For now leave the file intact and open the single.php file and add after the content tag the following tag:

<?php comments_template(); ?>

This will enable the comments in your theme. You will see a heading saying “No Comments” and below, a form with a heading saying “Leave a comment”. You can either leave a comment as a guest, or just sign in to WordPress and leave a comment as an admin (or user). Now, the most important tags you need to know when editing the comments.php file are the following:

<?php comment_author_link() ?> <!-- The author of the comment  -->
<?php echo get_avatar( $comment, 32 ); ?> <!-- The  commenter's avatar (or Gravatar) -->
<?php comment_text() ?> <!--  The commenter's comment text -->
<?php comment_date() ?> <!-- The  date when the comment have been posted -->
<?php comment_time() ?>  <!-- The time when the comment have been posted -->
<?php  edit_comment_link(__("Edit This"), ' |'); ?> <!-- The edit link for the  comment (if you want to edit something in your comment) -->

Now, constructing a new comment structure is very easy, but you need to pay attention for not breaking the PHP code. The default structure of the comment is the following:

<?php if ( have_comments() ) : ?>
<ol id="commentlist">

<?php foreach ($comments as $comment) : ?>
 <li <?php  comment_class(); ?> id="comment-<?php comment_ID() ?>">
 <?php  echo get_avatar( $comment, 32 ); ?>
 <?php comment_text()  ?>
 <p><cite><?php comment_type(_x('Comment', 'noun'),  __('Trackback'), __('Pingback')); ?> <?php _e('by'); ?> <?php  comment_author_link() ?> — <?php comment_date() ?> @ <a  href="#comment-<?php comment_ID() ?>"><?php comment_time()  ?></a></cite> <?php edit_comment_link(__("Edit This"), ' |');  ?></p>
 </li>

<?php endforeach; ?>

</ol>

<?php else : // If there are no comments yet ?>
 <p><?php  _e('No comments yet.'); ?></p>
<?php endif; ?>

So now, let me explain. Starting from the first line: If there are comments left to your article, your comments will be shown with the giveen structure within foreach PHP function, else (if no comments are posted) show a text with “No comments yet.”. For changing the look of your comments, you need to work just inside the foreach function. I’ll show you how to change the look of your comments, very easily.

Delete the <ol> tags and everything inside the foreach function. You’ll just be left with something like this:

<?php if ( have_comments() ) : ?>

<?php foreach ($comments as $comment) : ?>

<?php endforeach; ?>

<?php else : // If there are no comments yet ?>
 <p><?php  _e('No comments yet.'); ?></p>
<?php endif; ?>

Next, wrap the foreach function with a div id “comments”, like the default structure were wrapped by <ol> tags. Now, add the following code withing the foreach function:

<div id="comments">
<p><strong><?php  comment_author_link() ?> said this on <?php comment_date() ?> at  <?php comment_time() ?> <?php edit_comment_link(__("Edit This"), ' |');  ?></strong></p>
<p><?php comment_text()  ?></p>
</div>

Just take a look on how the comments are displayed now. I have removed some tags because you won’t need them as a beginner WordPress theme developer. I added div’s instead lists because it’s more clean. The class and the id were assigned for further customization via CSS. Now, if you have made the changes as I told you, you should edn up with something like this:

<?php if ( have_comments() ) : ?>

<div id="comments">

<?php foreach ($comments as $comment) : ?>

<div class="comment">
<p><strong><?php  comment_author_link() ?> said this on <?php comment_date() ?> at  <?php comment_time() ?> <?php edit_comment_link(__("Edit This"), ' |');  ?></strong></p>
<p><?php comment_text()  ?></p>
</div>

<?php endforeach; ?>

</div>

<?php else : // If there are no comments yet ?>
 <p><?php  _e('No comments yet.'); ?></p>
<?php endif; ?>

For finding more information about manipulating the comments.php files go to the WordPress Codex and start looking for what you need. All that I’ve covered here is just basic stuff. Hope you’ve understood everything of what I’ve told you!

4. Using custom fields for showing an image for each article

Custom fields are one of the most important feature of WordPress. If you master the custom fields, you can create stunning WordPress functionalities like displaying an image for each article (like what I’ll be teaching you), displaying a certain message or link to your visitors (like a live preview and a demo button or even a source link for your article).

Where can you find the custom field box? The cutom fields box is located under the Send Trackbacks box, in the Post > Add post in the admin panel:

Using the custom fields isn’t so hard. You just have to learn the tag that calls a specified custom filed name. The tag is the following:

<?php echo get_post_meta($post-&gt;ID, 'custom field name', true);  ?>

If you would write “image” instead of “custom field name”, WordPress will create a custom field with the name “image”, so any value you will give to the custom field, WordPress will output the value in the place where you have written your custom field tag. Not too clear for you? Let’s apply the custom field tag to create a nice thumbnail for each post! We will use an image tag which uses as source a link introduced by the custom field:

<img src="<?php echo get_post_meta($post-&gt;ID, 'image', true); ?>"  alt="<?php the_title(); ?>" />

This tag will be posted above the content tag inside the index.php and the single.php files. Now go and create a new custom field with the name “image” and add to the value a link to an image. You can see how I’ve done this in the following pic:

Just in case that you won’t attach a thumbnail to your post, the article will show you an image missing. So you may add a thumbnail to each article you are writing. This is everything you need to do!

5. Author details: single page template and profile

WordPress have some predefined functions to output the current author details. This can be useful if you want to show some details about you or other authors in the single page templates. WordPress is also creating a profile page for any author where you can show the author details: description and posts.

This may sound difficult, but it’s very easy, just like all other things in WordPress. You only need a tag or two (if you want the author name displayed too) to show up your auhor details on single page template (and also others). Place the following tags at the start or at the ending of the article loop (in the single.php file):

<p><strong><?php the_author_posts_link();  ?></strong></p>
<p><?php the_author_description();  ?></p>

The first line is for outputing the author’ posts page link and the second is for outputing the description of the author (entered from Biographical Info from the profile within WordPress admin panel). You can wrap these codes by a div id “author” so you can style it if you want. So the loop would look like the following:

<?php if (have_posts()) : while (have_posts()) : the_post();  ?>
<p><strong><a href="<?php the_permalink();  ?>"><?php the_title();  ?></a></strong></p>
<p>Published on <?php  the_time('m d Y'); ?> by <?php the_author(); ?></p>
<img  src="<?php echo get_post_meta($post->ID, 'image', true); ?>"  alt="<?php the_title(); ?>" />
<p><?php the_content();  ?></p>
<div id="author">
<p><strong><?php  the_author_posts_link(); ?></strong></p>
<p><?php  the_author_description(); ?></p>
</div>
<?php  comments_template(); // Get wp-comments.php template ?>
<?php endwhile;  else: ?>
<p><?php _e('Sorry, no posts matched your criteria.');  ?></p>
<?php endif; ?>

Now, for creating the author profile page, you need to open the page.php file then save it as author.php. Now, delete the actual loop and everything within the content div and paste the following code:

<p><strong><?php the_author_posts_link();  ?></strong></p>
<p><?php the_author_description();  ?></p>
<ul>
<?php if (have_posts()) : while  (have_posts()) : the_post(); ?>
<li><p><strong><?php  the_title(); ?></strong></p><p>Published on <?php  the_time('m d Y'); ?></li>
<?php endwhile; else:  ?>
<p><?php _e('Sorry, no posts matched your criteria.');  ?></p>
<?php endif; ?>
<ul>

As you see, the author details are outside the loop. Then, we would like to display the posts that the current author have written so far. We are creating the loop, but this time we will show just the article title and the date when it was published. That’s it now. Save your file and go to test it!

That’s it!

Well, people, these are all the things I’ve wanted to cover as basics. Just leave comments requesting other things, and probably I will cover them in upcoming tutorials. Have fun with creating WordPress, and if i’ve helped someone to develop a nice theme, let me know! More to come on 1STWD…

What we need

WAMP/XAMPP Server (or similar software) - Download

WordPress 2.9.2 (latest version, recommended) – Download

Getting started – creating the working environment

First thing first, you need to install WAMP Server. After installing WAMP, download and copy the WordPress files in the www directory from your WAMP folder. Start WAMP Server, click on the icon in the task bar, and a pop-up list show appear, then select phpMyAdmin.

Now, create a new database. Give it any name, but you need to keep it in mind as we need it at the WP installation. As for now, we are done with WAMP Server, just leave it running.

WordPress Installation

After copying all the files, you need to install WordPress. Enter on the address where you have put the WP files. The address would be exactly, without any www or http, localhost or localhost/WordPress. After accessing the address, the installation may start.

Click “Create a Configuration File”. After this, you will see some listing of things you need to know. I’ll just tell you what you need:

1. Database name: your given name of the database we’ve created earlier
2. Database username: this should be “root” if you set it on your computer.
3. Database password: there is no password set.
4. Database host: localhost
5. Table prefix: for now, leave it as it is.

Now, just fill in the fields with the required information, and go further! After filling up the fields, next give any name to your blog, and write your e-mail address.

Now, copy the auto generated password, and paste it in the password field at the site login. Now, because you cannot keep that weird password in mind, go the upper right corner of the site and click on “admin”. You should see a page where you have your account info. You can modify anything there, but for now we are setting a new and easier password.

Go to the bottom where it says “New password” and set your new password.

Good, now you have WP installed, but we have a lot more things to do.

1. Planning the theme layout

When I’m starting a new project on developing a WordPress theme, as everyone should do, I first build my HTML/CSS template. This is easier because you also learn how to convert a simple HTML template into a fully functional WordPress theme. So i won’t go through building the template, considering you already know how to build your own. I’ll just use a simple layout from Free-CSS.com in this tutorial. Go here and download the #7 template.

2. Starting the conversion

When I’m making a theme, I’m always copying code snippets from a default WordPress theme (because i cannot remember all of them). I use the WordPress Classic theme, but you can also use a cheat sheet. The best one i’ve found is the one created by Ekinertac. After it opens in the PDF format, save it in your computer (you may need it when you do not have access to the internet).

All the contents from the sheet are the most used functions from WordPress, and the ones that you need to create a basic WP theme.

A thing that you have to notice is that WordPress is using PHP. Even if you aren’t a PHP master, or you have absolutely no idea what PHP is, you are still able to create a basic theme. When creating a theme, you need to know just tags and what they are doing, so do not worry about PHP.

2.1 Making the theme recognizable by WordPress

A very important part of a WordPress theme is the CSS file. In the CSS file are written some lines that WordPress is using to g a theme. First, you need to rename the styles.css to style.css as WordPress is search for style not styles. Copy and paste these lines at the start of your CSS file:

/*
Theme Name: Free-CSS template WP version
Theme URI: <a href="http://free-css.com/">http://free-css.com</a>
Description: A very basic  WP theme based on a simple CSS layout from Free-CSS.com
Version: 1
Author:  >your name<
Author URI: >your site url<
Tags: free, css,  tutorial, simple, basic
*/

You can change everything that is located after the “:” dots. Save your CSS file as we won’t need it because we are just trying to give to the HTML template functionality.

2.2 Converting the HTML file

After you set up your CSS file, we need to go and change some things in the index.html file. First of all, clear all the sample text.
Save you file as index.php. We do not need the sample text anymore as we will introduce our own text from WordPress later.

Now, we need to make some declarations for the WP theme. We need to make the title dynamic and to set the stylesheet path. These lines will help you:

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type');  ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php wp_title('&laquo;', true,  'right'); ?> <?php bloginfo('name'); ?></title>
<style type="text/css" media="screen">@import url(  <?php bloginfo('stylesheet_url'); ?> );</style>

Now, we will start with the header of the design. For adding your blog’s name with a link to your homepage in the header, we will use this line of code:

<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>

The first PHP tag is used for retrieving the blog’s homepage link and the second is for the blog’s name (the one you set in the installation).

Now we’re going further for the loop. The loop is a block of code that will repeat for each post from WordPress. We will use the loop to construct the article. I’ll cover more about the loop in the second part, where we will use it for other things too.

Now, all your code is wrapper by some loop specific tags. Here they are:

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

<!--Code to be repeated here-->

<?php endwhile; else: ?>
<?php endif; ?>

Next, we will start constructing the article structure. We will need a title, some info about the dat when the article was published and it’s author.

The following line makes the article title:

<p><strong><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></strong></p>

The first PHP tag is for the article’s link and the second is for the article title. These tags are kinda self-explanatory. We’re moving further for the meta data (date, author). Copy and paste the following code under the article title code:

<p>Published on <?php the_time('F d, y'); ?> by <?php the_author(); ?> in <?php the_category(','); ?></p>

First tag is for retrieving the date. The date tag have some parameters. These parameters are setting the date format (month, day, year). You can add characters like “-” or “.” or making something like “Month 02 Day 15 Year 1990″, it’s up to you! The second one, is for echoing the author of the post and the third, is for category or categories that the post is filed under.

Now, we will be placing the content tag. The content tag will output everything you write in a WordPress post:

<?php the_content(); ?>

The tag doesn’t need paragraphs because WordPress auto generates them for you. We’re finished with the loop. You can see the code pieces at the party:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
 <p><strong><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></strong></p>
 <p>Published on <?php the_time('m d Y'); ?> by <?php the_author(); ?></p>
 <p><?php the_content(); ?></p>
 <?php endwhile; else: ?>
 <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
 <?php endif; ?>

Next, we will be going to code the sidebar.

We will start with the navigation. As you see in the CSS layout, the navigation is located in the sidebar. It doesn’t matter because the technique is the same. For creating a basic navigation you need these lines of code, which will placed between the <strong>ul </strong>tags:

<li><a href="<?php bloginfo('url'); ?>">Home</a></li>
<?php wp_list_pages('title_li='); ?>

You already know what the first PHP tag does. The second one, is listing the pages that WordPress generates. The parameter is for list title. Try removing it and see what’s happening.

This is all you need to do for getting a nice working navigation menu. Now, we will create the categories list. All the blogs have categories and we don’t want our theme to lack categories. We will just add this code between the div #extra tags:

<p><strong>Categories</strong></p>
<ul>
 <?php wp_list_categories('title_li='); ?>
</ul>

There is another listing tag but this one is listing the blog’s categories. I’ll cover more things relating the sidebar in part 2, where i will teach you how to make a theme widget-ready. That means you will introduce new blocks inside of WordPress, without coding anything.

But what about the footer? Shouldn’t it have some text in it? Well, we will write the copyright:

<p>Copyright &copy; 2010 <a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>. All rights reserved.</p>

As you see, we have introduced some tags, just like in the header, to output the blog’s title.

The theme is functional, but we will need to make some page templates for single post (where the comments will appear) and the page (where you could write some info about your blog). If you use the same code for the header footer and sidebar, your template would get messy. Let’s say that you want to add one more thing to your sidebar. You will have to modify 3 times for each page template. Well, for avoiding this, we will chop the markup.

For each section of the index.php file we will have a separate file. So we will have header.php, footer.php and sidebar.php. Now, we will be starting to chop!

Copy and then replace the following lines:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>
<style type="text/css" media="screen">
@import url( <?php bloginfo('stylesheet_url'); ?> );
</style>
</head>
<body>
<div id="container">
<div id="header"><h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>
</h1></div>

With the following line:

<?php get_header(); ?>

Your copied code needs to be placed in the header.php file. The same thing we will do with the footer and sidebar

Copy the following:

<div id="navigation">
<p><strong>Navigation Here</strong></p>
<ul>
 <li><a href="<?php bloginfo('url'); ?>">Home</a></li>
<?php wp_list_pages('title_li='); ?>
</ul>
</div>
<div id="extra">
<p><strong>Categories</strong></p>
<ul>
 <?php wp_list_categories('title_li='); ?>
</ul>
</div>

Paste them to sidebar.php then in the index.php file replace it with:

<?php get_sidebar(); ?>

Now, do the same thing with the footer. Copy the footer div and it’s contents, paste it in footer.php file, and then remove it in index.php with:

<?php get_footer(); ?>

You should have something like this:

<?php get_header(); ?>
 <div id="wrapper">
 <div id="content">
 <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
 <p><strong><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></strong></p>
 <p>Published on <?php the_time('m d Y'); ?> by <?php the_author(); ?></p>
 <p><?php the_content(); ?></p>
 <?php endwhile; else: ?>
 <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
 <?php endif; ?>
 </div>
 </div>
 <?php get_sidebar(); ?>
 <?php get_footer(); ?>
</div>
</body>
</html>

Now you’re done with chopping the markup. We are going to create the page templates. We will create firstly the single template. Just save your index.php file as single.php. We won’t modify anything in this page yet. We will do it in part 2 where I will learn you how to create a comment form and how to list comments and other things like custom fields.

Now, for the static page, page template, delete the line where you have placed the meta data (the line with date, author and category tags). Then save the file as page.php. Being a page, we won’t need any info about the creation date or the author. We won’t even use comments on page because there is no point in it.

The last move we need to do is to print screen our template and save it in a canvas of 300 x 225 px and save it as screenshot.png in the root directory of your theme. This will be used in WordPress theme menu.

Well, we’re done with the first part. Go ahead and test your theme. If there is something you want to ask, do it via comments. Don’t forget that you can download the source files too.

To be continued

There are a lot of things to cover about WordPress. Making a theme isn’t so difficult, you just need to be patient. There are a lot of things that are needed to make a fully functional WordPress theme. That’s why, this tutorial will have a Part 2. Maybe there will be more parts, but i will let you know what I will be covering in the next part:

• Widgetizing the sidebar
• Using the single page template: comments, custom fields, author details
• Using custom fields for showing an image for each article
• Making a nice and working search form

Stay Tuned.