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..
.
hi small potato,
I really thank you for this very helpful tutorial. You thought everything in detail, and you explained in that way. I am learning much withyour guidence.
I believed that I was successful enough until the 15th lesson.
In 15th lesson, while arranging page php, after editing about, when I click onthe about link, sidebar comes just below the Edit.
What mistake do you think I made?
I am getting this error code:
Parse error: syntax error, unexpected ‘>’ in C:\xampplite\htdocs\wordpress\wp-content\themes\intelegy\page.php on line 9
when I try to get to my “About” page.
I looked at like 9 and ended up copying and pasting when your php was and it is still not working. Do you think I might have misspelled something in my index.php file? or some other file? I am new to php but learning it quickly. Just wondering what you think it might be.
Thank you,
Sofhands
I am getting this error code:
Parse error: syntax error, unexpected ‘>’ in C:\xampplite\htdocs\wordpress\wp-content\themes\intelegy\page.php on line 9
when I try to get to my “About” page.
I looked at like 9 and ended up copying and pasting when your php was and it is still not working. Do you think I might have misspelled something in my index.php file? or some other file? I am new to php but learning it quickly. Just wondering what you think it might be.
Thank you,
Sofhands
I am having the same problem, and like you have tried copying it again, but to no avail. any ideas?
Hey Small Potato.
Thanks so much for this tutorial. Totally helped me understand theming wordpress.
I got one question…
whenever I hit a link under archives or under categoires or basically any link besides the blogroll I get this error:
Object not found!
The requested URL was not found on this server. The link on the referring page seems to be wrong or outdated. Please inform the author of that page about the error.
If you think this is a server error, please contact the webmaster.
Error 404
localhost
06/27/08 22:35:29
Apache/2.2.8 (Win32) DAV/2 mod_ssl/2.2.8 OpenSSL/0.9.8g mod_autoindex_color PHP/5.2.5
What is going on with this? I can not test out the archive stuff and beyond without figuring this out.
thanks again
r
When I set up this wordpress, it gave me a bizarre password with the username “admin”. I was an idiot and didn’t write down the password, and didn’t change it before logging back out, so now I can’t get log-in to edit anything. Is there a way to reset this?
Thanks! I’m really enjoying this tutorial.
When I do step 4 and add this code:
<?php link_pages(’Pages: ‘, ‘’, ‘number’); ?>
and
<?php edit_post_link(’Edit’, ‘’, ‘’); ?>
None of my pages will display. If I click the Pages link in the sidebar for about or test, I get a blank page. When I remove the code I can click on the links in the sidebar and the about page and other sample pages display fine. I am guessing that everything else is fine because without the code it displays fine.
I tried typing it myself many times, with or without spaces as it was hard to tell where the spaces were in regards to the ‘ , ‘
Then I tried copying it and pasting it from your site into my page.php file using BBEdit. It looked fine but I got the exact same result. When I removed the code the page displayed fine again.
Could you post what the final code on these pages should be?
Oh and up to this point my pages validate. I’m sure it is a problem of a space added or omitted in those 2 lines of code from above.
forgive me, I see the reference file now. Tis tutorial is great but the way you style your links in the posts make it a little hard to see. Light grey text looks great but a light yellow link color doesn’t look that different from the regular text, jmho.
For those of you who are having parse errors:
A parse error means that the parser (the program that reads your code and executes it) is finding a problem with your syntax (the format in which your commands are expected to be typed). Fortunately, PHP is not *too* bad with its error reporting: Check your code on the line indicated in the error message, or on a couple of lines before it. If the parse error reads “Expected ‘[insert character here]’ on line __”, check that line and the few lines before it to make sure you didn’t forget to place that character on one of those lines.
Alternatively, if the error reads “Unexpected ‘[insert character here]’…”, that means you probably put in an extra instance of that character in somewhere it didn’t belong. Hope that helps.
As for my *own* problem, it’s one I’ve been having since I started this tutorial, but thought would be fixed later. When I try to click an Archives link, or really any other link on the page except for the Header one that leads to the same page, I get a page with the following:
“Object not found!
The requested URL was not found on this server. The link on the referring page seems to be wrong or outdated. Please inform the author of that page about the error.
If you think this is a server error, please contact the webmaster.
Error 404
localhost
08/19/08 06:49:56
Apache/2.2.9 (Win32) DAV/2 mod_ssl/2.2.9 OpenSSL/0.9.8h mod_autoindex_color PHP/5.2.6 ”
Can anyone please help me out with this?
Never mind, got it, it’s some strange issue where the Permalinks didn’t like being set to the non-default setting. Does anyone know why, or how to get around it (I’d rather not have variables in my URL), or if it’s just an issue when running WP locally and I won’t have to deal with it when my blog is online?
Hey, great tutorials, man. Exactly what I was looking for.
One thing I’m having a problem with is just like a few other people:
When I post a multi-page Page or Post, all text, page 1 has a problem where the sidebar jumps to the bottom. On the other pages, it’s just fine. I checked all my divs, they’re closed. I even copied both your single.php and style.css files, just to be safe. Am I missing something?
Thanks a bunch, man. Great work!
~ B
ZIV
Often because you don’t have the correct apache mod installed locally, can’t remember the name of it.
Should be fine online!
Dan
Hi!
Small Potato, in the first place thank you very much for providing us with this truly enlightening tutorial!
Then secondly, although I worked through it so far with all errors solved by doublechecking and blaming myself for it, there is one error I cannot figger out. As it seems our dear friend Bobby P. mentioned this earlier, but I’ll do it to just for the sake of representivity.
After adding the lines to page.php everything seemed to be working fine, except for the last page (in my case that would be page No. 4). After navigating to the fourth page, the sidebar is suddenly placed at the left side of the screen instead of nicely in the middle. Honestly I have no idea on how to fix this.
Maybe someone who is a lot smarter than I and Bobby P. are, is willing to shine a little light in our darkest hours…
Thanks a lot!
I’m caught up now, but the styling of the navigation on page.php needs work.
Right now, it shows links to the previous entry and next entry at the bottom of the entry that is displayed. This is styled by .navigation in index.css.
I’d like to display “Previous entry” and “Next entry” before the previous and next entries. In my old blog, this was easy, because the navigation was contained in its own template.
How do I do this in WP?
Thanks.
Correction. My comments refer to the file single.php, not page.php.
[…] and Floats #12 Post Formatting and Miscellaneous #13 Styling Sidebar #14 Footer and Dividing Index #15 Sub-template Files #16 Comments […]
Thanks for the tutorial. One problem though. Whenever I click on a permalink to show a single post or page, it still shows the full list of posts. Any help on this would be appreciated.
thanks, your tutorial is very worth to me………
thanks a lot
My single.php code didn’t execute to perfection.. I had this showing on my site:
No Comments »’, ‘1 Comment &#;’, ‘% Comments &#
So what I did was get rid of that entire code that wouldn’t show up anyway:
From HereTo Here!
Hi,
I have a problem hope you can help me… here it is :
the menu/navigation has about and contacts link… I want the about page redirected to about.php that i placed in the themes directory… then the contacts link to contacts.php
I wonder how will i do that… Im a newbie in wordpress
hello it is test. WinRAR provides the full RAR and ZIP file support, can decompress CAB, GZIP, ACE and other archive formats.
[…] and Floats #12 Post Formatting and Miscellaneous #13 Styling Sidebar #14 Footer and Dividing Index #15 Sub-template Files #16 Comments […]
Insert <? Php link_pages ( ‘ pages: ‘,”, ‘number’);?> into the page.php document, and how to use it in the console to edit the page?
Hi,
never mind I got the answer I need
Ok, I got through the entire tutorial…but then when i started dividing the index file everything went wrong!! The entire sidebar disappeared…! All i see in the sidebar is the calendar… the rest of my hard work gone! The codes are fine, i even copy n pasted ur files and still no sidebar, what do i do?
just a quickie to those that have copied and pasted SP’s code at any point: be sure to replace any apostrophes (curly) with single quotation marks (straight). i had a number of validation problems and parse errors cos of that.