The WordPress Theme Single Post, Post Attachment, & 404 Templates

You’ve built an index of all your posts, now you need to create a template to frame each piece of content (or missing content) on it’s own. The structure of single.php (and almost all the other templates we’ll be creating) is largely the same as index.php. In fact you can think of it as our template-template.

But there are going to be some notable differences. Starting with the_post() and comments_template().

We’ll be calling the_post() near the top of our page just after the opening of the content div and just before the navigation. We won’t need a loop in this template as WordPress knows just what post we’re looking at thanks to the_permalink().

And since this is a single post, we’ll need the comments_template(). And because we’ll be separating our comments and trackbacks when we come to coding up comments.php, we need to call it just like so:

<?php comments_template('', true); ?>

comments_template() will need to go just before the close of the #content div right after the navigation.

Single Post Navigation

Instead of using the poorly named next_posts_link() and previous_posts_link() we’ll be using the mostly accurately named previous_post_link() and next_post_link(). They do just what you think they do.

Single Post Titles

If you remember from our header.php lesson, we used a dynamic IF statement to clear the way for our Single post titles to take precedence on the page in the eyes of screen readers. We take advantage of this in this and all the rest of our Theme Templates by wrapping the title in and h1 tag.

<h1 class="entry-title"><?php the_title(); ?></h1>

You’ll notice that our post title code is a little simpler too. The benefit of not having to link to anything now.

Single Post Entry Utility Links

The entry utility is … complicated. Here I think you’ll see the benefit of getting something right once and standing on the shoulders of others.

Before we take a look at the code we should think about why it is complicated. Because of the way comments work in WordPress we need to account for a few different scenarios: Open comments and trackbacks; only trackbacks open; only comments open; comments and trackbacks closed. And that means … what looks like a mess of IF statements.

It can be daunting. The code is commented but remember to look for the blocks of IF and ELSEIF statements and you’ll be fine.

We also want to print a link to our permalink here for bookmarking purposes and the RSS for this particular single post—useful for tracking developing conversations.

Post Attachments

Not a lot of people use post attachments but they’re kinda interesting. When you add an image to your post you’re actually attaching it to the post. And, of course, you can attach more than just images. We’re going to make an attachment.php template but you can, if you like, adapt it further to cover other types of attachments like video, audio, and applications, by making video.php, audio.php, and application.php templates. There’s lots of different ways to be creative with attachment templates and WordPress.

The easiest way to proceed here is by copying single.php, renaming it attachment.php, and making the following changes.

First of all, delete the top navigation. We won’t need it at all here. Replace it with a page title that links back to your parent post.

Since the page title is now wrapped in h1 tags that means our post title should be wrapped in h2 tags.

<h2 class="entry-title"><?php the_title(); ?></h2>

Now, because our attachment template needs to actually show the attachment, our content needs to reflect that. And since most attachments are going to be images, we’ll want to check for that and cover that scenario with an IF statement.

Delete the bottom navigation from what was once your old single.php, and you’re done your attachment.php Template.

The 404 Template

A 404 Error is the server code for, “I can’t find this page” and it’s an event you need to take care of in your WordPress Themes. What happens when a link to your blog has a post url typed incorrectly? Or you unpublish a blog post? Your server coughs up a 404 error.

Luckily, WordPress has a template for that. It’s called, 404.php. The technique I stick with for 404 Templates is pretty straightforward but it works. Apologize and include a search form. There might be more creative solutions but none that get out of your visitor’s way faster.

Go back to your template-template above, drop the navigation and add something like this to the content.

Hi Ian,
I´m stuck here. I’ve followed your instructions until the “Single post content” bit. I’ve copied the two simple lines of php code to after

and before
<!– #post- –>
but the content doesn’t show up in the page. Eveything else is fine: title, utility, navigation, comments, but not the content.
I’ve even tried with the same code from index.php, and with the_excerpt, but to no avail.
Everything was fine when there was no single.php.
What am I doing wrong here?
J.

I had *exactly* the same problem you had. But isn’t everything (title, comments, etc) related to the_post()? Since we were both missing that line of code, how is it that we were able to get all the other data and just missed the_content() alone?

If previous_post_link() and next_post_link() really “do just what you think they do”, then they’ll keep changing their minds about what they do. It would be lovely if you could explain to us which means “older” and “newer”.

A great tutorial so far, Ian, but could you provide the code in its entirety for single.php et al? You lost me when you addressed Single Post Titles – I am not sure if I am inserting the code snippet into header.php – as well as the sequential items.

Hi Ian,
I’ve solved my newb problem but I found another one, and this time, I think, is a bit more complicated because it’s not a problem of your theme, but of WordPress.
Let me explain: If we use a picture in a post with an attachment page, the picture gets a title associated with that post. But if we re-use that picture in another post, the title in the second attachment page links to the original post, and not to this second one.
I hope I was clear with my explanation:
use photo in first post => attachment page OK
re-use photo in second post => attachment page links to first post instead of second
Any idea about this?
Thanks
J.

