Phone: 1-855-839-9966

Creating a WordPress template page

Home » Wordpress Tips » Creating a WordPress template page
Share this article on Facebook Share this on Twitter Stumble this article Share this on Google+ Share this on LinkedIn

Posted by Dave Lauretti on November 28, 2012

If you need help creating a customized WordPress template page for your theme, this article will give you the help you’re looking for.

Using WordPress is easy but when it comes to creating a customized theme template page, regular users usually get stuck and need to find a WordPress coder.

Recently one of my Toronto SEO clients, wanted to add some extra functionality to his WordPress website but couldn’t figure out how to integrate this functionality into his current theme.

So today, I decided to put together an article that will help you create a template page for your current WordPress theme and give you an example of why you would need to as well.

I also decided to write this because even though you can use the WordPress codex site for help and examples of most of what you can do with WordPress, in my opinion it’s much too technical for the regular business website owner.

Reasons for creating a customer WordPress page template

For starters, WordPress comes naturally packed in the theme folder with a file called Page.php. This file is used to display content as regular pages (not posts) on your WordPress site. Some regular pages on your site could include the about us page, the privacy page and the contact page.

Now, let’s say, you want to create a contact page, and you want to add your own custom contact form to the page, because you don’t like the one that comes packed with WordPress and none of the plugins available offer the functionality and fields you need in your form. So you’ll naturally start coding your form in the HTML tab of the page-creation page right? Probably not.

Why? Because WordPress has a tendency to inject it’s own code into posts/pages where it deems necessary. The problem is that this injected code by WordPress sometimes doesn’t jive with the code we add to the page (even in the HTML tab) and so display and validation issues can occur.

Another example would be with the same form. Since you’re creating your own custom form with custom fields, you’re definitely going to eventually want to create a Captcha input field that will deter spammers from contacting you and wasting your time. Good luck with that as you can’t add programmatic functionality to a WordPress page unless you use a plugin, but why rely on someone else’s code in a case like this. Right? Right.

This is where creating a custom page template comes into play and it’s really not that hard to do.

Introducing the WordPress page template

Choose a WordPress page templateFor every WordPress page you’re about to post, you have a few post options you can choose from but in our case, we’re going to be looking at the Page Attribute options. In the image to the right, you can see where the Template selection box is located – right under the publish button in the Page Attributes box.

Without selecting a template from the drop down list, WordPress will use the default theme template when displaying the page. If you’ve already created a page template, you will be able to choose it from that list.

Let’s create our page template

Before I show you how to create your WordPress page template, I want to refresh your memory of how WordPress works with pages.

In your WordPress theme folder, you have a generic page used for displaying pages (not posts) on your website named page.php. That files contains all the HTML code that makes your theme look the way it does.

There is a little section of the code in that file that displays the content you wrote when you were creating the page. The image to the right shows you what it looks like: Wordpress Content

The part of the code that says the_content will display the text in your page and the part on blue that says the_title will display the title of your page. Now if that’s a bit too technical for you it’s OK because the next section makes it easier to understand.

While you’re creating your contact page, you can still add the regular content that you would for such a page like a greeting and a sentence or two that will compel the user to contact you. That will be displayed the the the_content section of your page.

But what about your new custom contact form and Captcha? Where does that go? As I said, you can’t place it directly into the page creation page as WordPress will most definitely mumble and jumble your code to the way they think it should be and all will turn awry. So what do you do?

First let’s create our custom contact page template

OK follow these instructions carefully. It’s easy but it could get messy if you’re not careful.

For starters, you definitely want your new contact page template to display the exact same was as all pages on your website does so the best way to ensure this happens is by opening your site in an FTP program, navigate to your theme folder and drag page.php into a file on your computer. From there rename that file (page.php) that you saved to your computer something that represents it’s nature such as contact_template.php.

Wordpress Template CodeOnce that’s done, you’ll have to add something similar to the following to the top of that document. So open it up in an HTML editor and place the text that you see in the image to the right at the very top of the page. (Make sure there are no spaces between the first bracket (<) and the top of the page.)

You’re now on your way to being able to use a customized template to hold all your contact form and Captcha code and be able to maintain the theme of your site as well.

Now you have to add your code which brings us to the next section.

Place your custome code after the the_content piece of code

If you look at our contact page, (which is created with a custom page theme by the way) you will notice that our contact form is below the introductory content. That’s where you can place yours too. This brings is back to the image example above. Find the part of your code that says “the_content” like the image below.

The content snippet

Place your custom contact form directly under that piece of code. Save your document and navigate back to your contact page where we’ll wrap up the whole lesson.

Applying your custom WordPress template to your page

Wordpress Page Attributes - Select your templateIf you haven’t already created your contact page in WordPress, go ahead and create a new page now. Give it a title (Contact Us) and write your introductory content. Make sure everything is top-top and move your mouse underneath the blue publish button.

As I mentioned above, there is a section called Page Attributes – select that drop down menu and in the list you will see Default Template and the newly created Contact Page Template you created a moment ago. Select that.

Where’s my custom form?

This is where the magic of WordPress comes into play. Now that you’ve selected your WordPress contact page template, and have added all your introductory content, all you have to do is hit the blue publish button and view your page once it’s been saved and published.

Like our contact page, you’ll see all your introductory content and your new custom form and Captcha or whatever custom code you decide to use. In my case, I didn’t use a custom form, but I did use custom rich snippet code for our office address. That rich snippet code was giving WordPress a problem so I decided to throw the code into a template and the end result is what you see.

Get A Call Back

Latest SEO News and Tips