WP Theme Lesson #15: Sub-Template Files
- Filed under: Tutorials
Follow this WordPress Theme Tutorial Series from the beginning.
To continue with where we left off, you’re going to create more sub-template files like yesterday’s header.php, sidebar.php, and footer.php files.
Now that the index.php file’s divided, it gets even easier.
Step 1
Before you do this step, look at the Sidebar, click on an Archives link. The resulting page doesn’t look different from your front page right?
- Create a new file: archive.php
- Copy and paste everything from index.php to archive.php
- Save archive.php
- In the archive.php file, change the_content to the_excerpt.
- Save the archive.php file again.
By creating an archive.php file and changing it to make it different from index.php, you are customizing the appearance of archive pages.
Now, if you refresh your archive page, it will give you only excerpts, not the full posts.
Why would you want to do this? - to prevent Google from penalizing your blog for having duplicate content. If one of the archive pages and the front page display the same content, that’s duplicate content.
What if you have a private blog? Then, it’s not necessary to distinguish the archive pages from the front page. That’s not to say excerpts aren’t useful for private blogs.
Also - By default, your category pages will look for instructions on how to display content from the archive.php file. If you don’t have an archive.php file, category pages will look for index.php.
If you want the category pages to look different the front page and archive pages, create a category.php file and customize it.
Step 2
- Create a new file: search.php
- Copy and paste everything from archive.php to search.php
- Save and you’re done.
Now, all search results will be returned as excerpts. Without the search.php template file, the search option looks to index.php on how to display search results.
(Optional) You can go back to lesson one to review the hierarchy.
Step 3
- Create two new files: page.php and single.php
- Copy and paste everything from index.php to page.php and single.php. (For now, page and single should be the same.)
- Save page and single. Close index. Close single.
Step 4
There’s a difference between a Page and a page remember? The page.php template customizes the look of those special Pages.
First, in page.php, type the following codes under <?php the_content(); ?>:
<?php link_pages(’<p><strong>Pages:</strong> ‘, ‘</p>’, ‘number’); ?>
and
<?php edit_post_link(’Edit’, ‘<p>’, ‘</p>’); ?>
Second, remove the postmetadata codes from page.php. Here’s what you should have without postmetadata.
Third, remove the posts_nav_link() or navigation block from page.php.
What just happened?
The first line of codes was for displaying links to sub-pages.
For example, edit your About page. Follow my screenshot below for what to add.
This is useful for when you have to break down one REALLY long page into multiple pages.
For the second line of codes, it’s your administrator-only Edit link.
Your Pages don’t have categories attached to them and you usually don’t want to show a time stamp for them either so that’s why you removed the postmetadata. You also removed the posts_nav_link() codes because the Page pages don’t display Next page and Previous page links.
Save the page.php file and close it.
Step 5
Clicking on a post title to read the rest of an entry takes you to the single post view. single.php template handles the appearance of the single post view.
In single.php, type this under <?php the_content() ?>:
<?php link_pages(’<p><strong>Pages:</strong> ‘, ‘</p>’, ‘number’); ?>
Yes, that is the same line of codes for sub-page links. Did you know you can also break down posts into multiple sub-posts?
Second, in the postmetadata area, remove the <?php comments_popup_link(); ?> function and the <br /> tag before it. Don’t remove the whole postmetadata.
You removed the comments link function because it doesn’t work on single post view so there’s no use in having it in the single.php file. Without the number of comments link, there’s only the invisible, administrator-only, Edit link, left after the BR tag. You don’t want to skip-a-line for an INVISIBLE link that only you can see right? That’s why you removed the BR tag.
Third, replace <?php posts_nav_link(); ?> with:
<?php previous_post_link(’« %link’) ?> <?php next_post_link(’ %link »’) ?>
On front, archive, category, and search pages, you use the posts_nav_link() function to call for Next page and Previous page links. For the single post view page, there’s no Next page or Previous page link. You use the previous_post_link() and next_post_link() functions to call for the previous and next post links.
Save the single.php file. Go to a single post view page to see the difference in the navigation area.
Lesson Review
- You created four new files or sub templates: archive.php, search.php, page.php, and single.php.
- The archive.php and search.php templates are the same.
- Pages (different from posts) don’t have categories attached to them. They also don’t have Next and Previous page links.
- Single.php can’t display the number of comments link (called for by the comments_popup_link() function) and it doesn’t use posts_nav_link() to call for navigation links.
You’re a genius!
This stuff is totally unmissable. Just spent the whole night going from 1 through to 15 of the lesson files. Learnt more here than anywhere else on the web.
Well done, and can’t wait to learn more!
PS - is there any way you can have multiple users’ blogs in links from the sidebar?
Awesome!
Thanks Dave. I lost my way, reading through my own lessons. I’m relieved you understood them. The initial set of lessons will cover just the basics and I’m almost done with them. Once you’ve learned the basics, I’ll go into more advance design and styling techniques.
I don’t get your question.
IE7 still not formatting correctly (everything is centred). When I validate, it rejects the tag, with the message “unclosed start-tag requires SHORTTAG YES.”
Sorry, my formatting has hidden the tag! It’s <div id=”header”> that is causing the validation error. No problems in Fx2 though.
I tried to answer your email last time, but couldn’t get through. Did you fix the wrapper DIV problem?
Can you screenshot the validation result?
[…] and Floats #12 Post Formatting and Miscellaneous #13 Styling Sidebar #14 Footer and Diving Index #15 Sub-template Files #16 Comments […]
Hai i’ve got a problem met single.php, if i upload these one and go to comment page (at one of my blogds) I see a weird error on the page:
{\rtf1\ansi\ansicpg1252\deff0\deflang1043{\fonttbl{\f0\fswiss\fcharset0 Arial;}} {\*\generator Msftedit 5.41.15.1507;}\viewkind4\uc1\pard\f0\fs20
\par \par
\par \par \tab \par \par \tab\tab
\par \par \tab\tab\tab
what tools are you using?
hey man, now how to create the category themplates, and how to call them, i want my category page has their own look dif from each other…
follow the archive.php steps for category.php, then modify it until the category template looks the way you want it to.
SP, how do you break down pages?
my ” Pages:1 2 3″ link
wont work?
yeah my Pages:1 2 3 is not working to..hmmm i wonder why?
Great content here, thank you very much.
I got the same problem.
My links don’t seem to appear, and i’ve checked everything many times.
The add appears as a content, and not as a break line.
mmm…
Would you have some ideas about that?
There’s not much to analyze about it. If you didn’t use the codes right, you won’t end up with mutliple pages. It needs to be in this order:
Content
(next page code)
Content
Nearly done… *eye balls drying out*
I think the thing that chris, E}{odus and Ange are missing (if they haven’t worked it out for themselves already) is that when you are logged in and click on the Edit link there are two tabs above the formatting buttons called “Visual” and “Code” and it sounds like they are putting the in the Visual when it should be in the Code. That’s what I did first time too!!
php edited my previous post and took out (next page code) from the last sentence which makes more sense below…
…it sounds like they are putting the (next page code) in the Visual when it should be in the Code…
I used the actual code and it didn’t like it
hai..
i have a problem with my single…. it list all the post even i just click i post ….
sorry for broken english,,,,
plz help…
I don’t understand what your problem is.
Hello Small Potato;
Thanks for your great tutorial. I would like two ask two things.
First after creating archieve.php and making sure the_excerpt added, there didnt happen any difference between the old and new versions of archieve page. What am I doing wrong? I dont use tag in my posts , by the way.
Second, after creating the archieve.php , do I need to refer to the archieve.php in my index.php with sth like ?
Thanks in advance.
you misspelled “archive”
[…] and Floats #12 Post Formatting and Miscellaneous #13 Styling Sidebar #14 Footer and Diving Index #15 Sub-template Files #16 Comments […]
In regards to the next page numbers not appearing, I have just had this problem. The fix is to type the tag with NO spaces. Should spaces reside, ie after/before the dashes of the comment, then the process fails and all sections of the page are printed on the same page. HTH
Great series by the way, I built and entire site in a day using this as my first time guide
thx a lot 
hey
got a question… i followed your instructions to the dot. however, i dont understand 1 thing though.
after creating single and page.php and changing the code, i could not however post any comments on any post(s). how should i do that? or have i done anything wrong here!
thanks for the great tutorial!!!
Move on to the next lesson to learn about the comments template
Hey Small Potato,
I love your guide, its very helpfull.
I’m writing because I have a problem with guide #15.
After creating the archive,category,single,pages files,
under IE the sidebar jumps down under the content.
Under Firefox it works perfectly.
How can i fix it?
Thank you in advance.
tPedro
It mostly depends on your content. Are you using big photos in your blog posts? In rare cases, it might be a CSS error. If you need more help, please use the forums.
THANK YOU! Small Potato for this great tutorial.
Would it be possible to have a tutorial on how to create an Archive page that lists posts by date and by category. Something like the Archive page on your current theme.
Thanks again!
I’ll write a tutorial on that when I have time to, should be pretty soon.
Small Potato,
This guide is awesome for a newbie. Thank you for taking the time to put this together. There’s really nothing else out there like it. I really think Wordpress should contact you about putting this tutorial on their site.
Everything has been great, and I’ve been trying to fill in my own gaps on the syntax. Could you point out a good noob-friendly resource for that?
One thing I don’t understand from this post is why:
instead of
SP,
i was lost at step#4, i don’t know why i don’t have an “Edit” link and page numbers there in About. Please help me solve this. TT
Please use the forums for help
Small Potato,
I’m learning a great deal from your lessions, they are great!!
On this lesson I followed your instructions explicitly and got the error:
Fatal error: Call to undefined function: get_header()
I assume my archive.php file is in folder of the theme I’m working on. I’ve tried forums, different ideas I’ve come up with, but can’t seem to fix it.
Also, what url do we use for the link to the newly created archive page.
Thanks a million!
Sorry, just as I clicked ‘Submit Comment’ I saw the link for forums. I’ll become a member and post my question there. For some reason I didn’t find this particular forum.
Thanks again for a great tutorial! - John Vogel
Hey, great tutorial. I saw it once before, months ago, and bookmarked it, but then erased my windows, and had to find this again. I was working on a project, and this tutorial came in very handy. I was modifying my theme for what i needed it for while at the same time looking at your notes, to make sure i didn’t miss anything.
Thanks a lot for this.
Nick
hey Small Potato..
I’ve come up till this tutorial 15 and I discovered something..when I tried to click at the archive, it appears like this:
Not Found
The requested URL /norhafidz/2007/11/ was not found on this server.
Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.
Why it appears like that? Did I missed something? sorry, I’m total newbie
I think what Dave Tee is looking for is the ability to turn a page into another blog. At least, I think that would allow a closer inter-linking of several blogs. Is that possible?
Thank you SO much for this tutorial, Small Potato! Although I feel that I just know enough now to be dangerous, I found it very valuable to work through the tutorial. I find it amazingly generous of you to share your knowledge with us!
Thanks!
Rachel
For some reason when I try to publish this line of php:
” ”
I am getting a parsing error:
“Parse error: syntax error, unexpected ‘;’ in /home/…/themes/mpi/single.php on line 20″
Line 20 is that line of code. It is some problem with the unicode for the <>.
Has anyone else had this problem?
[…] WPDesigner » WP Theme Lesson #15: Sub-Template Files Follow this WordPress Theme Tutorial Series from the beginning. […]
Hya Smart Potato =)
First i must thank you for this exelent tutorial, iv got loads of info here and followed all the steps, but one thing i dont find were i am wrong at is: when iv done the single page and the page files, when i look at the single post, my sidebar ends up in the bottom of the page, any idea?
First - Check to see if there’s any error.
Second - Check for wide images that stretch beyond the main column.
no errors were found in the validate, i have no pictures or any extras, its just according to your step-by-step lessons, but when i look at a single post the sidebar goes to the bottom of the page, im confused??
Who hoo i found it, i was fidling with the single page and iv lost a closure div in the nav div, so once more my hat of to this exelent tutorial.
i hope to read more from u m8, keep up this exelent work
SP, this is a great tutorials and help me so much!
btw, i want to ask a question; how can i make the <> on the single.php page? (I want to make the previous link on the bottom left, and the next link on the bottom right).
Thanx.
O_O; the comment parse my text…
repeat:
‘… how can i make the <<Previous_page separate from the Next_page >>on the single.php page? …’
That has to do with general CSS styling. Learn how to do floats in CSS.
[quote]
For some reason when I try to publish this line of php:
” ”
I am getting a parsing error:
“Parse error: syntax error, unexpected ‘;’ in /home/…/themes/mpi/single.php on line 20?
Line 20 is that line of code. It is some problem with the unicode for the .
Has anyone else had this problem?
[/quote]
I’m having this exact problem as well (only its line 19 in mine). I checked, double-checked, and even went back and copy/pasted, but I’m still getting the error
hrm…I started the file over completely and manually typed it out again and it works this time. I have no idea what could have been wrong before. Just one of those things I guess.
btw, this tutorial is extremely helpful! Thank you.
Thanks for the tutorial
Everything seems to be fine except the step 4, I am not sure why the pages link are not showing. The edit link is showing up. The sidebar is showing after post.
Any guesses about the issues?
Ok, I managed to correct some issues. The links are showing now. I have written only 1 time next page code and it was not working. Now I did exactly as you told. Can you tell me why the sidebar is showing below content on about us page…. I hope I don’t have to go to forums for this little issue
please!
No Reply!
[…] and Floats #12 Post Formatting and Miscellaneous #13 Styling Sidebar #14 Footer and Dividing Index #15 Sub-template Files #16 Comments […]
finally, i’m done….and it works perfectly perfect,,,LOLS thanks..i’m going to bookmark this site FOREVER…
i’ll be waiting for more advanced tutorials of yours..thanks and peace be with you.. god bless..
.