How to Create Your first WordPress Theme: Part 2

Advertisment

This is the second part of the “How to Create Your first WordPress Theme” tutorial series. Just in case you have missed the first part, please go here and start reading.

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…