Ali Jafarian

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
  • 404.php
  • archive.php
  • comments.php
  • css
  • footer.php
  • functions.php
  • header.php
  • genericons
  • image.php
  • inc
  • index.php
  • js
  • languages
  • page.php
  • readme.txt
  • screenshot.png
  • search.php
  • searchform.php
  • sidebar-content-bottom.php
  • sidebar.php
  • single.php
  • style.css
  • template-parts
WP TwentySeventeen
  • 404.php
  • archive.php
  • assets
  • comments.php
  • footer.php
  • front-page.php
  • functions.php
  • header.php
  • inc
  • index.php
  • page.php
  • README.txt
  • rtl.css
  • screenshot.png
  • search.php
  • searchform.php
  • sidebar.php
  • single.php
  • style.css
  • template-parts

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

Leave a Comment

Your email address will not be published. Required fields are marked *