Tutorials Web Development

How to Create a Custom Page Template in WordPress 4.x?

4.83/5 (6)

In today's WordPress hack we're going to show you how to create a custom page template for your WordPress site.

Let’s say, you added a  new kind of posts to your site, and you want them to display in some special way only on certain pages. Or you want to add some little thing like author bio to post pages. Then you need to create a custom page template.

To be honest there's no need for you to know .php to create simple page templates in your WordPress website. It’s all copying and pasting - like back in your college days. Even if you are using one of the default WordPress themes, you can take parts of its code and compile them to create your own page template.

Create the File

First of all, you need to create a .php file in the code editor of your choice. I prefer Notepad++, but you can also go with Sublime or any other on your choice.

Give Template a Header and a Footer

Two things every page on the web needs are the header and the footer. To display them on your page template add the following code to the .php file you've created.

<!--?php /** * Template Name: Custom Page Template */ get_header(); ?-->
<!--?php get_footer(); ?-->

It will look like that:

You can replace words ‘Custom Page Template’ with your own page template name, so you will understand what is this template all about.

Save the changes and open FTP or cPanel file manager of your website.

Upload the file you've created to the wp-content-> themes-> current theme folder of your website.

Now you can open your WordPress Dashboard and enjoy the results of your work.

Go to Pages -> Add new. In the panel on the right, you’ll find your new page template.

But if you checked the looks of the page you will notice that's completely blank. That's because we've added just the header and the to the page template file. Let’s add something else.

Now let’s add something else.

Add Some Dynamic Content

Say, I want this page to look same as a common WordPress pages, but I also want to have a sidebar.

Go to Appearance -> Editor -> Single Post.php and copy the code responsible for displaying content into your page template file.

<div id="primary" class="content-area">
<!--?php // Start the loop. while ( have_posts() ) : the_post(); // Include the single post content template. get_template_part( 'template-parts/content', 'single' ); // If comments are open or we have at least one comment, load up the comment template. if ( comments_open() || get_comments_number() ) { comments_template(); } if ( is_singular( 'attachment' ) ) { // Parent post navigation. the_post_navigation( array( 'prev_text' => _x( '<span class="meta-nav">Published in</span><span class="post-title">%title</span>', 'Parent post link', 'twentysixteen' ), ) ); } elseif ( is_singular( 'post' ) ) { // Previous/next post navigation. the_post_navigation( array( 'next_text' => '<span class="meta-nav" aria-hidden="true">' . __( 'Next', 'twentysixteen' ) . '</span> ' . '<span class="screen-reader-text">' . __( 'Next post:', 'twentysixteen' ) . '</span> ' . '<span class="post-title">%title</span>', 'prev_text' => '<span class="meta-nav" aria-hidden="true">' . __( 'Previous', 'twentysixteen' ) . '</span> ' . '<span class="screen-reader-text">' . __( 'Previous post:', 'twentysixteen' ) . '</span> ' . '<span class="post-title">%title</span>', ) ); } // End of the loop. endwhile; ?--> 
<!-- .site-main --> 
<!--?php get_sidebar( 'content-bottom' ); ?-->
<!-- .content-area -->

To display sidebar we need to add the following code before the footer snippet.

<!--?php get_sidebar(); ?-->

Like that:

Let’s save the changes in the page template file and see how it looks on the front end.

As WordPress would say ‘All right sparky!

Now you know how to create the page template and the only limit of the functionality of it are your imagination and .php skills.

Also, visit our store, because our WordPress templates are so flexible that you won't need to create page templates.

Share your question or problem with page template in comments and we’ll gladly look into it for you.

Subscribe to our daily WordPress hack-o-letter!

Don't miss your next WP Hack

  • MatchOfTheDayOrg

    I was expecting some useful example.