Search for a plugin or theme

How to Create and Add a Custom Page or Template to WordPress

How to Create and Add a Custom Page or Template to WordPress

In this article, we are going to show you how to create and add a custom page or template to a WordPress website.

What is a Custom Page or Template in WordPress

As you already know, you can add any WordPress page through your website dashboard from within the pages tab.

That’s the way it works when visiting a page, WordPress will execute the page.php file in your theme directory to generate the appearance and the layout of the page.

That way, all pages’ appearance, and layout look the same, just with different content.

The custom page will allow you to change it and design the look and the layout as you wish.

Why create a custom template in WordPress

All pages were created equally but not all of them should look the same. Creating a custom WordPress page will allow you to inherit many functionality and design from the theme but will give you the flexibility to change the layout of the page.

For example, if you want to create a landing page, which is a page with content only without header and footer, you can just create a custom page and prevent from the header and footer to load in that template. Now, every time that you’ll choose this template, it will be content only page.

Another great reason to create and add a page or a template is when there is a lot of PHP functions that you want to execute on a specific page. Yes, you can add it to the functions.php file or your site-specific plugin but it may just be more beneficial to create a page specific template and execute the codes only when that page is requested.

On our website, for example, we needed to create a custom page template for our changelog page. There are many functions that run to order the items by date and we thought that using the default template won’t be a smart move. Instead, to add the functions to the functions.php file and increase its size, we decided to create a custom template and to enter the functions there.

Creating a Custom Page Template in WordPress

You may be surprised, but creating a custom page template in WordPress is a fairly easy process.

To add a page template, we will need to access our WordPress system files. We can do that using an FTP client. If you know how to use an FTP, go ahead, connect with FileZilla or any other client, and navigate to your child theme directory.

If you don’t have an FTP account or you don’t know how to use it, we will use a file manager plugin to achieve the same results.

From your WordPress dashboard, navigate to plugins->add new, search for WP File Manager, install and activate it.

Install wp file manager plugin

After activating the plugin, a new tab was added to your WordPress dashboard sidebar, navigate to WP File Manager -> WP File Manager.

Here you’ll see a few folders and files. All WordPress themes live in the wp-content folder.

Now we need to navigate to your active theme folder (child theme hopefully) and create the custom template.

To do that, navigate to wp-content -> themes -> your current active theme.

Navigate to current active theme directory

If you don’t know which theme you’re using, navigate to Appearance -> Themes. The first theme on the top left is the theme you’re using.

In our example, the currently active theme is the TwentyTwenty Child theme.

Now, right-click inside your theme folder and choose NEW FILE -> PHP. If you don’t see the PHP option just choose the TXT option and change the file extension to PHP.

Create a new template php file

Now you can name the file as you wish. Make sure it’s a descriptive name. It is for your own use and I want you to recognize the template if you’ll ever need to modify it in the future.

In our example, I would like to create a custom landing page without header and footer. Therefore, I’ll name it custom landing page. Pay attention, you are not allowed to use spaces, please use dashes instead. The end result will be named like so:

custom-landing-page.php

After creating the file, we will need to add a comment line at the top of the file to notify WordPress that we want to use it as a page or template.

To do so, right-click on the file name and click on Code Editor.

Edit the new template file

At the top of the file, paste this line of code:

<?php /* Template Name: custom-landing-page */ ?>

The template name doesn’t have to match the file name but I highly recommend you call the template name exactly as the file name just without the PHP at the end. By doing so, you’ll be able to spot the exact template that a page is using if you would like to modify it in the future.

Add a comment line at the top of the template

After saving our custom template, we can start using it. Navigate to one of your WordPress pages, and select our new template from the Templates list under the Page Attributes tab. After choosing our custom template, click Update.

Use the template in a page

Now, after visiting the page you can see a blank page. That means that WordPress recognizes the template and executes it.

The reason that you see a blank page is that because the page template is empty. Remember? we only added the comment line at the top but not more than that.

Now you can go back to the template and add your custom content.

Fill the Page Template With Content

As I told you above, you probably wanted to create a custom page template to control the appearance of the page. To do so, you’ll need to add your desired content.

Feel free to add your HTML, scripts or functions. You can treat it as a sandbox and go wild with it. If you don’t like the results you can always delete the file and re-create it again.

A good rule of thumb is to copy the content from the original page.php file and paste it into the custom page template.

From there, you can add or remove layout parts. If for example, you don’t want the sidebar to appear in the new template, just delete the function that calls the sidebar.

To get the content of the original page.php file, navigate to Appearance -> Theme editor.

If you see the page.php file on the right side, click on it and copy the file content without the comment section at the top.

If you’re using a child theme, you may not see a page.php file in the list on the right side. That’s ok, you still have it, but it’s inside the parent theme.

To access the page.php file of the parent theme, chose the parent theme from the Select theme to edit list on the top right side and click select.

Selece the parent theme

Now, you’ll see the full list of the parent theme files. Look for page.php file, if you can find it, look for singular.php or index.php file (that’s the file that WordPress uses to generate every page if the page.php file doesn’t exist).

Copy the file content without the comment section at the top.

Copy the content of the singular file without the comments

Navigate back to the template page that we created earlier and click on Edit File again.

Paste the content that we copied above UNDER the comment line at the top of the file. Now, feel free to moderate and modify the file as you wish.

Paste the content in the new page template

In our example, because we want to create a landing page template without header or footer I’ll just delete the functions that call the header and the footer. After changing the file, just save it and visit the page that using this template to make sure it displays your new design.

Custom template without header and footer

Feel free to watch this short video that explains in detail how to create a custom page or template.

Conclusion

Hopefully, you just learned how to create a WordPress page and you saw for yourself that it is a pretty easy process. If you have any questions please let us know by leaving a comment down below.

Also, make sure to subscribe to our YouTube channel and like our page on Facebook.

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email

PluginsForWP

PluginsForWP is a website specializing in redistributing WordPress plugins and themes with a variety of knowledge about WordPress, internet marketing, and blogging.

Leave a Reply