WordPress.org
Get WordPress

Template Tour

Templates are the WordPress theme files used to render website pages. Getting acquainted with templates is an important step in learning to build themes for WordPress. This walkthrough will explain what templates are and introduce you to commonly used templates and template tags so you can edit and make your own templates.

Objectives

At the end of this lesson, you will be able to:

  • Understand how the template renders a page and the importance of the WordPress Loop.
  • Make and understand basic changes such as adding comments, showing text, and moving elements within the template.
  • Understand the role of the template in theme design.

Prerequisite Skills

You will be better equipped to work through this lesson if you have experience in and familiarity with:

  • Basic knowledge of HTML/CSS
  • Understanding of how folders and files are structured
  • Ability to edit files with a text editor

Assets

Screening Questions

  • Do you have at least a basic knowledge of HTML/CSS?
  • Do you feel comfortable using a text editor to edit code?
  • Will you have a locally or remotely hosted WordPress site to use during class?

Teacher Notes

  • It is easiest for students to work on a locally installed copy of WordPress. Set some time aside before class to assist students with installing WordPress locally if they need it.
  • The preferred answer to all the screening questions is “yes.” Participants who reply “no” to all the questions may not be ready for this lesson.

Hands-on Walkthrough

Introduction: What are Templates?

Today you are going to learn about WordPress templates. In WordPress, a template is a PHP file that controls how your website’s content will be displayed in a web browser. Templates are the building block of your WordPress site. These files draw information like page or post title, content, custom fields, etc. from your WordPress database or other WordPress files and generate the HTML code on the “fly,” or dynamically. A template can control an entire page or just a section of a page and can have a high level of customization or be extremely simple. Depending on the theme you are using, or are developing, you can define as many or few templates as you need. Getting acquainted with templates is an important step in learning to build themes for WordPress.

Templates in Twenty Thirteen

List of template files in the Twenty Thirteen theme.

Features Commonly Found in WordPress Templates

  • Template Tags: code that instructs WordPress to “do” or “get” something.
  • The Loop: to gather information from the database (posts, pages, categories, etc.).

A Tour of page.php in Twenty Thirteen

Let’s break down the parts of the page.php template in the Twenty Thirteen theme. It starts with

<?php

which identifies this as a PHP file so the browser knows how to process it. Next, there is a block of comments.

/**
 The template for displaying all pages
 *
 This is the template that displays all pages by default.
 Please note that this is the WordPress construct of pages and that
 other 'pages' on your WordPress site will use a different template.
 *
 @package WordPress
 @subpackage Twenty_Thirteen
 @since Twenty Thirteen 1.0
 */

Comments are usually included at the top of a template file to describe it’s specific function. Right after the comments is the first template tag

get_header(); ?>

It tells WordPress to insert all the information from the template file header.php at that point. Note that the opening PHP tag “<?php” was above the comments section. Because they’re comments, it’s like they don’t exist when it comes to running the code. It is the same as if the template tag was written.

<div id="primary" class="content-area">     
<div id="content" class="site-content" role="main">
<?php // Start the loop.
while ( have_posts() ) : the_post(); ?>

Listed next in this template file is some HTML. Usually, the reason to create a template file is that you need a specific way to display content, which is tied to how the HTML is written and arranged. The HTML included in this template starts with and determines how the content of this specific template will be displayed. Next is a very important part of the template file – The Loop is the core of how WordPress works. The WordPress Loop is another topic in itself but can be described using PHP code that displays WordPress database information, like a blog post title or content. It basically says “while there are posts available, then use those posts” for whatever the code does next. After that comes a few lines of HTML.

<article>
<p> </p>
<header class="entry-header"></header></article>

Then the file asks if the post has a Featured Image (such as a thumbnail image) associated with it, and, if so, displays that image.

<?php if ( has_post_thumbnail() && ! post_password_required() ) : ?>
<div class="entry-thumbnail"><?php the_post_thumbnail(); ?>
</div>
<?php endif ?>

Next, the file displays the post title. That’s the last of the header information so the header is closed.

<h1 class="entry-title"><?php the_title(); ?></h1>',                             
</header><!-- .entry-header -->

<div class="entry-content">
<?php the_content(); ?>

Then the file displays the post content. The template deals with how to display pages of content if there are many posts available. In the Settings > Reading menu on the left-hand side, there is a spot to determine how many posts should be shown on a page. If that number is exceeded, then this code kicks in and displays pagination links to view additional content.

<?php                    
 wp_link_pages( array('before' => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentythirteen' ) . '</span>',                             'after'       => '</div>',                             'link_before' => '<span>',                             'link_after'  => '</span>',) 
); 
?> 
</div><!-- .entry-content -->

After that, there are a few housekeeping items such as a link on the front-end that allows people who are logged in to click on a link to edit the page.

<footer class="entry-meta">
<?php edit_post_link( __( 'Edit', 'twentythirteen' ), '', '' ); ?>
</footer> 
<!-- .entry-meta -->

The tags that were opened at the beginning of the file need to be closed since this is the end of that type of data.

 <?php comments_template(); ?>

If there are comments, they should appear here. This template tag calls in the comments.php file and displays its code and output here.

 <?php endwhile; ?>

All this has been done as long as there are posts available. Remember the while ( have_posts() ) : the_post(); statement earlier that opened The Loop? Now is the time to close The Loop.

</div><!-- #content --> 
</div><!-- #primary -->

Next, the HTML tags that are open need to be closed as the browser continues to read the page.php template. It is important to close the HTML tags after closing The Loop.

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

Finally, two more template tags are included which get the code and output from the sidebar.php and footer.php files respectively.

That’s it! That’s how a page template is created in WordPress. They are the files, along with their corresponding CSS files, that determine how your site will look.

Exercises

Exercise Name

  • Add a comment to the template file. Make sure it DOESN’T display on the front end.
  • Add some text to the template file. Makes sure it DOES display on the front end.
  • Move the footer section above the content section. See how it is displayed now on the front end.

Quiz

WordPress template files are written entirely in

  1. PHP
  2. HMTL
  3. CSS
  4. JavaScript
  5. All of the above

Answer: Correct Answer = 5. All of the above