How to Create a Custom Page Template in a WordPress Theme

One of WordPress’s most important selling points is its endless customization potential. As a WordPress user, you want more control over your site’s design and functionality.

WordPress is great at this. Its flexibility allows basically anyone to change anything about their site. Speaking of which, page templates in WordPress allow you to customize the design of your site, just the way you like.

Things like adding a header to your homepage or adding/removing sidebars from a blog page can all be done with page templates.

Basically, if you want a specific page to look different from the rest of your site, you’ll have to use page templates. A lot of WordPress websites use custom page layouts for their landing pages and sales pages.

So…if you wanna achieve the same for your website, this guide is for you. In this blog, we’ll take a look at various methods to create a custom page in WordPress.

Let’s get started.

Why Use a Custom Page Template in WordPress?

Having a single cohesive theme adds great value to the website’s design and functionality. However, some websites prefer having different designs for different pages.

Unfortunately, several WordPress themes restrict users from altering layouts and functionality for a different page in the hierarchy.

A WordPress custom page template allows users to integrate custom requirements such as a right/left sidebar on a particular page, additional call-to-action functionality, or a unique header for a particular landing page.

A custom WordPress page template could be used for a number of purposes. For example, to:

• Show recent posts of each category
• Embed Google Maps or any script
• Show a list of all authors
• Show recently uploaded images
• To create a custom-designed portfolio page
• etc …

A template file named page.php handles the appearance of all pages and posts created on a WordPress website. Creating or editing a custom page template in WordPress requires basic knowledge of HTML, CSS, and PHP.

Accelerate WordPress Load Times by 70% With Cloudways Cloudflare Addon!

Improve your website performance & score higher on Core Web Vitals with Cloudflare’s Edge Page Caching for WordPress!

Learn More

How to Create a Basic Custom Page Template (3 Methods)

Now for the good stuff. We’re now going to take a look at four different methods to create a custom page template in WordPress.

Method#1: How to Create a Custom Page Template in WordPress Using PHP Code (Manual Method)

For this method, you’ll need:

• Text editor – I’ll just use notepad
• FTP client or hosting control panel – I’ll use FileZilla
• Access to the WordPress admin panel
• Basic knowledge of PHP and WordPress file structure

Let’s get started…

Step 1: Add the Template Code

• Simply open any text editor and paste the following code into it.

<?php /* Template Name: PageWithoutSidebar */ ?>

• The line of code will tell WordPress that this is a template file called PageWithoutSidebar—when we use it. You can use any name you want. Now save this file as PageWithoutSidebar.php. Again you can use any other name for the file. But don’t forget to keep the extension as .php.

Step 2: Upload the Template File

• Now, we’re going to test our newly created template file.
• Log in to your hosting panel. In this example, I am using Cloudways’ WordPress hosting. If you wanna try Cloudways, check out this guide on how to add an application on the Cloudways platform.
• Next, I will use FileZilla to establish an SFTP connection with my server to navigate to the /wp-content/themes folder.
• Open your current theme folder and upload the PageWithoutSidebar.php file there. In my case, the theme is twenty-twenty-two.

Step 3: Select the Template in WordPress

• Go to WordPress Admin Panel > Pages > Add New. Next, in the page attributes section, you should see the new custom page template listed.

• Create a new page and set its template to PageWithoutSidebar. Once done, Publish it.

• Open the newly created page. As there are no design elements in the template yet, a blank page like the image below will show up.

• This shows that the custom page template in WordPress has been successfully implemented—hence, you can now create a custom responsive WordPress theme.

Step 4: Adding Content to Your Custom Template

• It is now time to add a few lines of code to display content on the page.
• To do this, edit the PageWithoutSidebar.php file. I’ll use FileZilla to add the code below to my file now.

<?php
/* Template Name: CustomLoginPage */
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(); ?>
        
            <div class="login-page-intro">
                <h2>Welcome to Our Site</h2>
                <p>Please log in to access your account. If you don’t have an account, you can register to become a part of our community.</p>
            </div>

            <div class="login-form-container">
                <?php
                // WordPress login form
                wp_login_form(array(
                    'redirect' => home_url(), // Redirect after login
                    'label_username' => __('Username'),
                    'label_password' => __('Password'),
                    'label_remember' => __('Remember Me'),
                    'label_log_in' => __('Log In'),
                    'remember' => true
                ));
                ?>
            </div>

        <?php
        // End the loop.
        endwhile;
        ?>
    </main><!-- .site-main -->

    <aside id="custom-sidebar" class="sidebar-area">
        <?php if ( is_active_sidebar( 'custom-sidebar' ) ) : ?>
            <ul class="sidebar-menu">
                <?php dynamic_sidebar( 'custom-sidebar' ); ?>
            </ul>
        <?php else : ?>
            <ul class="sidebar-menu">
                <li><a href="#">Pages</a></li>
                <li><a href="#">Account</a></li>
                <li><a href="#">Custom Page Template</a></li>
                <li><a href="#">Login</a></li>
                <li><a href="#">Password Reset</a></li>
                <li><a href="#">Pricing</a></li>
                <li><a href="#">Register</a></li>
                <li><a href="#">Restricted Content</a></li>
            </ul>
        <?php endif; ?>
    </aside>

</div><!-- .content-area -->

