How To Create A New Template for A Wordress Site

Every so often you look for ways to improve the look and feel of your WordPress website. Other times you want to make things easier on yourself. Creating a new, unique page template to use in WordPress is not only easy, but can be extremely helpful.

For instance, one of our recent clients uses a lot of different analytics. Some of the analytics code is site-wide, while others are unique to certain pages on their site. What we wanted to do was be able to have the unique analytics code show only on certain pages. The simple solution would be to put the code in the Header.php file, right? Not so fast. When embedding code into the Header.php you ensure that this code will run every time a page is loaded, no matter what page it is. This is because WordPress uses the get_header() function to call the Header.php file. So, what will happen is your analytics will be completely skewed with bad data.

Another fairly simple solution would have been to embed the code in the pages themselves just using the content area or a custom field. This is probably fine if you only have a handful of pages to embed the code on, however, there were 50+ pages that needed this, a terribly time consuming endeavor.

Our solution was to create a unique page template for these pages. This way we could create a conditional statement in the Header.php file that would show the correct analytics code based on which template was being used. This way all the new template pages will show the proper analytics code while all others will show something else; this also makes it easy to add new pages to this area or category and easily use the same analytics code without manually adding it each time. In order to do this, we must first create the template.

In this instance, we basically cloned the Default template which was being used for the specific pages we wanted the analytics for, and gave it a new name.

Ok, without any further ado let’s jump in to creating your new WordPress page template.

1. Open Up A Text/Code Editor

Using a trusty text editor for coding can help you not only separate your files and organize better, it can also notify you of problems with your code. Two of our favorite text editors are Sublime Text and Text Wrangler.

Here we are using TextWrangler.

Text-Wrangler

2. Give Your Template A Name

Of course, you always need to start your document out with a left angle bracket and ?php as this is the primary coding language for WordPress. Next, give your template a name. Here we have simply used a commented out section to describe the template, and named it Test.

Test WordPress Template Title

Now, this doesn’t actually do anything in the grand scheme of the code. Basically what this is doing is allowing us to know which template we are looking at and for what purpose it was created or being used.

3. Add Your Header

Every WordPress theme includes a Header.php file that houses your header functions and styles. You must call this header into your template in order for it to show up when you use the template. You do this by adding the get_header() function. Like so:

Get Header Screenshot

4. Add In Your Unique Template Code

Whether you are mirroring another template (as we were), or you are creating a whole new custom template from scratch, this is the time to add in your code in the template. This may include navigation, listing posts, images, etc etc.

Wordpress Code Template

5. Add Your Footer

Of course, no website would be complete without the footer. Similar to your Header.php your WordPress theme should also have a Footer.php file, which is called at the end of each template. This is done with the get_footer() function.

get Footer Screenshot

6. Save Your Template

Perhaps one of the most important aspects here is to save your template the correct way. You’ll want to save your template with a file extension of .php. For instance, Test.php. WordPress will automatically add the word “template” to your file name once you upload it, so no need to add that in unless you want to.

7. Upload Your Template

Using FTP, upload your new template file to site. Do this by logging into your site via FTP and uploading the file to your main theme file. This is usually found in wp-content->themes->theme name.

8. Test Your Template

Once you have successfully uploaded your template you should see it in your list of templates in your theme file. Now it’s time to test the template. Create a new page in a Draft status. Go to the template dropdown on the right hand side and you should find your new template in the list. Enter in some content on your page and give it a preview to see how it looks.

Pro Tip: If you want to test your new template but don’t want to do it on a live site, you can install a local version of WordPress on your computer and upload your template there. This is an option for more advanced users and you should read Running A Development Copy of WordPress.

Get A FREE Website Consult

The Latest

Recent Posts