How to create a custom page template in WordPress

WordPress page templates are specific template files used for specific pages or groups of pages, and these templates for single page data are displayed on the front end. We can also create custom page templates in WordPress.

In this article, we will learn how to use WordPressCreate a custom page template, and how we assign custom templates to specific pages or groups of pages in WordPress.

Create custom page templates in WordPress

在 WordPress 中创建自定义页面模板

By default, WordPress allows default template filespage.phpcreatepageandarticleto handle the appearance of the front end.

We can also check the default template file ( page.php ), but these changes will affect all other pages you have created.

So, that’s why we need to create a custom page template in WordPress to handle specific page layout designs as required.

Let’s start by creating a custom page template.

To start creating custom templates, you only need to have the basicHTMLCSSandPHP knowledge。Of course, you also need to have a favorite file editor. The one I often use is Sublime Text.

So open the file editor and paste the following code into it.

<? php
/*Template Name: My Custom Page Template*/
?>

Use ” my-custom-page-template.php “NamesaveThis document. You can change the file name as needed. But don’t forget to save the extension as.php

The annotated file tells WordPress that this is a template file and that the template name is provided by you. When we create a new page, it will appear in the Page Properties section under the template drop-down menu. We will see it below.

Now we’re going to upload this file to my host, where we host our WordPress website. Then we will test whether this file works.

There are two ways to upload files:

  • Using cPanel and File Manager
  • Use an FTP (File Transfer Protocol) account

Here, I will show you using the FTP application FileZilla. Let’s open FileZilla and log in using my FTP account details.

Navigate to this path ” /wp-content/themes/ACTIVETHEME “File folder.ACTIVETHEMEIs a placeholder for the current activity theme. I would suggest that you choose a child theme of the parent theme. If you don’t have a subtheme, please check out this article How to create a subtheme in WordPress?.

So, we are on currently active topics. Now upload the file to this folder. Check the picture below to understand.

How to create a custom page template in WordPress

Compare this image to what you made. So we can continue testing this file by creating a new page.

So now go to your WordPress dashboard and click on the “page “Under the option “new page” 。You will see the template displayed in thepage propertiesPart below.

WordPress 中的自定义页面模板

Add a new title to the page and select the custom page template from the drop-down list and publish the page.

Now open this page on the front end. You will see a blank page because we haven’t done anything for this template yet.

Let’s add some code to the template file to display it on the front end. Add the following lines to the file. These functions will display the default header Header, Footer, and sidebar Sidebar.

<? php /*Template Name: My Custom Page Template*/ ?>
 
<? php get_header(); ?>
    
     <div id="primary" class="content-area">
        /*your custom code here*/
     </div>
<? php get_sidebar();

     get_footer();
?>

The following code will looppost_type => postAnd displays the article titles and article content of all articles. I usethe_title()Function to display the article title andthe_content()Function to display the content of the article.
There are more functions, such as:

  • the_title()
  • the_content()
  • the_post_thumbnail()
  • the_permalink()
  • the_excerpt()
  • the_time()
  • the_author()
  • the_category()
<? php /*Template Name: My Custom Page Template*/ ?>
 
<? php get_header(); ?>
 
<div id="primary" class="content-area">
    <main id="main" class="site-main" role="main">
        <? php $args = array(
                       'post_type' => 'post'
                     );

             $post_query = new WP_Query($args);

             if($post_query->have_posts() ) {
                while($post_query->have_posts() ) {
                  $post_query->the_post();
                ?>
                  <h2><? php the_title(); ?>& lt;/h2>
                  <p><? php the_content(); ?>& lt;/p>
                <? php }
             }
        ?>
    </main><!-- .site-main -->
 
</div><!-- .content-area -->
 
<? php get_sidebar(); ?>
<? php get_footer(); ?>

Save this code in your template file, which will display all the articles on the page on the front end, and you can design it based on your design layout to make it look and feel better.

You can also add your own custom code according to your requirements, and you can do the following:

  • Create different headers and footers
  • Customize layout based on your PSD/wireframe template
  • Customize the sidebar position or can be deleted
  • Display specific article types with specific criteria

You can do more on this custom page template. Just think about and execute your custom code.

That’s it. You have completed custom page templates in WordPress.

Expand reading:

  • WordPress adds custom templates for articles and custom article types
  • WordPress Theme Making Tutorial (2) Basic Templates and Common Functions for the Theme
  • Core Knowledge of WordPress Theme Development [Video Tutorial]
  • Advanced Improvement of WordPress Theme Development [Video Tutorial]

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注