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