This one seems a lot less clear about where everything goes than in the previous tutorials. There’s a lot of information, but I’m not sure where to put it all, since you don’t really say for a number of parts.

I have to agree with Christina. I am trying to piece together my template following the narrative, not by jumping between the article, my template and the other file from the SVN repository.

For example, the instruction about entry-utility is written before the_content() but they appear in the opposite order in the template. We might probably know the structure as it’s the same in index.php but many of us are beginners.

Organizational clarity aside, I do appreciate the explanation behind the snippets of code; I am getting a lot out of it nonetheless. Thanks, Ian.

in an earlier part of this 12 step tutorial, you introduced us to step #4. Template and Directory Structure. In that step you never mentioned needing either 404 or “single.php”. Did you just introduce them abruptly in this step, or did i miss an earlier introduction/mention to these files?

thanks for the quick reply, ian. i love the early steps of this 12-step tutorial: for example, the concise explanations of elements such as doc type. but i gotta tell you, the middle-to-end steps become daunting for me. i tried to plow through steps 7-12, thinking i’d find some comfort in step 12 in particular, but the whole thing became overwhelming with it’s php intricacies. i’d rather it be 24 steps that are more simple, perhaps. that said, excellent work overall. your voice, your design – all flow very well together.

I’m totally with Sergi on this one. Your tutorial series is superior to the only book out there (that I know of) on the subject, and by far the best resource I’ve yet to find on the web (and I’ve done nothing but looked for the last 2-3 weeks or so!). However, there’s a marked difference inn how much you develop topics from roughly mid-way into the segments and to the end. The gaps grow. There’s only so much one can leave for the reader to ‘figure out’ on there own.

I truly believe you’ve demonstrated to have the talent and expertise to be the ‘Zen’ of WordPress Theme Tutorials, or if you will, the all classic ‘A-List-Apart’.

If you have the interest and the time to invest in re-working the segments that lack adequate explanation, or better yet, expanding on the tutorial as a whole, you’d be doing this community an even greater service then you already have.

In fact, I was just thinking that you might want to consider a screencast as that might be less tedious. Either way, your teaching style is unrivaled and unparalleled. Thank you profoundly.

I think … I think I will expand on this. I can see part 7 benefiting from some expansion and breaking down of the code. And perhaps the others benefiting from some larger explanations. Can you pinpoint some parts where eyes start to roll and heads swim?

I’d love to discuss this with you at greater length, if that’s something you’d be interested in. I have a background in developing interactive training materials and would love to throw some ideas at you. Are you local? (USA). Feel free to shoot me an email. Phone or Skype work for me.

my confusion started after step 4. when suddenly there is a file called “functions.php” that wasn’t introduced earlier. then i went to Google code and found that there are many, many files that are still necessary to create the theme.

and if i remember correctly, not all those files fall in the same folder. for example, are we supposed to create a folder with the name of our theme in the “languages” folder?

thus: i could benefit from a step 4-A, per se, a.k.a. “here is an overview of how and why our directories need to expand to accomodate our new theme.”

Like Sergi said the prior steps are very well explained, but I’m stuck here. You don’t say where to add things. Up to about lesson 4/5 I was right behind you, thinking I was a genuis (when really it was you) only to be crushed into the floor with this particular step.

“We’ll be calling the_post() near the top of our page just after the opening of the content div and just before the navigation.”

less experienced readers could do with a code snippet and the exact placement of this code. I figured it out by comparing with the Google Code, but I missed out on it otherwise.

I haven’t read through the entire tutorial yet, but I think that a more complete series of code snippets, or at least at the end of each paragraph, would greatly enhance your tutorial. I guess those who are working through this are here to learn about WP templates and its most important structures. Otherwise they would just download the template as a whole and try to work in some mods the trial & error way.

A quick question about this series: is there a print-friendly version available that removes all the comments from each lesson? I’d love to be able to follow along, but my eyes get tired when I read from the screen for too long. Thanks!

I’m not terribly experienced with php, and this has been helpful to a degree, but I’d suggest a little more consistency in presentation.

For example: Much of the code has been presented in copy/paste blocks for simplicity, so I had to think for a minute before going coding the_post() myself. For single post content, you describe a simple function call, but do not mention the .entry-content div that wraps it in the Google code. You also don’t say where to place the single post title, so I had to go hunting it down in the Google code. The same goes for the entry-utility and post content code, and those two are placed in opposite succession in the final code.

The “this is what the code should look like” blocks had been very useful to this point, and you might consider using them more often through the tutorial for better consistency and usability. You might have to break this into two pages to avoid feeling too long, but in the end it will be a much more useful tutorial.

That’s my 2 cents. Thanks for your work, I appreciate what you’re doing and I have gotten a good amount of info from this so far.

