For starters, WordPress page templates are used to control the layout of a page [or multiple pages] of your WordPress site.
WordPress page templates contain HTML markup and PHP code. They are a core part of WordPress that allow you to offer unique design/structure for your content. For example, you might have a page template for your “About” page.
Where to Find Page Templates
WordPress includes a default page template with every theme, which can be found in the wp-content
directory as page.php
.
Here’s what your theme directory (file structure) looks like if you’re using the latest WP themes:
WP TwentySixteen
WP TwentySeventeen
Here’s the default page template for WP TwentySixteen (page.php).
<?php /** * The template for displaying 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_Sixteen * @since Twenty Sixteen 1.0 */ get_header(); ?> <div id="primary" class="content-area"> <main id="main" class="site-main" role="main"> <?php // Start the loop. while ( have_posts() ) : the_post(); // Include the page content template. get_template_part( 'template-parts/content', 'page' ); // If comments are open or we have at least one comment, load up the comment template. if ( comments_open() || get_comments_number() ) { comments_template(); } // End of the loop. endwhile; ?> </main><!-- .site-main --> <?php get_sidebar( 'content-bottom' ); ?> </div><!-- .content-area --> <?php get_sidebar(); ?> <?php get_footer(); ?>
Page template can be specified on any WordPress page inside the wp-admin area. It’s one of the default options in your “Page Attributes” meta box.
[screenshot]
Parts of a Page Template
The default page template has several main functions that are important to understand.
get_header();
<?php get_header(); ?>
This gets your site header – header.php. The header is generally included on every page/post of your WordPress site, so you’ll see this function in most templates.
WP loop
<?php // Start the loop. while ( have_posts() ) : the_post(); // Include the page content template. get_template_part( 'template-parts/content', 'page' ); // If comments are open or we have at least one comment, load up the comment template. if ( comments_open() || get_comments_number() ) { comments_template(); } // End of the loop. endwhile; ?>
The “loop” is the default way WordPress queries for data – i.e. it loops through the database to find the correct data needed. In this case, it’s looping through the database to find the content for the current page. It uses the get_template_part();
function to render the page content. It’s also checking for comments and using the comments_template();
function if they are.
Here’s an example without comments (just the loop with content):
<?php // Start the loop. while ( have_posts() ) : the_post(); the_content(); // End of the loop. endwhile; ?>
In this example, we use the_content();
to only render the post content (without any template part). This will display whatever you’ve entered in the WYSIWYG editor for this page.
get_sidebar();
<?php get_sidebar(); ?>
This gets the default WordPress sidebar. The sidebar can contain useful things like most recent posts, categories, comments, and more. You can customize the sidebar within WordPress at Appearance > Widgets. This function can take arguments – i.e. parameters. In the example above there are 2 instances of get_sidebar – one default instance and one instance where it’s asking for the content-bottom
sidebar.
get_footer();
<?php get_footer(); ?>
Now that we know what WordPress page templates are and where to find them, let’s create one in the next tutorial!
Discussion