Episode 2, Structure: Template and Template files

In the second lesson of my WordPress theme for n00b‘s series you will learn about Templates and Template files, the building block of a WordPress theme. Make sure that yo have understood the lesson one made some days before, else you will not understand any words that we use here.

In this lesson you are going to study about the template, template files and structure in the construction of a WordPress theme.

A WordPress theme is made of many templates and template files. As I have mentioned before, It is very easy to solve a problem if we split it into some related modules. The WordPress theme we are going to build will be in modular form, that means each and every element of our template will be splited into some separate modules.

We have the freedom to split or manipulate anything, everything in the WordPress theme keeping the syntax. But we have to think before making modules. Modules will be very helpful if we are going to make a complex theme. However we are practicing the modular method.

See the diagram below to get a knowledge about the modules I was talking about.

In the above image the green portion is the index.php file which will act as the parent template in our theme. Each requests comes to the homepage of the blog will be taken along with the index.php template file of our theme.

And the blue portions inside the index.php are the modules we make, they are also some templates files made with a purpose in mind.

Take the condition of footer as example, usually we add Stats Tracker’s codes in the footer of the website, if footer, header, sidebar and entry sections are together inside a single file called index.php it will be very hard to edit, tweak, update, or manage the templates. There is the ‘module’ comes as the angel . Here we create separate files for each elements, Footer section as footer.php, sidebar in sidebar.php header in header.php and blog section as blog.php and we call all of them into the index.php accordingly. So index.php will be clean, and all template files will become less lines of codes for easy management.

Well, now take a look at the mockup of each template files we used in the above image separately.

Header Template File

Here we add codes to render the Title, Description, may be Vertical Navigation in most cases (Depends on the layout and the designer) and meta tags for Feed URL, CSS URLS, etc etc…

Sidebar Template File

This template file includes the codes for the archive listing, blog rolls, and any other things a designer wants to add. In our theme we have a single column sidebar on the right side.

Blog Template File

Here we will include the entry, blog meta informations like Comment count, author, post date etc..

Footer Template File

Like header.php footer also stands same all around the theme in most cases. In the footer we include copyright information, Design link, and may be a link to the WordPress ! Also try to add tracking codes like Google Analytics etc to the footer.php if you use them, if something goes wrong with the service providers our site will not take too much time to load the important parts like content area and header.

If you missed any erilier posts, take a look at this unified url of the complete tutorial series. Asking your doubts through the comments only. (No IM / emails please )