<?php get_footer(); ?>

• Paste this code into PageWithoutSidebar.php just below this line of code and save it: <?php /* Template Name: PageWithoutSidebar */ ?>
• Your complete PageWithoutSidebar.php file will look like below.

<?php /* Template Name: PageWithoutSidebar */ ?>

<?php
/* Template Name: CustomLoginPage */
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(); ?>
        
            <div class="login-page-intro">
                <h2>Welcome to Our Site</h2>
                <p>Please log in to access your account. If you don’t have an account, you can register to become a part of our community.</p>
            </div>

            <div class="login-form-container">
                <?php
                // WordPress login form
                wp_login_form(array(
                    'redirect' => home_url(), // Redirect after login
                    'label_username' => __('Username'),
                    'label_password' => __('Password'),
                    'label_remember' => __('Remember Me'),
                    'label_log_in' => __('Log In'),
                    'remember' => true
                ));
                ?>
            </div>

        <?php
        // End the loop.
        endwhile;
        ?>
    </main><!-- .site-main -->

    <aside id="custom-sidebar" class="sidebar-area">
        <?php if ( is_active_sidebar( 'custom-sidebar' ) ) : ?>
            <ul class="sidebar-menu">
                <?php dynamic_sidebar( 'custom-sidebar' ); ?>
            </ul>
        <?php else : ?>
            <ul class="sidebar-menu">
                <li><a href="#">Pages</a></li>
                <li><a href="#">Account</a></li>
                <li><a href="#">Custom Page Template</a></li>
                <li><a href="#">Login</a></li>
                <li><a href="#">Password Reset</a></li>
                <li><a href="#">Pricing</a></li>
                <li><a href="#">Register</a></li>
                <li><a href="#">Restricted Content</a></li>
            </ul>
        <?php endif; ?>
    </aside>

</div><!-- .content-area -->

<?php get_footer(); ?>

• Go back to your page and refresh it. Now you should see a new custom page template like this:

So, from a blank page to a page with some content, you, my friend, have just created a custom page template. Now, I know it doesn’t look the best right now. But trust me, when you customize it to your liking, your page will look great.

Method#2. How to Create a Custom Page Using the Block Editor

This method is a simpler, more streamlined alternative to creating a custom template with SFTP access. Here, you’ll use WordPress’s built-in block editor to design a custom page template without needing any external tools. This is ideal if you want a quick, reusable layout for multiple pages.

• Start by opening any page or post in the editor. In the right-hand menu, go to the ‘Page’ tab and look for the ‘Template’ option

• Click on the text next to ‘Template.’ In the popup that appears, select the ‘Create new template’ option

• In the popup, give your template a name that’s easy to recognize, like “Custom page template,” and then click on “Create”

• Now, you’ll enter the template editor, where you can add content blocks by clicking the blue ‘+’ button. Drag and drop blocks like headings, text, images, or other elements you need

• Let’s add the calendar widget as an example

• When you’re satisfied with the design, click the ‘Save’

• To use your template, open the page where you want to apply it. Click next to ‘Template’ and then the Swap template option

• Then, choose the template you just created

Method#3. How to Create a Custom Page Using a Plugin (Elemantor)

Creating custom page templates in WordPress can significantly enhance your site’s functionality and appearance.Elemantor, with its theme builder functionality, provides an efficient way to create and manage these custom templates.

Here’s how you can create a custom page template using Elemantor:

• After installing Elementor on your website, go to Templates in the WordPress dashboard and click Add New.

• Now, Elementor will ask you to choose a template type: Container, Page, Section. If you’re using the pro version, you’ll get more options to choose from. I’ll just choose page for this example. Next, I’ll also have to name my template.

• Click on Create Template when done. This opens the Elementor editor where you can start building your template.
• To use a pre-designed template, click the Folder icon.

• If starting from scratch, drag and drop the elements you need onto the page. I’ll just use a pre-designed template for the sake of simplicity. For this, pick any template and click on “Insert”.

• Hit Apply when a popup appears. This will override the design, layout, and other settings of the Page you’re working on.

• Customize the template by dragging and dropping widgets such as headings, images, buttons, or forms onto the page. I simply made some tweaks by adding a couple of images to my template.

• Once you’re happy with the design, click the down arrow next to the Publish button and select Save as Template.

• Name your template and click Save. Now your template is saved and you can use it wherever you like.

• To use the template you created just now, go to Pages > Add New and click Edit with Elementor.

• Click the Folder icon, find your saved template under My Templates, and click Insert.

• Once inserted, here’s how my template will look like when I preview it.

• That is it. This is how easy it is to build custom page templates in WordPress with a website builder plugin like Elementor.

Fastest Managed WordPress Hosting at Just $11/Month*

Experience blazing fast server speeds with Cloudways LAMP + NGINX hybrid stack. Improve your Core Web Vitals today.

TRY NOW

Conclusion

Creating a custom page template in WordPress is a great way to create specific pages that look unique and different from the rest of your website’s design. Another benefit of creating page templates is that they can be reused. You can design a page once with the desired functionality and then apply that template to as many pages as you need.

In this blog, I covered WordPress custom page templates in detail, showing you three different methods for creating custom templates: manual, block editor, and plugin-based (Elementor).

If you think I missed something, feel free to let me know in the comments.