WP Theme Lesson #5d: Else, Post ID, Link Title

This lesson covers three extra options that you can add to each post. Else, post ID, and link title value. Although they’re optional, you can find all three of them within every one of my free themes because you never know what people will use your themes for.

First, don’t forget to start Xampp Control.

Step 1:
Type the following codes under <?php endwhile; ?>.
<?php else : ?>

<div class=”post”>
<h2><?php _e(’Not Found’); ?></h2>
</div>

Like this: (Notice the indents or tabs for organization.)

Save it, but you won’t notice any difference. We have to go back to lesson #5, The Loop, to explain what you just typed above.

Here is The Loop:
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>

<?php endwhile; ?>

<?php endif; ?>

First, if(have_posts()) checks to see if you have any post on your blog. Second, while(have_posts()) executes the_post() to call for your posts. The Else is what to do when you don’t have any post at all. Imagine while() and endwhile; nesting between if() and else :. That’s why <?php else : ?> has to come after <?php endwhile; ?>.

Now that you know what else is, what did you tell WordPress to do when you don’t have any post or when it can’t find any post? You told WordPress to display the error message Not Found. That message can be anything you want. You can download one of my themes. Take a look at its index.php file for an example.

In the example above, the Not Found message sits inside <?php _e(’ ‘); ?>. Like I told you yesterday, that’s not necessary.

The whole message and code of Not Found is surrounded by the <h2> and </h2> tags. That’s also not necessary. You can simply use:

<div class=”post”>
Not Found
</div>

But, using the <h2> (sub-heading) tag for the error message makes it more obvious to your visitor that there’s nothing on that page.

What are the <div class=”post”> and </div> for? Well, you don’t want your error message to get stranded in the middle of nowhere right? You wrapped each entry within the <div class=”post”> and </div> tags. So same thing, although the error message isn’t actual content, it is text just like the entries.

Step 2:
Add id=”post-<?php the_ID(); ?>” to <div class=”post”>

Save your notepad and refresh your browser. Now go to View > Page Source or Source. You’ll see that each post, now, has a number or post ID attached to it. the_ID() simply calls for the id of each post; that’s it.

Why use it? It’s for customizing the look of posts, individually. Later on, when you use the style.css file to tell your theme how the posts will look like, every post will look the same. With a unique ID attached to each post, you can target a single post and make it look different from the rest of the posts. Without the IDs, you have no way of differentiating the posts within the style.css file.

How can you assign both class and id to the same DIV or invisible box? DIV is a tag, class is an attribute. id is an attribute. Each tag can have multiple attributes just like each DIV can have both class and id. (Note: id is an xhtml attribute. the_ID() is a PHP function. They’re different.)

Step 3:
Add title=”<?php the_title(); ?>” to the post title link.

The screen-shot above is a partial screen-shot to point out where you should place the code. Save it and refresh your browser. Go to view source again. While viewing its source, look for any post title link. If the post title link is Hello World, then to the left of it should be title=”Hello World”.

title=”" is another xhtml attribute for the <a> (link) tag. Whatever’s within the quotes is the description of your link. In this case, the title of each post is also the link description. That’s why you used the PHP function the_title() again.

If you don’t use the_title() as a value for title=”", then every post title link will have the same description. For example, instead of the_title(), you use title=”Click me”, every post title link will have Click me as its description.

Now, go back to your web page. Place the cursor over a post title link, a description will pop up. That’s what you just added. Adding descriptions to your links is also useful when other sites have to scan your blog. Technorati.com for example, each time you publish, WordPress notify Technorati and other sites that your blog has been updated. Technorati then comes to your blog, scans it, and indexes a summary of your post, which includes the link title description.

Tomorrow’s lesson will cover the Next and Previous page links.

Follow this WordPress Theme Tutorial Series from the beginning.