WP Theme Lesson #2: Template Files and Templates
- Filed under: Tutorials
Template files and Templates is the second lesson of my WordPress theme tutorial series. If you haven’t read Lesson #1, stop right now and go read lesson one. Otherwise, you will not understand the terms used in lesson two.
Now that we’ve gotten passed the rules and terminology, this lesson will get you familiar with template files, templates, and the structure of each page.
The one thing to remember is that each page of your blog is made up of multiple template files. Here’s an example of the front page.
In the example above, your front page is made up of four template files: header, index, sidebar, and footer.
Header Template File:
Your blog’s title and description sit in this file. They usually remain the same through out the whole blog.
Index Template File:
This one contains your post title, content (text and images of each entry), and post meta data (information about each post like: who’s the author, when you published it, under which categories, and how many comments).
Sidebar Template File:
This controls your Page links listing, category links listing, archive links listing, blogroll listing, and etcetera. (The Sidebar doesn’t need to be on the right side of the layout. The example I’m using is a typical two column blog layout.)
Footer Template File:
Like the header.php template file, the footer usually doesn’t change from page to page. You can put anything in this file, but usually your copyright information.
Now let me explain why index.php is red, in the example above. Index.php is red to indicate that, that area will change, depending on which page of the blog you’re on.
If you were on a single post page, your page would consist of these four template files: header, single, sidebar, and footer.
Follow this WordPress Theme Tutorial Series from the beginning.
I’d like to translate your WordPress theme tutorial series into Chinese and I want to ask you that whether I can have the Chinese version posted in my blog or not? I’ll surely let the readers know that you’re the author and the posts on my site are just traslations.
Sure, but can you wait until I’ve completed the series? There’s room to improve on each lesson.
Once I’m done, I want to go over it again before having it translated into multiple languages.
I wanted to say you have a “student”. I will be following along. I have a WP page I am working up from your Half-life template. I have done basic .php, but my css is very weak.
Thanks. I like the cleanliness of your code.
In general, I can wait for the lessons, but (always a but :-), is there any particular problem integrating tables into WP? I have not seen it. I assume for a reason - just don’t know the reason.
Tables make for poorer designs. It’s not impossible to design a WP theme with tables, but it’s more trouble than it’s worth. CSS is the way to go - keep following Small Potato, he’ll show you the way.
Alchemist,
Table tags are for use of organizing stuff like a table of data. It’s not meant design purposes like using a table to arrange where your banner is going to be.
You know what I mean?
I am learning what you mean. I will keep reading. My current goal is to render http://chocolatealchemy.com/wordpress/ like http://chocolatealchemy.com/ but in css. I can’t currently figure out how to render that top “two part” banner (img and text links to the right) in css - only a table.
Sure, as your will. And I’m glad that you make the tutorial better.
[…] Chinese version of my blog. I’ve already got the premission from Small Potato. But he asked me to start the traslation after he complete the […]
You’re doing an excellent job explaining this material. Even I can understand it, and I’m not very computer-y at all.
Keep up the good work.
Contact me if you’d like to talk more about how you can make your million. I have an idea for you.
/s/ Lynn R!
Thanks Lynn, if you have any question on the upcoming lessons, don’t hesitate to ask.
Everyone has their own path to a million. I chose mine
[…] WP Theme Lesson #2: Template Files and Templates […]
Great tutorials! I’ve been looking for something like this for a while. I basically know how to do small edits in Wordpress and know a little .php, but this series is making it easy to understand. Keep up the good work. Looking forward to more.
Joe
i like this one as well, cant wait to finish reading, taking it in little by little lol, putting too much in brain can hurt
hoho,i am chinese, thx for the lessons.
no problem. thanks for reading.
Small Potato,
You are a life saver. I am following your tutorial all the way. Please add in whatever you think Newbiz in WP theme like me must read.
Good! Easy to learn
I really like the way this shows everything step by step its really easy to follow.
Thanks
Wow, this is wonderful… thanks for the incredible clarity. I’m a newbie to Wordpress and my CSS skills are rather limited (PHP being almost nonexistent)… anxious to apply this knowledge to designing my own WP theme– as none of the ones I’ve seen really do what I want (I’m too much designer, not enough programmer
)
[…] Intro #2 Template Files and Templates #3 Starting Index.php #4 Header Template #4b Header Template Continues #5 The Loop #5b The Content […]
[…] So - what am I proposing? Note: If you get confused†- educate yourself on the .php files of Wordpress here and here. […]
This tutorial is great! Thank you! I’ve read a few before finding yours. They were all (supposedly) for beginners but in fact you had to have prior understanding of CSS and Php to follow.
[…] WP Theme Lesson #2: Template Files and Templates oleh Small Potato diterjemahkan oleh Mochammad […]
What code should be in these files ?
i’ve answered two of your questions already. please read the lessons before you ask any more questions. for support, go to the support forums. thank you.
Sorry for another question, but I am new. Would this work? “Have your whole page as one xhtml file like index.php but then have divs for each thing like header footer sidebar. Then inside the divs have an import that would import the other files to the index.php but they would be remote so they could be changed from one spot (except the main paragraph code is just in the file in xhtml in ’s…” I dont know if that makes sense. It’s just I am used to regular coding and this is confusing.
Bob - I’m guessing you have a lot of questions for me. Therefore, I will not answer them. You’ll have to go through the entire tutorial series. The answers you’re looking for are in there.
If you need technical help during the learning process, you can find me at the Wpdesigner support forums.
Ok lol thats odd but I like this site so I will do that. What tutorial do you suggest I start on if I have a good knowledge of xhtml and css?
Start from the beginning.
hello, i know this is just a stupid question but what’s single.php? what does it do? like, is that when you click post #1 and you get brought to the page where you could comment on the post? is that right? sorry for the stupid question. i really don’t know what i does.
I was wondering if it would be possible for you to go back through and put links that navigate from one page to the next…..
Hi there potato,
OH MY GOSH!!! I’ve been searching for this kind of entry for the last two years…. and I am so happy right now that I so understand every single words your saying unlike the one one wordpress site. Dude keep up the good work OK and you’re truly a blessing to us peolple that needs this type of lesson.
JEFFROX
A new student is attending the lessons
thank you for your time and job
Hi , there is no easy way to go to the next lesson. Could you please add a link to go to the next lesson. Also all the text in my previous comment was lost because I did not enter my email . Is there a way to add email if we forgot to add it and not lose the comments that we wrote.
Awesome ! Just the kind of step-by-step I need.
Thank you!
[…] WP Theme Lesson #2: Template Files and Templates […]
Hi, first sorry for mi bad english, i, speak spanish.
I like create an special theme for wordpress, im beginning with a design in .psd (photoshop), i have a big question, how i can change the structure or link a top menu, like this web page, but i like this menu first in the top, u can help me,… thanks, now i continue read you excelente tutorial…it’s so easy and clearence
Hey this tutorial is really cool. Now that I have done with all the lessons i want to ask how to make a tab of the newly created page in the header such that the new link to the page must not come on the sidebar but next to the home tab and also if i have child pages then how to make a drop down menu so that when i point the mouse to the tab in the header the menu should drop down showing the child pages.
[…] Intro #2 Template Files and Templates #3 Starting Index.php #4 Header Template #4b Header Template Continues #5 The Loop #5b The Content […]
Hi …
I am following your tutorials and it is easy to follow. Keep up the good work.
Hey,
This is really helped me a lot. Thanks.
Just FYI…
After reading lesson#1, I could easily go to the next one by clicking the lesson#2 link which is in the related posts.
But after the lesson#2 there is no link for lesson#3. I had to go again to the index page of this blog. You could have provided link to next lesson for each lesson.
Thanks,
Samson
improve navigation no link to continue the post. Also the letters are not much visible with this black background.
[…] http://www.wpdesigner.com/2007/02/21/wp-theme-lesson-2-template-files-and-templates/ .gallery { margin: auto; } .gallery-item { float: left; margin-top: 10px; text-align: center; width: 33%; } .gallery img { border: 2px solid #cfcfcf; } .gallery-caption { margin-left: 0; } […]
pwjtbyfpqvsnjiiuwell, hi admin adn people nice forum indeed. how’s life? hope it’s introduce branch
Really, very good. Many thanks!
C8MCYftGExRkM
This tutorial series seems very useful, so thanks for taking the time to make it! It would be much easier to navigate through them if there were a link to the next post, though. I would really appreciate this usability upgrade!
The posts do all link back to the root post — I suspect that’s a surprisingly effective way to get people who happen to jump into the middle of the tutorial to at least scan the TOC before asking already-answered questions.
With tabbed browsing, it’s relatively easy to “new-tab” from the TOC to each lesson; that’s actually the method I prefer anyway. I’ve opened all the lessons in tabs (with a quick scan of each one) and I’m now going back and working through each one.
There is an Organize Series plugin ( http://unfoldingneurons.com/neurotic-plugins/organize-series-wordpress-plugin ) that would provide the navigation (and include a TOC with each post if desired), and manage the links for you. I’ve just discovered it and not had a chance to use it, so I can’t comment on its quality.
Hello!
Writing from Sweden
I want to make my start page using wordPress. Basically I want only the index.php to show. I don’t want a footer, header, or sidebar. So the rest of my site remains html and the start page consists of the regular html layout and an iFrame that will contain the WordPress index.php. Is this possible to do? Could you give me some pointers? Thank you for a good tutorial!
Best regards,
Hampus