WordPress uses templates and themes to guide the layout of the website. However, some pages may warrant having a different look and feel. For instance, many designers will have a landing page that looks much different than the rest of the site. This is when a custom WordPress page template could be useful.
When developing one of these custom templates, you may need a bit of knowledge about how CSS, PHP and HTML work. This is because of how these custom layouts are designed. Now, you don’t need extensive college courses for this. However, a basic grasp of coding would be very beneficial.
Here, we’re going to show you how to create a custom WordPress page template to give your content a new look.
What a Custom Page Can Do For You
A custom page template can be useful when you need to create a separate look and feel from your primary website. This can be done for marketing purposes only or to create a presence that seems less like your site than what you need.
Using your skills at programming, you can set up the page in a plethora of ways without creating a huge impact on your website as a whole. Anything you change on the one page will not affect the rest of your site. In a way, this custom page will behave independently from the rest of your WordPress content.
Creating a Custom Page Template
To create a custom template, you’ll need a text editor. For those who use Microsoft Windows, you will have Notepad available. Otherwise, you’ll need an editing system like Dreamweaver or FileZilla. In either case, do the following:
Step 1: Open your text editor.
Step 2: Input this line of code into the blank field: <?php /* Template Name: CustomLayout01 */ ?>
Step 3: This is the only line necessary for the file. It essentially informs WordPress that the file is for a template and will be viewed as, “CustomLayout01.” In reality, you can name this anything you want. Just make sure it’s something you can identify later.
Step 4: Save the file to your desktop as customlayout01.php.
NOTE: You will have to make sure the “.php” extension is on the file when you save. You can name this file anything you want, but it may be helpful to keep it simple and easy to find.
Step 5: Open your FTP client software. This can be FileZilla or you can use the “File Manager” in cPanel. You need to connect to your webhost directly and access your WordPress root folder.
Step 6: Go into the directory, “/wp-content/themes/.”
Step 7: Find the folder of the theme you are currently using and go into that directory.
Step 8: Upload the .php file you just created into the folder of the theme you are using.
Step 9: Once the upload has been complete, exit the FTP program or cPanel and log into your WordPress admin panel.
Step 10: Create a new page or edit one you already have saved.
Step 11: A new function will be added to Page Attributes with a drop down window labeled, “Template.” Use this to find and select your empty template.
Step 12: Click the “Update” or “Publish” button on this page.
If you visit the page, you will see a blank area. This is because there is no coding available in the file you created in order to tell WordPress how to display content. This is when HTML, PHP and CSS skills come into play.
Preparing the Custom WordPress Page Template
In reality, you can add any form of HMTL, PHP or template tag to the customlayout01.php file you want in order to make it unique. It may be beneficial to read up a little on what you can do on a coding level before using this template. You can also include a variety of specific website scripts to serve various purposes.
One easy way to get started with a custom template is to copy basic information from the page.php file within the theme you are using. This will give you a starting point and may be beneficial when you’re first learning how to program. To do this:
Step 1: Open your FTP program or use cPanel’s File Manager to access your WordPress root folder.
Step 2: Access the theme which you are using. This will also be where you stored the customlayout01.php file from earlier.
Step 3: Open the page.php file in order to edit it. You can download this file directly, which may be a better choice in case you make a mistake. Making edits to a copy of the file is safer than making adjustments on a live website.
Step 4: When you open the page.php file, you’ll see a template header. The header is part of the file that has “*” preceding each line. Do not copy this section. Instead, you want to copy the content below the header. This block of code usually begins with the term, “get_header.” However, you need to make sure you start the code with, “<?php” and then paste the rest.
Step 5: Open your customlayout01.php file you made earlier and paste the copy directly under the “Template Name” line.
Step 6: Once you have copied the code, save the customlayout01.php file and upload it into the directory for your theme. You can follow the same steps to do this mentioned above.
Step 7: Because of the copied code, your custom page template will look exactly like the rest of your website. From here, you can edit the customlayout01.php file with HTML, CSS or PHP in order for it to be a unique layout.
It doesn’t take a lot of programming skill to set up some of the basics for what you want to accomplish. However, it’s advisable that you do learn if you want to create a custom layout for your page. For example, your page will not show any of the content you type into WordPress without the class input for the “content-area.”
Does this work for regular posts in WordPress?
Unfortunately, this only works for static pages within the management system. You will be unable to change the attributes in this fashion from the post-editing screen.
Would this affect anything else within the WordPress site?
The custom page is isolated from the rest of your content. Even if you put in incorrect coding, it will not affect anything else within the website. If you have a problem within the custom page, simply change the Template back to default and everything reverts back to what it was.
Is there an alternative for a custom layout as opposed to coding?
It is possible to create a custom layout without taking the steps to make a unique file. Using plugins like Page Builder by SiteOrigin gives you the ability to set up a unique layout while using widgets within the content itself. For those who have no programming skills, this may be a better alternative.
If you would rather use Page Builder, you can easily deactivate sidebars and footers while keeping the header of the site by choosing a different layout of the page.
Custom pages can have purposes ranging from advertising a product or service to creating a landing page perfect for various campaigns. The key to remember is that this single page will not influence the rest of your website. As long as you have some knowledge of programming, there is really no limit to what you can design to accompany WordPress.
How often would you use customized pages for your site? What types of sites do you visit when it comes to learning HTML or PHP, if any?
Author: Chris Racicot
Chris is the Support Manager at GreenGeeks and has been with the company since 2010. He has a passion for gaming, scripting and WordPress. When he’s not enjoying his sleep, he’s working on his guitar skills and fiddling with 3d printing.