How To Create WordPress Custom Page Template?

A WordPress Custom Page Template allows you to use different layouts for different page content.

Almost every WordPress Theme comes with some pre-installed page templates, eg. sidebar on the right, sidebar on the left, whole page, portfolio etc. But sometimes you need a different layout, and this is the time when you create your own WordPress custom page template.

In this tutorial I’m going to show you how to create the WordPress custom page template itself. It’s your task to design it and alter the code so the layout gets exactly how you want it to be.

Creating WordPress Custom Page Template – Tutorial

1. Log in to your ftp account, and go to your /wp-content/themes/[active_theme] folder, where active theme is the theme currently being used. (Please note that here the name of my theme is “honlaprafel” which is the original, Hungarian name of the WPCookHouse site.)

1. Locate the current page template you want to modify. The default page template is page.php, this is what you should build your custom page template upon most of the times. Sometimes you want to modify another version, eg. page-fullwith.php, this depends on your theme and the result you want to achieve.

1. Make a copy of this file, and rename it something like page-[your_template_name].php. You can choose whatever you want for template name, it’s recommended to use something that you’ll understand later (eg. fullwidth, squeeze, sidebar-left, etc.).

   This time I’m going to make a full width page (without sidebar), so let’s call it page-fullwith.php.

   With an ftp client – I use free FileZilla -, you need to download your file (page.php), rename it on your computer (to page-fullwith.php) and then upload back to the wp-content/[active_theme] directory.

2. Now open your new file (page-fullwith.php) for editing. This can be done in your ftp client by right-clicking the file name and selecting view/edit. As a free code editor I use Notepad++.

1. All you need to do is insert a few lines of comments at the beginning of your template file. This is the way WordPress understands it’s a page template file and uses TemplNte Name when selecting it in the page editor.

   /* and */ open and close the comment in php respectively. After Template Name you specify the name of your template.

2. Save and upload your file to your server.

3. You are ready to go with the first part. You created your WordPress custom page template and it’s ready to be used. You can check it by opening a page in you WordPress editor, and at the right sidebar under “Page Attributes” you’ll find your new template in the dropdown box.

Simply select it for your page and click Publish / Save Draft. The good new is that your page will load and use your new template. The bad news is that so far there is no difference with the original template.

How To Change The Look Of Your WordPress Custom Page Template?

In order to actually have a different look for your new page template, you need to modify the code.

This is really theme specific, so there is no use for me to show you how to do it exactly, it will be different for your theme. But I give you a few cornerstones how to alter the code of your WordPress custom page template file.

• Use your browser’s inspect element function (or an addon like Firebug) to identify which divs you need to remove or change the attributes of.
• You generally need to edit your css file in order to your custom WordPress page template to work properly. Be sure to use either specific ids or classes so that your theme’s original page templates keep on working properly.
• If you use a commercial or free downloadable theme, your modifications in the styls.css file will be lost after any update. Use either a child theme or your own css file to avoid this.
• If you remove divs from your original template (eg. sidebar), be sure to remove the whole area – please check the html code. It’s a common error to remove only some inner visible divs and than mix up your site. It is theme dependent how easy it is to identify and remove the sidebar from the code. Also be sure to adjust the widht of the divs in your new page template. If a sidebar is removed, the main area needs to be broadened.
• Don’t do these changes unless you have a basic knowledge of html/php/css. You need to alter the code, remove or add divs, change their sizes. This is fairly easy for anyone with a basic html/php/css knowledge, but it can be a nightmare if this is the first time you are editing a website’s code.

What are WordPress custom page templates good for?

When you are designing and coding your own theme, there might be a lot of possibilities you need a custom page template for. These are, among others:

• Pages with right sidebar, left sidebar. Even pages with two sidebars – in general pages with different sidebar locations.
• A full width page with no sidebar – when you don’t want to move away your visitors attention from the main content.
• A portfolio page to feature your work or photos.
• Pages with different colors in the header, menu, main content or footer.
• A Squeeze page with no navigational elements.
• To test visitor reaction to different page layouts.

When using a commercially available (or free) WordPress theme, the most common reason I use custom page templates is to create a squeeze pages. That is a page not only without sidebar, but also without header, footer, menu or any navigational item that might alter the attention of the visitor.