Ali Jafarian

In this tutorial we’ll create a custom WordPress page template for our WordPress site. Custom page templates can be used for unique page layouts, landing pages, or any other kind of web page. In this tutorial we’ll use a “landing page” as the context for our custom page template.

To create a page template, you’ll need 2 tools:

  1. The text editor of your choice (we recommend Sublime Text).
  2. An FTP client (ex: FileZilla).

Step 1

Open up page.php with your text editor. This is located in your theme directory. For example:

wp-content / themes / [your-theme-name] / page.php

Step 2

Replace the top section of the file with the code below:

/*
Template Name: Landing Page
*/

Your new page template should then look like this:

<?php
/*
Template Name: Landing Page
*/

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

Now save this file as page-landing-page.php

Important – Every page template should start with “page-“ and end with a name of your choice (all lower case with dashes or underscores).

Step 3

Upload your new page template to the wp-content directory using your FTP client.

Once this has been uploaded, you should see this new page template as a Template option when creating/editing a page in WordPress. You can select the template within the Page Attributes box.

WordPress Page Template Selection


And that’s it – You’ve successfully created a custom WordPress page template! Now let’s hook up some editable fields (content) in the next tutorial.

Discussion

Leave a Comment

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