Nowhere in the tutorial does it say where Single Post Titles, Single Post Entry Utility Links, or Single Post Content is placed within single.php? I’ve been reading this fantastic tutorial up until now, but am completely stumped as to where this code goes.

Like a few people above, I got a bit lost on this part. But, after looking at the code on Google I think I know where I went wrong.

My mis-understanding may lie with the ‘build as we go along approach’. For me, if you start with a block and then add lines of code throughout the article, the line numbering must be consistant. I.E. this block inserts at lines 37 – 45. or this overwrites lines 76- 82 etc. Then the reader sees where the new block goes or the lines it overwrites.
I would also add ; – so now your code should read… for single.php and… for attachment.php etc at the end of the article (for idiots like me, who make errors and then can’t see where we went wrong).

I seem to have a bit of a strange problem. I have the 404.php file uploaded, but it doesn’t show as it should. The standard error message just pops up on a blank page: “The requested URL /blahblahbla was not found on this server. ”

The funny thing is, if i put on the default theme, which also contains a 404 page, it won’t show. Do i have some kind of server issue, or..?

Hai folks…, Ian,
As I understand the 404 code is supposed to be placed in the single.php (like Ian mentioned: the template-template) In that case you won’t need a 404.php file.
I don’t know how to respond to Ian’s remark to ‘drop the navigation’ since it only has an effect on the contentpage but I don’t see anything happening on the page which doesn’t exist which is called something like: http://localhost/yourname/?p=209.
Unfortunatly I don’t get what the attachment.php does. I don’t see anything happening anywhere and I don’t know where or what to look for.

This is a terrific tutorial. These things are hard to write. It’s especially difficult to think of everything that people may not get. I know it been said above but to help others find it fast, there were 2 issues with this page that aren’t very clear so I thought I’d mention both in one place.

Okay… I think this is a great tutorial which I understood sortof up to this point… then suddenly after the title tag on the single page you lost me… You stopped saying before and after what things go and start to say things like: “remove the top navigation”… There are sections marked nav-above and nav-below, but no top navigation… I understand that people who are experienced will just get it… but I don’t… I understand HTML and CSS and would be happy with just having the php files in their compelted form… so what’s the best way for me to proceed?

The first line that threw me was
I accepted that a title should be above the content so i put that right after .

Correct? no?

actually now that I think about it Im also not sure if I have the nav-above and nav-below in the right spots… Since im not yet sure exactly what turns into what… I do preview the en result to try and check though…

Basically everything after that is greek… what is a single post utility link and where would it logically go then?

Then the trouble really started with duplicating the file and “First of all, delete the top navigation. ” which to me seem difficult since I can easily delete a div that is named but am not sure which divs would be inluded in this. 🙂

I’m struggling with the single.php — I’ve written tutorials before so I understand that when you get into the zone sometimes you aren’t as clear about the particulars because you sort of EXPECT your audience to know SOME things automatically. 🙂

Unfortunately, I’m lost as to where these pieces of code are placed — could you help me out?

This tutorial just is NOT good at all. At first you explained really well how and where those blocks of code should go but then when the tutorial went on you just started to say things like “lets put this block of code in there” ..not telling where it should go.. and now i have no idea if there is all the right stuff in the right places anymore.. really frustrating and confusing! In this page you just started saying what to do next but you stopped showing HOW TO DO IT! You just stopped the damn tutorial. Thanks for trying but thanks also for wasting my time..

Pepp, don’t be rude!
I’ve had the same problems, and I also think the tutorial could be a little easier in some sections, but when I got in trouble Ian gave some useful suggestions. I’ve checked the code he posted and I’ve finished the tutorial just fine. I’ve learned a lot in the process, and used the theme in my site. What can one ask more from someone who’s being generous enough to give his time and knowledge to the community?
If you can’t finish it, it’s really your fault, not Ian’s.

The process is tedious, and towards then ends of them we get a little burned out. Can you blame us? People like Ian and myself (and many others) spend the entire DAY in front of the computer doing this shit — which means these tutorials come right out of our spare time, often of which there isn’t too much.

I’m very confused so far until this point all tutorials are about setting up the .php files when does design part come in?? As a designer it’s hard to follow or understand…
I’m trying to set up my own design blog it would be great if i could set my own design templets…..is there anything would you like to suggest for designers?? some one like me who just started to learn.. I hope i’m not the only person getting confused here….in your description you said you are a professional designer would you like to share how did you start????

hmm.. people that having trouble with single.php need .htaccess in the top folder of wordpress installation, then change the permalink again at admin. If still error, you need to enable allowoveride the apache at /etc/httpd/conf/httpd.conf

Until this step everthing was going fine, but really at this point some little things goes out of control… haha
Despite the fact of be the best related article i’ve ever found, some points gets very unclear, especially talking bout the single.php. Im sure the newbs will get crazy and several gonna leave away.
But for those who’re lost (like i was) the code will be a precious help. Cheers!