How To Create Your Own Page Template for Wordpress

I have a Wordpress-based travel blog, New York Traveler.net, and I utilize Google Maps as an interactive method of mapping my travels and for easy reference. Google Maps are great because you can do so much with them, and you can customize the size you want to put the map on your blog. So I put my New York Travel map on a separate page on the blog. Yet I was only able to put a small portion of my map on the page, because all my blog’s pages have the basic blog’s template header, footer, and sidebars. I wanted to keep the header and footer, but I didn’t want the sidebars and I wanted the map to expand the entire width of the page.

I only wanted to have this style for just that one map page– all my other pages I still wanted the sidebars. There was nothing in the Wordpress options that enabled me to change the page’s style for only this one page.

I am pleased to say that I figured it out! It wasn’t terribly difficult (trial and error). It helped immensely to do a little research. I’m hoping that this technique can help you somewhat. Obviously, unless you have the same Wordpress theme that I have, your results may differ. But the basics are very similar. If you are comfortable with doing a little coding, this will come easy.

I’m going to direct you first to this Wordpress tutorial about Pages, from their documentation site. Read it and understand it.

Second, read this tutorial I did on how to add text to a category page. You might not be doing this exact thing, but the concept is pretty much the same. Because what you are going to do with Pages here is you are going to create a new .php file with code in it, and upload it to your server. It’s the same general idea, and I think my tutorial will give you that added edge of know-how that may help you avoid a slip-up later. It’s brief and concise, so check that out.

I am assuming that you have some knowledge of working with coding and that you are familiar with making pages in Wordpress. Let’s get down to business.

When you write a page, you have the option of choosing a different template to display it. Look for yourself. Go to your Wordpress dashboard and choose “Write” and then “Write Page.” Look in the sidebar on the right. Do you see a choice that says “Page Template”? There’s a dropdown menu there. I had some things in there, but they didn’t do anything. Once we create and upload our special page template, it will appear in this dropdown menu; so remember this.

I’m going to give you instructions on building a new page template leaving the header and footer intact, just as I did with mine. Because there are so many, many ways to design a page, I’ll leave all those design decisions up to you! I wanted to retain my blog header and footer, and just remove the sidebars and widen the post box. There are certainly ways to remove or add whatever you want. But that’s a whole ‘nother ball game! For this tutorial, I’ll just show you how I made my own page template the way I wanted it, and you can take the information from there and explore your other options. The Wordpress forum is a great place to start for more information.

OK, so… open up Notepad (or your favorite code editor– I like Notepad Pro+). Copy the following code:

<?php
/*
Template Name: Travel Map
*/
?>

…and paste it into the Notepad document.

You are going to change the Template Name to something you yourself choose, but before you do, go to your Wordpress Dashboard, to your Theme Editor page (”Presentation” and “Theme Editor”). Here’s hoping your Wordpress theme has something called a “Page Template.” It might be titled something different, but it should have the “official” name “page.php.” This is pretty universal for Wordpress. Click to view the page.php file. This is what mine looks like.

Copy all that information and paste it into your new Notepad document underneath the code I had you put in it already. Save the document and name it something you’ll remember– just be sure to name it as a .php file. For example, I named my page Travel Map.php. This is the special template I am using for my Travel Map. Whatever you name it, make sure it is unique. DO NOT name it with a name that may be another Wordpress file! Even if you have to name it something weird like Snarfer.php or Special page template.php, that’s fine. It will easier to locate later, too. Be careful and be sure you don’t name it after another Wordpress file! It could mess up your files.

Now, go back to your Notepad document and get rid of the “Travel Map”– unless you really want to name your new Page template that, lol. Give it that name that you have chosen

This here:

<?php
/*
Template Name: Travel Map
*/
?>

should now be something like this:

<?php
/*
Template Name: WHATEVER-YOU-ARE-NAMING-YOUR-PAGE-TEMPLATE
*/
?>

So you should have your Notepad document saved as a unique .php file, with the information you copied and pasted from the regular page.php file. If you were to upload this file and use it, there would be no difference between this and all your other pages. Let’s change things a little. First, here’s an example of the file I had:

With my own Travel Map page template, I wanted to keep the header and the footer, and just remove those sidebars. This would enable me to fit in a huge Google map. All I did was change the code. Look at the image below.

You can see that all I changed was

<div id=”primary-content”>

to

<div id=”content” class=”widecolumn”>

You are almost done! Save this Notepad document and upload it into your Wordpress files. This file needs to go into your Theme folder, whichever theme you use. For example, I used my FTP program and put this file in public_html/wp-content/themes/unamed-one021-b. The folder “Unnamed-One 021-b” is the name of my theme; funny, huh? I love the theme despite it’s weird name.

OK, once your file is uploaded, you can go back to your Wordpress Dashboard area. Go to your “Presentation” and “Theme Editor” page and make sure your new .php file is listed there. If it is, all systems are go and you can start using your new special page template! Go to “Write” and “Write Page” and check the dropdown menu on the right. You should see it there. Choose that, and your new page will have that new design!

This coding that we did removed the sidebars and widened the post area. You can see the live demo at work– go to my blog’s home page here and you’ll see the sidebars. Go to the special Travel Map here and you’ll see no sidebars.

For additional coding and design help, refer to the Wordpress document about pages that I mentioned earlier. I found it helpful and no doubt you will also.