Home News and Updates WP Theme Lesson #5d: Else, Post ID, Link Title

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

Author

Date

Updated on

Category

This lesson covers three extra options that you can add to each post. Elsepost 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.)

php else statement

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”>

post-id

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-title1

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.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Recent posts

10 Ways To Speed Up Post-Building Process With WordPress Gutenberg Themes

There’s no need to explain why I decided to start with Gutenberg-supporting products. All in all, Gutenberg is a well-known and long-awaited product. It is more...

HostPapa Linux Hosting: Reliable, robust and fast

As a small business owner, it can be challenging to find the right hosting provider for your website. HostPapa distinguishes itself from other web...

Are You Making These Costly Mistakes When Outsourcing?

In today’s world, it is almost impossible to find a small business where everything about the business process is done in-house. For most small...

Flat Design for Your WordPress Site: What Is It + 4 WordPress Flat Design Themes

Web designers in the past mostly used 3D styles for buttons that made the button seem more realistic. That all changed when flat design...

LawBlog WP Theme Review

Regardless of which area of law you practice, it’s imperative that you have proper online representation. You need to give your customers a feeling...

Recent comments