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 […]
[…] dari WP Theme Lesson #5d: Else, Post ID, Link Title oleh Small Potato diterjemahkan oleh Mochammad Kurniawan, mari kita teruskan terjemahan Tutorial […]
Hi,
Thanks for the tutorial. It’s awesome. After doing step three here, it seems to take the title of the post away. I have the code exactly how you have it above, and it’s still taking the titles off the post period. Any idea how to fix this?
Finally figured out step 3 thanks to Christina’s post # 21. I was trying to retype the code starting with the code in BLUE where what has to be done is INSERT the code in BLUE without deleting the rest of the line of code ( the last > ( not in BLUE ) shown in step 3 at the end of the image is NOT the end of the code, just the end of the INSERTION position. INSERT NOT DELETE is the key or was for me.
Smart Potato, great work.
Thanks.
I was getting the same error mentioned by Justin above:
Parse error: syntax error, unexpected T_STRING in C:\xampplite\htdocs\wordpress\wp-content\themes\tutorial\index.php on line 52
Sure enough, you really do need to type the code in yourself. I copied and pasted at first and couldn’t get it to work even though it looked exactly the same. However, when I viewed the pasted version and my typed version in notepad, the double quote and single quote characters looked different! When I replaced the pasted quote characters with typed characters, it worked great.
I’m loving these tutorials so far though. Thanks a million.
Hi! Can you help me…? I have problems with step1.
The browser shows me only this message:
“Parse error: syntax error, unexpected T_STRING in C:\xampp\htdocs\wordpress\wp-content\themes\tutorial\index.php on line 53 ”
The line 53 is:
Thank you
My line 53 is:
My line 53 is: (…) php _e(’Not Found’); ? (…I can’t write the missing code here…)
Ok… it works only if I write “Not Found”, without using: php_e
Why??
Again me.
I have another problem… with step3.
For example, the title of the post is: Hello Word . When I place the cursor over the post title link, it will pop up only: Hello . In other words, it will pop up only the first word of the title.
What is wrong??
????? ?? ??? 10?? !!
1. ????? ??? 20?30??? ??.
2.??? 20? ?? ???.
3.????? ?? 8? ??? ???.
4.??? TV? ??? ????.
5.??? ???? ????.
6.??? ??? ????.
7.’?? ??’? ???.
8.??, ???? ???.
9.????? ??? ?? ?? ???? ??? ??.
10.??? ?? ?? ??? ? 2?3?? ?? ? ????.
??:http://cafe.daum.net/lifebean
Why do ID numbers jump by 2 every time. I checked the source and found “post-1″, “post-3″, “post-5″. I’m sure it’s a stupid question, but am I doing something wrong?
Hi…
I try to work with your Tutorial (a great Tutorial) but i have a Problem!!
I have a Failure: Parse error: syntax error, unexpected T_STRING in /var/www/virtual/my_homepage.com/htdocs/blog/wp-content/themes/green_style/index.php on line 55
and hier is my Code from index.php
CODE
——————————————————————————
<a href=”“>
<div class=”post” id=”post-” >
————————————————————————–
Thanks!!!
Greetings, Trinity
My Line 55:
Was getting a T_STRING error on account of the slanted ’ in a copy-paste being different from the standard ‘ in typing, so yeah… writing it out should solve those kinds of problems.
when i type in the
everything goes blank after save and refresh, when i undo it everything comes back fine.
looked through the comments, dont really understand whats going on, should i skip this step?
It’s ok fixed it just took out the php _e thing and i was able to get on with it everything worked as it should
The
code screws up my template.
SP, your forums have been spammed beyond all recognition, so we really need our code-related questions answered here.
I was making great progress with your tutorial until I reaches this lesson. Unfortunately, you’ve created great confusion at this point, and you could easily solve it by providing a full screen shot of the code we’re supposed to see in index.php at the close of lesson 5d.
Instead, you stubbornly refer people to previous lessons, when they’ve already plowed through those lessons and absorbed the contents.
Lesson 5d is NOT clearly explained, so please show us index.php, as it should appear at this point.
Thank you, and I look forward to completing the tutorial.
anyone who is having problems with this part of the tutorial is obviously not following SP’s instructions TO THE LETTER!
Go through it slowly, checking and rechecking the code you have written. If you are getting error messages of any kind then recheck your code and try again.
Read what is written carefully and you should have no problems.
Giving the potato grief over this is pointless anyway. Hasn’t he already sold this blog on to someone else?
Heya guys …
just started today with these tutorials and just like a lot of you out there I had the same mysterious problem with the disappearing titles … And I had to read quite far through the comments until I finally got my problem in the same line you have to have written the title issue twice … it really would be of great help to simply post a longer screenshot so one can see the complete line … for some reason newbies - counting myself in, seem to feel intimidated by entering almost the same sytax twice in a row - you think this just cannot be correct …
BUT
THANKYOU so much for the great tutorial its just so much fun seriously!!!!
Hi everybody and specially you, SMALL POTATO,
Some people seem to have a problem with this code:
That’s because it has a mistake, there should be a space between “php” and “_e”. It should go like this:
It should work now!
PS: SMALL POTATO, tanks very much for the tutorial. So far it’s been very useful. Maybe you should fix that error so users don’t bomb you with comments
I found your tutorials so far easy to follow : D Thanks so much this is a really great tutorial. However on this themes lesson I was confused as to where to place the
id=”post-” \
and the
as you have two tags. Maybe specify what is before that tag!
(: Got it in the end though!
Thanks for the great tutorial, by far the best one I’ve found!
why do my links have these little diamond-question-marks wrapped around them?
http://localhost/wordpress/%EF%BF%BD%EF%BF%BDValenti%EF%BF%BD%EF%BF%BD
ugh … ok that didn’t show up. Well basically these little symbols with question marks show up without me having put them there …
ohh k nevermind i got it. *shifty eyes*
and thank you for this awesome tutorial! much appreciated =)
Ok, so I have followed pretty closely thus far. But I am a bit confused by something.
You have this: <a href=””>
in lesson 5, The Loop.
Then you have this: step 3:
Add title=”” to the post title link.
and your picture shows this: <a href=””title=””>
Is this two separate options that we can do? Or should we do one instead of the other?
Thanks much!!
Of course, it won’t let me post the code itself. Sorry.
In reference to the title, in the Loop post, you have the “the_title()” code after the closed brackets, and this you have it after the quote, before the closed bracket.
Is one more correct than the other? Will they both work? Should it be in the line twice? (the twice doesn’t make sense to me, but I am just learning . . )
Ok, so, disregard my two comments above! I figured it out in reading the other comments!
step 2 doesnt work. i test with a live site.
=(
I was working on lesson 5d. I am getting an error. Is it possible that the WordPress php Library changed?
I writing for WordPress 2.7
Here is the line that is flagged by the browser…
Thanks
Tim
Ps. So far your tutorial is really easy to follow.
Again I guess php code doesnt post…
_e(’Not Found’);
This line is giving me some issues…
Hi Small Potato,
Like many others have been mentioning thru out tis tutorial, I am a newbie and I find your tutorial extremely helpful. Its as though a teacher is thr by ur side to guide you step by step. Thankyou for the tutorials
I too faced the same problem that most people here have faced. Adding the title in step 3. But one fact I was happy about is that I figured the mistake myself before reading the comments posted here and determined to find the mistake by myself moved to the next line of the tutorial only after finding the mistake.
The confusion is because of the same code present in the same line before also.
It might look like a silly thing not to follow where the code is placed. But for beginners the excitement of doing s thing new leads to missing the exact position whr it was placed cos they r sure the code is already present s whr else in that line.
So instead of having have answered so many ppl it would hav been better if u could hav provided a complete screenshot of tht line. If everyone had figured out the mistake I would not have posted the comment. But later on others might also com up with the same issue and post the comment again not even having a look at the prev comments. So I kindly ask you to provide the full screenshot of that line instead of a partial scrrenshot
That was just my suggestion, its been a great job from ur side… Ur efforts r well noted n appreciated
Its with real gratitude tht I look at ur tutorials. Hats off to U 
U make a wonderful teacher