LESSONS & TOPICS

Stepping into Templates

Stepping into Templates

Template files are the building blocks of your WordPress site. They fit together like the pieces of a puzzle to generate the web pages on your site. Some templates (the header and footer template files for example) are used on all the web pages, while others are used only under specific conditions.

A traditional web page consists of two files:

  • The XHTML page to hold the structure and content of the page and
  • the CSS Style Sheet which holds the presentation styles of the page.

In WordPress, the (X)HTML structure and the CSS style sheet are present but the content is generated “behind the scenes” by various template files. The template files and the style sheet are stored together as a WordPress Theme. To learn more about creating Themes, read Theme Development.

The WordPress Page Structure

A simple WordPress web page structure is made up of three basic building “blocks”: a header, the content, and a footer. Each of these blocks is generated by a template file in your current WordPress Theme.

Header

Content

Footer

  • The header contains all the information that needs to be at the top — i.e. inside the <head> tag — of your XHTML web page, such as the <doctype>, <meta> tags, and links to style sheets. It also includes the opening <body> tag and the visible header of your blog (which typically includes the title of your site, and may also include navigation menus, a logo bar, the description of your site, etc.).
  • The content block contains the posts and pages of your blog, i.e. the “meat” of your site.
  • The footer contains the information that goes at the bottom of your page, such as links to other Pages or categories on your site in a navigation menu, copyright and contact information, and other details.

Basic Template Files

To generate such a structure within a WordPress Theme, start with an index.php template file in your Theme’s directory. This file has two main functions:

  • Include or “call” the other template files
  • Include the WordPress Loop to gather information from the database (posts, pages, categories, etc.)

For our simple structure, we only need to include two other template files: the header and the footer. These must be named header.php and footer.php. The Template Tags that include them look like this:

<?php get_header(); ?>   <?php get_footer(); ?>

In order to display the posts and pages of your blog (and to customize how they are being displayed), your index.php file should run the WordPress Loop between the header and footer calls.