WordPress.org

Welcome!

The WordPress training team creates downloadable lesson plans and related materials for instructors to use in live workshop environments. If you enjoy teaching people how to use and build stuff for WordPress, immediately stop what you’re doing and join our team!

Regardless of your skill set, you can help! We need people to write, copyedit, test, audit, connect, and review our lesson plans. Find out how to get started.

Contact Us

We meet weekly at Thursday 1930 UTC in the #training Slack channel on wordpress.slack.com. Leave a message in Slack any time.

You can also leave a comment on this blog or fill out our contact form and we’ll get back to you.

Template Tour

Description Description

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.

Top ↑

Objectives 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.

Top ↑

Prerequisite Skills 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

Top ↑

Assets Assets

Top ↑

Screening Questions 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?

Top ↑

Teacher Notes Teacher Notes

  • Time Estimate: 15 minutes
  • 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. For more information on how to install WordPress locally, please visit our Teacher Resources page.
  • 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.

Top ↑

Hands-on Walkthrough Hands-on Walkthrough

Introduction: What are Templates? 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 acquanited with templates is an important step in learning to build themes for WordPress.


Top ↑

Templates in Twenty Thirteen Templates in Twenty Thirteen

twentythirteen


Top ↑

Features Commonly Found in WordPress Templates 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.).

Top ↑

A Tour of page.php in Twenty Thirteen 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 the same as if the template tag was written

<?php get_header(); ?>

Listed next in this template file is some HTML. Usually the reason to create a template file is because 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 it 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 as 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.

" >

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 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 -->

Then the file displays the post content.

The 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.

  '', 
    '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' ), '<span class="edit-link">', '</span>' ); ?>

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.

 </footer><!-- .entry-meta -->
</article><!-- #post -->

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 comments_template(); ?>

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.

<?php endwhile; ?>

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.

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

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

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

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.

TwentyThirteen page.php code


Top ↑

Exercises 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 a the footer section above the content section. See how it is displayed now on the front end.

Top ↑

Quiz 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

s
search
c
compose new post
r
reply
e
edit
t
go to top
j
go to the next post or comment
k
go to the previous post or comment
o
toggle comment visibility
esc
cancel edit post or comment
Skip to toolbar