How to Design a WordPress Custom Page Template (UPDATE 2021)

Cutsom WordPress templates

WordPress themes are just great. They make WordPress web design so easy.

But, what happens when you want to go beyond your chosen theme?

What if you want to use a custom WordPress layout on a particular page?

Well, some themes won’t allow you to alter their layouts.

Image result for mine meme

But there are some workarounds for this.

Follow me to find out.

 

What is a Custom Page Template and How to Assign One?

WordPress pages and posts layout are controlled by a template file named “page.php”. Templates are files that tell WordPress how to display different types of content.

Now, you might not want all pages and posts to look the same. This is when you need a custom page template.

What WordPress page templates are you using?

Wanna find out what page template you’re using, or how to switch between templates?

It’s easy peasy, you’ll need to:

  1. Head over to your WordPress Admin Dashboard,
  2. From the menu on the left, select “Pages”,
  3. Hover over the title of a page,All Pages in WordPress
  4. From the menu below the title, select “Quick Edit”,
  5. From the “Quick Edit” window, go to the “Template” dropdown.

WordPress templates

Here you can see all the available theme templates, and you can assign a different template to your current page.

For example, there’s an option to change your page to full width, if you’d like. But there’s no option for a template that adds a second sidebar.

This is why custom WordPress templates can come in handy. Whenever you save a new template, it will be available alongside the old ones as well.

Now, you can assign do this assignment inside the page as well. When you choose to edit a page, on the right-hand side, head over to “Page Attributes” -> Template.

Assigning a page template

 

How to Create a Child Theme

Now, before getting our hands dirty with creating a WordPress custom page template, there’s one thing to bear in mind: make the changes on a child theme. You wouldn’t want to cause any irreversible changes to the parent theme.

A WordPress child theme is a sub-theme that inherits all the features and styles of the parent theme. Now, if the parent theme gets an update, your child theme won’t be affected and your changes won’t be overwritten.

Now, how do you create a child theme? Here are the steps:

  1. Login to your cPanel,
  2. Go to File Manager,Access File Manager inside cPanel
  3. Head over to public_html -> wp-content -> themes folder,Access Themes folder in cPanel
  4. While inside the “Themes” folder, add a new folder from “+Folder” in the upper menu. Give it a name. A best-case practice is to use the name of the theme, to which you append “-child”. Also, use hyphens, instead of space. In my case, I’m going to use mesmerize-child, because I’m using the Mesmerize theme,
  5. Inside the folder, create a new file and call it  “style.css”,Create style.css in cPanel
  6. . Right-click on the file and select the “Edit” option.
    /* 
    Theme Name: Your Theme Child 
    Theme URL: http://yourdomain.com
    Description: Your Theme Child 
    Theme Author: Your Name
    Author URL: http://yourdomain.com
    Template: yourtheme 
    Version: 1.0.0 
    Text Domain: yourtheme-child 
    */

    Here you can paste some of the code in the parent CSS file, or add your own styling.

  7.  Change the theme and domain names, then hit “Save”,
  8.  Create another file in the same folder. This time name it “functions.php”. Paste the following code:
    <?php
    add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
    function enqueue_parent_styles() {
       wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
    }
    ?>

     

  9. Go to the WordPress Dashboard, Appearance -> Theme. Your child theme will be there, you just have to activate it.

And you’re done.

Next, let’s make a new template, shall we?

How to Create a WordPress Custom Page Template?

You can start from the existing theme code and make the necessary adjustments.

Here are the steps:

  1. Go to cPanel -> File Manager,
  2. Navigate to public_html -> wp-content -> themes folder,
  3. Open your main theme folder,
  4. Identify the page.php file. It will look like this:
    <?php mesmerize_get_header(); ?>
    
        <div id='page-content' class="page-content">
            <div class="<?php mesmerize_page_content_wrapper_class(); ?>">
                <?php
                while (have_posts()) : the_post();
                    get_template_part('template-parts/content', 'page');
                endwhile;
                ?>
            </div>
        </div>
    
    <?php get_footer(); ?>

     

  5. Select the file then choose “Copy”,
  6. In the window that pops up, change the path of the file, to the one in your theme child folder,Copy page.php to new file location
  7. Rename the new file so that you can easily identify what it does.
  8. Add a comment inside the file so that you can tell WordPress that this is a new custom template. Do this by selecting “edit” and inserting this text:
    /*
     * Template Name: Your custom TEmplate's name
     * description: >-
     Explain what your new templates does
     */

    Your new file should look like this:

    <?php 
    /*
     * Template Name: Custom Full Width
     * description: >-
      Page template without sidebar
     */
    mesmerize_get_header(); ?>
    
        <div id='page-content' class="page-content">
            <div class="<?php mesmerize_page_content_wrapper_class(); ?>">
                <?php
                while (have_posts()) : the_post();
                    get_template_part('template-parts/content', 'page');
                endwhile;
                ?>
            </div>
        </div>
    
    <?php get_footer(); ?>

     

You can add here copies of other files as well. For example, you can customize the single.php file, which will change the look and feel of blog posts.

Next, you’ll need to roll up your sleeves and write some code.

And if you want to alter CSS styling, you can do this inside the child theme Customizer, inside Aditional CSS or inside the style.css file.

 

However, there’s a simpler solution…

With a site builder like Colibri, all the code “stands” behind, and doesn’t block a non-technical site creator. Every addition or change to a custom page is visually reflected in the Customizer. Thus, the site creator has more control over the design. The pretty custom page will be ready in the blink of an eye, with no bothering for the code behind the page.

 

We hope this article has made it clear what a custom page is, and why you might need one. Coders and non-coders can now be able to create custom pages as they wish.

 

[sibwp_form id=1]

+ posts

Alina is a digital marketer with a passion for web design. When she's not strategizing she's doing photography, listening to podcasts on history and psychology, and playing with her 2 dogs and cat.

 

How to Kickstart Your Wordpress Website with No Coding Skills

[Marketing plan included]

FREE GUIDE