WordPress Theme Template Tour
Templates are the WordPress theme files used to render website pages. Getting acquainted with templates is important in learning to build themes for WordPress. In this tutorial, you’ll learn about templates in both block and classic themes, as well as take a tour of a template in a block theme and a classic theme.
Learning outcomes
- What templates area and why they are important.
- The differences between block theme and classic theme templates.
- The different parts of a classic theme.
- The different parts of a block theme.
Comprehension questions
- What is the main difference for templates in block themes vs classic themes?
- What items do classic theme templates have that fetch data from the WordPress database?
- Do block templates contain PHP code?
Transcript
Video Transcript
Hey there, and welcome to Learn WordPress.
Today you’re going to learn all about templates in WordPress themes and why they’re important for your WordPress site to function. In this video, we will cover what WordPress theme templates are, and what templates look like in block themes versus classic themes.
First, you will look at templates in block themes, learn about common block template features, followed by a tour of the page.html template in the Twenty Twenty-Three theme. Then you will learn about templates in classic themes, common classic template features, followed by a tour of the page.php template in the Twenty Twenty-One theme.
In WordPress, a template is a file that controls how your website’s content will be displayed in a web browser. Templates draw information like page or post title, content, or custom fields from the database, all from other WordPress files and generate HTML code to be rendered in the browser. The single template usually controls an entire page, but it can also include one or more template parts that control just a section for that page. Template parts are reusable sections of code that achieve the same result when used in multiple templates, templates and template parts can be have a high level of customization, or be extremely simple. Templates are the building blocks of a WordPress theme. Every theme has one or more templates created to display specific content on your WordPress site. Depending on the theme you’re using or developing, you can define as many or as few templates as you need. getting acquainted with templates is an important step in learning to build themes from WordPress.
There are two types of themes available in the WordPress theme repository, block themes and classic themes. Ever since WordPress included support for themes in version 1.5 theme templates have been PHP files that typically contain either PHP code, or a mix of PHP code and HTML markup. Since WordPress 5.9 A new type of theme has become available. This type of theme makes extensive use of the Block Editor. The theme templates are HTML files, and contain a mix of block markup, and HTML markup. To differentiate between the two types of themes the WordPress community has named themes that use the original PHP method for creating templates, classic themes and themes that use the new Block Editor markup block themes. Regardless of whether the theme is a block theme or a classic theme, all template files follow the naming convention in the WordPress template hierarchy.
Let’s take a look at the template structure and block themes by viewing the template directory of the 2023 theme in a file browser. The first thing you’ll notice is that block theme templates are located in a specific directory called templates. This new directory structure not only makes your theme folder more organised, but it’s easier to determine whether you’re working with a template, template, part pattern, or any other theme related file. In the templates directory, you’ll find the template files which are all HTML false. Let’s take a look at the markup in the page dot HTML template of this theme in a code editor. Block templates only contain block markup and HTML markup. Block markup is identified by a specific HTML comments notation and tells the page being rendered to render the output for that block. Additional information about the block like attributes or styling is passed to the block markup in a JSON format. The HTML markup for a block exists inside the block markup and is used primarily for block structure. At the top of this template file is a template pod block. In this instance, the template pod being included is the header template. But when this page template is rendered, the block markup will find the header dot HTML template parts in the parts directory and include that parts block code. Next up is the start of a group block. Group blocks are used to group multiple blocks together. In this case, the group block has a tag name of main and as a custom margin set. It also opens an HTML main tag with a class of WP block group and applies the margin style to the tech. Next is another group block which includes an HTML div tag. Inside the second group block is the post featured image block and the post title block. Because the page in WordPress is a Custom Post Type, these blocks will get the page featured image and title from the database respectively. Each of these blocks includes its own custom attributes and styling in the template code. then the second block group is closed. After the second block group is the post content block, this will get the content of the page from the database. Next is another template part block, which will include the comments dot HTML template pot. Then the main group block is closed. And finally another template part block which includes the footer dot HTML template dot.
Now let’s take a look at the template structure in classic themes by viewing the template directory in the 2021 theme in a file browser. Here the templates are PHP files and are stored in the root of the theme directory. For example, you can see the index page and single dot PHP templates. You’ll also notice that there are other files stored here, for example, the header and footer PHP template parts. Let’s take a look at the code inside the page dot PHP templates of this theme. In classic templates, you will typically see the use of template tags, which are PHP functions that instruct WordPress to do or get something. You will generally also see the use of the WordPress loop, which will gather information from the database. Let’s break down the parts of the page dot PHP template. It starts with an opening PHP tag, which identifies this as a PHP file so the server knows how to process it. Next, there is a block of comments. Template comments are usually included at the top of the template file and describe its specific function right after the comments is the first template tech. This tells WordPress to insert all the information required for the header, including the code from the header dot PHP template part, as well as any other relevant information. Next, we have the implementation of the loop. The WordPress loop is another topic in itself but can be described as using PHP code that displays WordPress database information for the current data being queried. It basically says while there are posts available, then use these posts for whatever the code does next. Inside the loop the template calls the get template part function, which gets the template part located at template parts slash content slash content hyphen page dot PHP verse template pod contains the HTML and template tags to get the data for the page. Let’s look at that template part. The template part starts with an HTML article tag. article tag specifies independent self contained content. In this case, the template tags the ID and post class set up the ID and class attributes of the article tag. Next up, there is a conditional check if this template is being rendered on the homepage or not. If it’s not the front page, the HTML header tag is rendered includes the template part slash header slash entry header template part and cause the 2021 post thumbnail function which generates a thumbnail for the page. If it is the front page and has a thumbnail, then just the HTML header tag is rendered, and only the 2021 post thumbnail function is called to generate the thumbnail. After that is the main content container div for the page. Here, the third content function gets the page content and renders it after that, the WP link pages function will render any page links for paginated content. This is in case the page content is using the next page quick tags in one or more places. Next is a section that renders a link to edit the page which is only visible if an administrator is logged in. Last but not least, the article tag is closed back to the page template after the content page dot PHP template part has been included. The comments template function is called to include any comments on the page, but it will only include those comments if they are enabled. And if there are comments for this page, the loop ends and finally the get footer function calls any footer template parts or footer information.
And that wraps up this tutorial on templates in WordPress themes. For more information on developing WordPress themes, visit the WordPress developer hub at developer.wordpress.org and click on the develop themes link to visit the theme developer handbook.
Happy coding.
Introduction
Hey there, and welcome to Learn WordPress.
Today you are going to learn all about templates in WordPress themes, and why they’re important for your WordPress site to function.
In this video we will cover what WordPress theme templates are, and what templates look like in block themes vs classic themes. First you will look at templates in block themes, learn about common block template features, followed by a tour of the page.html template in the Twenty Twenty-Three theme. Then you will learn about templates in classic themes, common classic template features, followed by a tour of the page.php template in the Twenty Twenty-One theme.
What are Templates?
In WordPress, a template is a file that controls how your website’s content will be displayed in a web browser. Templates draw information like page or post title, content, or custom fields from your WordPress database, or data from other WordPress files, and generate the HTML code to be rendered in the browser.
A single template usually controls an entire page, but can also include one or more template parts that control just a section of a page. Template parts are reusable sections of code that achieve the same result when used in multiple templates. Templates and template parts can have a high level of customization or be extremely simple.
Templates are the building blocks of a WordPress theme. Every theme has one or more templates, created to display specific content on your WordPress site. Depending on the theme you are using or are developing, you can define as many or as few templates as you need.
Getting acquainted with templates is an important step in learning to build themes for WordPress.
Templates in Classic Themes vs Block Themes
There are two types of themes available in the WordPress theme repository, block themes, and classic themes.
Ever since WordPress included support for themes in version 1.5, theme templates have been .php files that typically contain either PHP code or a mix of PHP code and HTML markup.
Since WordPress 5.9 a new type of theme has become available. This type of theme makes extensive use of the block editor. The theme templates are .html files and contain a mix of block markup and HTML markup.
To differentiate between the two types of themes, the WordPress community has named themes that use the original PHP method for creating templates Classic Themes, and themes that use the new block editor markup Block Themes.
Regardless of whether the theme is a block theme or a classic theme, all template files follow the naming convention in the WordPress Template Hierarchy.
Templates in Block Themes – Twenty Twenty-Three
Let’s take a look at the template structure in block themes, by viewing the template directory of the TT3 theme in a file browser.
The first thing you’ll notice is that block theme templates are located in a specific directory called `templates`. This new directory structure not only makes your theme folder more organized, but it’s also easier to determine whether you’re working with a template, template part, pattern, or any other theme-related file.
In the templates directory, you’ll find the template files, which are HTML files.
Features Commonly Found in WordPress Templates
Let’s take a look at the markup in the page.html template of this theme in a code editor.
Block templates only contain block markup and HTML markup.
Block markup is identified by a specific HTML comments notation and tells the page being rendered to render the output for that block. Additional information about the block, like attributes or inline styles, is passed to the block markup in a JSON format.
The HTML markup for a block exists inside the block markup and is used primarily for block structure.
A Tour of page.html in Twenty Twenty-Three
<!-- wp:template-part {"slug":"header","tagName":"header"} /-->At the top of the template file, is a template part block. In this instance, the template part being included is the header template part.
When this template is rendered, this block markup will find the header.html template part in the parts directory, and include that parts block code.
<!-- wp:group {"tagName":"main","style":{"spacing":{"margin":{"top":"var:preset|spacing|50"}}}} -->
<main class="wp-block-group" style="margin-top:var(--wp--preset--spacing--50)">Next up is the start of a group block. Group blocks are used to group multiple blocks together. In this case the group block as a tagName of “main” and has a custom margin set. It also opens an HTML main tag, with a class of “wp-block-group” and applies the margin style to the tag
<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group">Next is another group block, which includes an HTML div tag .
<!-- wp:post-featured-image {"overlayColor":"contrast","dimRatio":50,"align":"wide","style":{"spacing":{"margin":{"bottom":"var:preset|spacing|50","top":"calc(-1 * var(--wp--preset--spacing--50))"}}}} /-->
<!-- wp:post-title {"level":1,"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|40"}}}} /-->Inside the second group block is the post featured image block, and the post title block. Because a page in WordPress is a custom post type, these blocks will get the page featured image and title from the database respectively. Each of these blocks includes its own custom attributes and styling in the template code.
</div>
<!-- /wp:group -->Then, the second group block is closed.
<!-- wp:post-content {"layout":{"type":"constrained"}} /-->After the second group block is the post content block. This will get the content of the page from the database
<!-- wp:template-part {"slug":"comments","tagName":"section"} /-->Next is another template part block, which will include the comments.html template part.
</main>
<!-- /wp:group -->Then, the main group block is closed
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->And finally, another template part block, which includes the footer.html template part.
Templates in Classic Themes – Twenty Twenty-One
Now let’s take a look at the template structure in classic themes, by viewing the template directory of the TT1 theme in a file browser editor.
Here, the templates are PHP files and are stored in the root of the theme directory. (eg index.php, page.php, single.php, etc). You’ll notice that there are also other files stored here, like the header and footer template parts.
A Tour of page.php in Twenty Twenty-One
Let’s take a look at the code inside the page.php template of this theme.
In classic templates, you will typically see the use of template tags, which are PHP functions that instruct WordPress to “do” or “get” something.
You will generally also see the use of the WordPress Loop which will gather information from the database (posts, pages, categories, etc.).
Let’s break down the parts of the page.php template. It starts with an opening PHP tag which identifies this as a PHP file so the server knows how to process it. Next, there is a block of comments.
/**
* The template for displaying all single posts
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
*
* @package WordPress
* @subpackage Twenty_Twenty_One
* @since Twenty Twenty-One 1.0
*/Comments are usually included at the top of a template file to describe its specific function.
Right after the comments is the first template tag
get_header();This tells WordPress to insert all the information required for the header, including the code from the header.php template part, as well as any other relevant information.
Next, we have an implementation of The Loop:
/* Start the Loop */
while ( have_posts() ) :
the_post();
get_template_part( 'template-parts/content/content-page' );
// If comments are open or there is at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) {
comments_template();
}
endwhile; // End of the loop.The WordPress Loop is another topic in itself but can be described using PHP code that displays WordPress database information for the current data being queried. It basically says “while there are posts available, then use those posts” for whatever the code does next.
Inside The Loop, the template calls the get_template_part() function, which gets the template part located at template-parts/content/content-page.php. This template part contains the HTML and template tags to get the data for a page.
Let’s look at that template part.
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>The template part starts with an HTML article tag. The article tag specifies independent, self-contained content. In this case, the template tags the_ID() and post_class() set up the id and class attributes of the article tag.
<?php if ( ! is_front_page() ) : ?>
<header class="entry-header alignwide">
<?php get_template_part( 'template-parts/header/entry-header' ); ?>
<?php twenty_twenty_one_post_thumbnail(); ?>
</header><!-- .entry-header -->
<?php elseif ( has_post_thumbnail() ) : ?>
<header class="entry-header alignwide">
<?php twenty_twenty_one_post_thumbnail(); ?>
</header><!-- .entry-header -->
<?php endif; ?>Next up there is a conditional check if this template is being rendered as the homepage or not.
If it’s not the front page, the HTML header tag is rendered, includes the template-parts/header/entry-header.php template part, and calls the twenty_twenty_one_post_thumbnail() function, which generates a thumbnail for the page.
If it is the front page and has a thumbnail, then the HTML header tag is rendered and only the twenty_twenty_one_post_thumbnail() function is called to generate the thumbnail.
<div class="entry-content">
<?php
the_content();
wp_link_pages(
array(
'before' => '<nav class="page-links" aria-label="' . esc_attr__( 'Page', 'twentytwentyone' ) . '">',
'after' => '</nav>',
/* translators: %: Page number. */
'pagelink' => esc_html__( 'Page %', 'twentytwentyone' ),
)
);
?>
</div><!-- .entry-content -->
After that is the main content container div for the page. Here the the_content() function gets the page content and renders it. After that, the wp_link_pages() function will render any page links for paginated content. This is if the page content has the <!--nextpage--> quick tag one or more times.
<?php if ( get_edit_post_link() ) : ?>
<footer class="entry-footer default-max-width">
<?php
edit_post_link(
sprintf(
/* translators: %s: Post title. Only visible to screen readers. */
esc_html__( 'Edit %s', 'twentytwentyone' ),
'<span class="screen-reader-text">' . get_the_title() . '</span>'
),
'<span class="edit-link">',
'</span>'
);
?>
</footer><!-- .entry-footer -->
<?php endif; ?>This section renders a link to edit the page, which is only visible if an administrator is logged in.
</article><!-- #post-<?php the_ID(); ?> -->Last but not least, the closing article tag.
Back in the page template, after the content-page.php template part is included, the comments_template() function is called to include any comments on the page, but only if comments are enabled, and there are comments for this page.
Summary
And that wraps up this tutorial on templates in WordPress themes. For more information on developing WordPress themes, visit the WordPress Developer Hub at https://developer.wordpress.org/ and click on Develop Themes to visit the Theme Developer Handbook.
Happy coding.
