WP Theme Lesson #5d: Else, Post ID, Link Title
- Filed under: Tutorials
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.
[…] #4 Header Template #4b Header Template Continues #5 The Loop #5b The Content #5c Postmetadata #5d Else, Post ID, Link Title #5e Posts Nav Link #6 Sidebar (and Categories) #6b Page-Link Listing (wp_list_pages) #6cGet […]
A bit hard for me to understand the meaning of the title link…It is the same that the title, so why should it be important for Technorati. It has already the title no ? Thanks for these tutorials !
In the default theme (Kubrick), the title link description is:
“Permanent link to (the title)”
That’s fine. But when it shows up on Technorati, the only thing people get to read of the title is “Permanent link to…”
Imagine all ten posts with the same title.
Yes but here we are talking about title link description right ? So how could it appear on Technorati ? Sorry, I am a newbie and I have the “permanent link to…” on my blog and it was never a problem on Technorati….confused here !
I had the “Permanent link to…” for a while too and technorati showed only that, which means I’m assuming technorati scans title link description, not the title link itself.
You don’t have this problem?
Wrote a comment but got Spam maybe because I gave you a link to Technorati for my blog… Not sure if they changed anything but it seems to work for me…
Hello. First of all thank you very much for the tutorial. It is very easy to follow and you are putting a lot of effort into it.
I followed your tutorial up until the validation stage. But it seems I failed the validation and all the errors are showing this line:
“>
Do you think there might be something wrong with it? It is exactly what you wrote in the post. The error messages are:
1- character “
Sorry - the comment section did not allow the full post:
1- character “
Since there are two entries named at this stage, could you clarify which tag needs the ID addition?
Does “else” need a closing tag?
Also, because we already have a “php the title” in the post you describe, I was a little confused at first where the new bit was about to go. Could you use a screenshot that shows the full tag with both “php the title” tags?
Thanks, I’m enjoying your tutorial a lot and this is the first entry that had me confused about anything.
Whoops, sorry about the linking upstairs.
Where the link begins was supposed to be:” … that shows the full a href tag with both…” and so on.
Sorry again!
The else doesn’t need a closing tag. Endif closes all.
The second php the title goes in between the quotes of the a tag title attribute. Take a second look at Step 3.
The post ID goes in the first post DIV.
Thank you for writing this series, I have been following for a couple days now and everything has been going great. There must be something wrong now and I can’t figure out what is going on.
I have traced the problem to step 1 of tutorial 5d, I recieve this error: Parse error: syntax error, unexpected T_STRING in C:\xampplite\htdocs\wordpress\wp-content\themes\tutorial\index.php on line 52
After I add the code from step 1 (and format it as you do), that is when I receive the error. Any ideas, I am sure that I just typed the code incorrectly but I have gone back multiple times and received the same result.
Any ideas?
Thank you for your help and everything you do:)
Justin, make sure you type out everything. No copy and pasting. I’m just saying that because that’s the solution to most of the problems so far.
If it doesn’t work. Delete the new materials and retype. If you still need help. Let me know.
Thanks for the reply, I actually just realized I was missing a character. Amazing how after I kept staring at it I still was missing it.
Thank you very much for putting this info on the internet.
Justin
You’re welcome
hai man, how to make an archieve page have paging likes > to replace the > i limmit my archieve page by 5 entry. couse with the > model it’s doesn’t have enough info tnk for the answer
I’m having an issue on step 2 on this page. I have checked and recheck to make sure that I am writing the code down right but when I try to add “Add title=â€â€ to the post title link.” it adds the title to the source. But you can also see it when you the blog normally. Here is my source:
“>title=”"
If I remove the “>” before the title it gives me an error stating that a statement is not closed, and if I place that “>” tag before the closing tag of the link tag I lose all my formatting on the title, and I do not see title next to my entity post in source. What am I doing wrong? Thanks. This tutorial is really helping me understand how wordpress works, even though I could figure it out myself if I had the time.
Josh, I don’t understand your questions. The code you posted aren’t showing. Please post your question at the forum. You’ll be able to clearly post codes there. Thank you.
Hiya, I’d like to say thanks for this great tutorial! I’ve spent the past few days trying to find good resources to help me learn how to build a theme from scratch and yours is the only one I’ve come across that I’ve been able to follow.
Saying that, I’m having a bit of a problem on this part. Everything goes fine until I get to step 3. After I complete step 3, the post titles disappear on my page. When I view the source code, everything looks like it should and I’ve made sure to type everything myself. I’ve studied the code to insert in step 3 and it all looks like it should, but my eyes could be tired and missing something.
Here is what I have-
What do you think could be the problem?
Thanks in advance,
Christina
Well that code didn’t post. I’ve included my website address in this form, so maybe you could view the page and possibly see where I’m going wrong?
Thanks
I found out where I was going wrong with step 3. Instead of adding title=â€â€ in between the previous codes, I was replacing with the new code. I feel silly!
Anyway, I’ll shall continue on now!
Hi, I am trying to get past this chapter of the tutorial. I am having the same problem as Christina. After I finish step 3 I lose the title of my blogs on my page.
They do show up right in the source code, but I lose the title on the blog page.
I did not understand how christina fixed the problem.
Thanks
Jason, do step 3 within the link tag.
Correct me if i’m wrong;
the post title link example you gave has a tiny mistake.
It shouldn’t haver the ?php in front of the_permelink()
Fatal error:Call to undefined funtion the permelink() on line 34
It should be as below;
(codes didn’t display properly, removed)
but why?
shouldn’t all have ?php in front?
the_permalink() should have the ?php in front of it. Other wise, it wouldn’t be a php function.
you spelled it wrong. it’s the_permalink() not the_permelink()
oh,… thats the problem… couldn’t notice it at all. thanks
Hi
This tutorial is fab! However I’m stuck on one little thing and it’s bugging me! In Step you talk about adding an ID number to each post. I have added the code as you’ve shown and then refreshed and looked at the source but I can’t see where the ID of each post is - could you show a screen shot of what this would look like or where it would appear - thanks
Hey ya, great job indeed. I have encountered an issue, when I add the title=â€â€ at the end in step 3 and it becomes like this:
so when I refresh the page, I don’t see the post title anymore.
What could’ve gone wrong? by the way I use wordpress version 2.2
Oh, seems like your comments box executes php commands.
Anyway I read the comments on step 3 but still have the same problem
You need to place title=”" and everything in between within the opening A tag, not in between the opening and closing A tags.
I did exactly that. Take a look:
(comment’s edited)
Hamzeh - Please post this problem at the forums so you’ll be able to post your codes.
Dear Small Potato, I just did what you told me.
Thanks for your time and effort. I hope you can make a lot of millions
Thanks Hamzeh - I’ve answered your question at the forum.
[…] #4 Header Template #4b Header Template Continues #5 The Loop #5b The Content #5c Postmetadata #5d Else, Post ID, Link Title #5e Posts Nav Link #6 Sidebar (and Categories) #6b Page-Link Listing (wp_list_pages) #6c Get […]
the title= is creating quotation marks in my post titles so I am not sure why this is necessary?? It appears fine without it.
yup same problem… something about this is unclear or I’m really missing the obvious. Off to the forum…
Fabulous tutorial. I am absolutely loving it and learning a ton.
I see some other readers have become confused at the same spot where I did - entering the “title=”" information.
Your tutorial is so excellent, I think that were you to post a screen shot of the full line of code - from h2 to h2, rather than the partial screen shot you have at present, it would clarify the info for us newbies - and save you answering all the questions : )
Everything else I have read so far has been explained absolutely beautifully. You have done a wonderful job. I look forward to showing you what all your effort is enabling me to create.
Thank you again.
JP - That steps occur within the link tag. Therefore, the screenshot doesn’t need to be from h2 to h2.
I also have a problem with step 3.
I tried searching for hamzeh on the forums because he seems to have the same problem as me but I cannot see the image for the image verification. I clicked refresh but I can’t see anything. using firefox or flock.
I did the rest of the tutorial start to finish but I thought it was weird to have “title=” in front of every title so I came back to this page. fixed my problem and now I can’t see any title.
(code errors edited…)
tried to post the code above. if it works I misspelled “h2″ “href” and “php” on purpose
but other than that its exactly as I have it.
thanks
Pat
title=”" is within the a tag. there’s two the_title on the same line. one is in betwee the opening A and closing A. the other sits in between the quotes of title=”"
code will not show up properly in comments
OK… so you have to write php the_title in the link. and in the href.
see I only wrote it in the href and left the link (open and closed A tag) alone
awesome now everything works!
thanks potato
if your still revising this you may want to take another look at step 3. A longer screenshot that shows the whole line of code would probably work. there seemed to be lots of people who had a problem with that step.
but great tutorial anyway! that was the only place I was confused.
Pat
me again…
one more question but I’m not sure where to ask. since I’m using your tutorial as a base I thought to ask you first.
I want to use an image instead of text for my site title. so in header div I took out the “php blog_ info (name)” and just added in an img tag.
this doesn’t work. I even tried css, nothing. I know my wording is right because I made a small test html page and typed in the img tag and it worked. so I cut and paste the code for the tag and put it into the template code. nothing… I get a broken image icon.
Is it possible to put an img tag in a wordpress template?
if not what should I use?
any help is appreciated
pat
You probably used the wrong address for the image. Try using bloginfo(’template_directory’) and add /images/yourimage.jpg after that.
I hope you understood that because I can’t post actual codes in the comments.
For other questions, use the Wpdesigner support forums. I’ll be able to help you with codes there.
I joined the forum under the name bubs
I posted my problem and the post is uh… post 666
but yea i’m in there.
Hey small potato,
Thanks for the series and all the work you’ve put into it. Just one suggestion on this particular lesson.
In Step 2 you covered the_ID function. You instructed to include it with . Although I figured it out, it’s a little confusing because there are two DIVs using the post class (the actual posts and the error message that displays if there are none). Since in Step 1 you discussed the error message, I automatically assumed that I should include the_ID function with that DIV.
You may want to make that distinction for your readers. Thanks for sharing the knowledge!
Just clarifying the above comment:
In Step 2 you covered the_ID function. You instructed to include it with div class=”post”.
I think some confusion comes from the code being chopped off. This is the full line:
woops, my html got mangled above!~
[…] 翻译自：WP Theme Lesson #5d: Else, Post ID, Link Title […]
is my title on the preview page supposed to come out looking like this: title=”My Title Here”> It’s actually clickable, but I wasn’t sure if it was right…?
No, it’s not suppose to look like that.
i got it now! i was replacing the_title php that was already there instead of adding a new the_title php before it! There need to be two <?php the_title… lines. Duh!
Thanks for replying so quickly to my previous posts
this section requires me to re-read the explanations several time but i still survive as a newbie to coding.
I got confused about where to up the “the_ID” since the step about also has a div class=”post”. i read the comment section and figured it out but maybe you want to clarify that (it doesn’t go in the recently created post but the first instance of it) in the tuturial.
great series though!
Just wanted to echo what others have already posted here. Thanks so much for these tutorials. They’ve been a tremendous help.
When I type
all contents from the homepage disappears . Y ?
I can’t answer your question if I don’t know what you’re doing. You could be typing anything, anywhere, in any document, etc.
I am talking about this code. I split it now bcoz it disappeared when i typed in right format
div class=â€postâ€
h2 php _e(’Not Found’); /h2
div
this code is not working. I have removed brases and other stuff so it will get printed
Vinit - I think you’re going to have a lot of questions for me
Please bring all of your questions to the forums, where you can post the entire code.
I followed your tutorial and added the:
“title=”"
and now all of my text are h2 titles!
Why is this?!
Brad - Please follow the tutorial carefully. Go through the comments for help.
i have a question in the Title step you said to the include the title” between permalink and the php snippet that calls on the title. in the image in noticed you removed “> after the permalink snippet and moved it after the title snippet. if you use then add the text where you want to the link to be and close it with but while i was studying the codes i noticed that you moved the > at the end of the title snippet and you closed it instantly with without typing in where you want the link to show. is that right?
whoops. sorry for the link. i meant you used the < a = h r e f (i dont know if spaces will work here to show codes in comments) and you close it with but you type in the text where you want the link to be inside that right? but u didnt type anything inside. sorry if im confusing
oh okay. i got it from your comment #30
Small Potato:
You need to place title=— and everything in between within the opening A tag, not in between the opening and closing A tags.
yes!!! im still alive…. whenever i read a tutorial or watch videos i tend to fall asleep… but your tutorials makes me active rather than sleepy…
Im going crazy. please does anyone know why is ti pouting the question mark in my TITLE and ID ?
my test wordpress
Just another WordPress weblog
and
Thanks for the awesome tutorials. However Step 3 doesn’t make any sense. I’ve gone to the forums too look in there as well but cannot find an answer.
How do you do step 3?
Hi!
I was just wondering if you could add a sound clip to the 404 page. Like when they go to the page, the sound file automatically plays (a very small mp3). I thought it’d be funny for my site to have one.. I’m making a Stargate page & wanted the error to say “This page is protected by the Goa’uld! You may not enter!” and the recording play my Goa’uld voice “kel nok shree” which means “stop defiler!” lol.
Okie, thanks for your time.
Best Wishes,
~ Candy
don’t you mean <a href=”" title=”"> ?
[…] ????WP Theme Lesson #5d: Else, Post ID, Link Title […]