This is a semi-advanced WordPress tutorial in which I will demonstrate how to make WordPress work with Post Templates in a similar fashion as it does with page templates by default. The concepts covered in this tutorial will include:
- Page templates
- Custom post templates
- The get_header function
- The body_class function
- Customizing the top main navigation menu
- Adding Post Templates in WordPress
Understanding Custom Page Templates
If you are not familiar with creating custom page templates, you should become familiar with them before learning to understand Post Templates. The part of this tutorial that deals with post templates assumes that you understand the basic concepts of page templates before you read it. The general concept for post templates is nearly identical to that of page templates. If you already understand page templates, then this tutorial will be much easier for you to follow and understand and if you don’t, I hope this tutorial will help bring you up to speed. However I only touch the surface of page templates in this tutorial.
If you have ever worked with making custom WordPress page templates, you no doubt have figured out how handy they can be when it comes to customizing a WordPress website. They allow you to change the look and feel of a single page or a group of pages by altering the code of the existing page.php file or by creating a fresh template file. Whether you alter the existing page.php code or start from scratch, the first line of your template file always needs to start like this for custom page templates:
/* Template Name: your_template_name.php */
…where “your_template_name” is the name of the PHP file you created, reflects the content and can be whatever you want it to be with the exception of some reserved file names of course. What you put after the template name and comment tags is pretty much up to you. You should simply delete the existing comments at the start of the page.php file if you intend to use it as a template, but be sure to back up the original because it will still be used for other pages of your site. It is important that you leave a copy of it intact. You have quite a bit of freedom when it comes to how you develop your pages, but remember to try to use built in WordPress functions, template tags and other inherent functionalities that come standard with WordPress. Doing so will make your customized pages work better when you are migrating themes and/or updating to more current versions of WordPress in the future.
The Custom Post Template Plugin
You can find and install the Custom Post Template plugin at: wordpress.org/extent/plugins/custom-post-template/
Activating the plugin is as simple as any other simple plugin. Simply download from the link above, then go to your WordPress dashboard, click on Plug-ins then upload it through your admin and activate it. You have probably done this a hundred times by now if you are reading one of our more advanced tutorials.
Once you have installed and activated the Custom Post Template plugin, you can use it very easily in the same fashion that you use and install page templates with one minor difference which I demonstrate below:
Writing your First Post Template
Writing a post template is done just like a page template basically, with the exception of using a slightly different comment at the top of your .php file. Above, you saw how a page template begins. You start a post template like this:
<?php /* Template Name Posts: name of template */ ?>
The only real difference in the two above examples is the addition of the word “Posts” in the quoted out text at the top of the template pages in the second example.
Why use Post Templates?
Some of you may no doubt be asking: why not just use page templates to develop customized WordPress pages? There are several answers to that question. The most general one being: there are several things that posts can do that pages cannot. The fact is that pages and posts are very different in the way they behave, look and feel within the WordPress environment. One example is the way that pages will show up in the top navigation menu of most themes, but posts will not. I did a project recently where I wanted to use a custom page template but didn’t want it to show up in the top navigation bar. Well, I could have replaced the top navigation bar with a custom one, but why do all that work when I can simply add a custom post instead of a custom page and achieve the same results with less work and without disabling the default behavior of the navigation menu? This is true especially because custom posts are very easy to enable with a simple WordPress plug-in. Let’s look at some more reasons why you might want to use post templates instead of page templates. Here is a list of some of the reasons you might need to use post templates over page templates:
- Post templates don’t show up in the top navigation menu as we discussed above.
- With post templates you can create pages with post excerpts much easier by altering the index.php script, giving it a new name and saving it as a new post template page.
- You can also create customized single post pages much easier by simply altering the single.php script, renaming it and saving it as a new post template page.
- With posts, you have much better access to what is often the majority of a WordPress blog’s content.
Those are just a few of many reasons. There are dozens of large and small differences between editing a post and a page that make developing custom post templates a logical argument for many developers.
Further Customization of Post and Page Templates in WordPress
Okay, now you know how to start out with developing your choice of custom post templates or custom page templates. If you want to learn more and discover some techniques you can use within your custom templates, read on!
Customizing Post Templates with the body_class Function
I thought it was important to cover the body_class function in this tutorial because learning how to make significant style changes to a custom WordPress template can be tricky if you are trying to alter an existing PHP file to make changes to a post or page. Using this function, you can choose which classes to add to your body tag instead of using the defaults called within the header file. You can always make up your own classes, add them to the style.css file and included their names in this function as you will see below.
The body_class Function in Action:
The body_class function is normally called from within the header file which is linked to the get_header function (discussed below). The body_class function accepts one parameter, class, which is used to name the class or classes you want to attach to your body tag. These classes can be used to vastly alter the way the page displays. In one case recently I had to change the way the side bar widgets displayed on the page, so I used already existing classes to make them display how I wanted them to on a custom theme for posts using the custom post theme plugin. What I needed to accomplish was just to keep the side bar widgets top-aligned, but the default behavior for post templates was to put them under everything which would make the widgets appear all the way at the bottom of the page with nothing on the top right of the page, so by calling the body_class function like in the following code example, I was able to remedy this unique situation. The possibilities with this function are nearly endless, especially if you make up your own classes and add them to style.css or even a new style sheet. Take a look at the following example of a custom template I did for a recent client using methods described in this tutorial:
As you can see, this is far from the traditional WordPress layout and needed a lot of custom work. That is when these post templates and other methods in this tutorial really come in handy.
body_class Code Example
In the following code example we set the class variable equal to the class names to include and call the body_class function:
<body <?php $class=”customClass1 Class2 class3”; body_class($class); ?>>
The $class variable can be a variable as you see above or an array of classes. It holds the class or classes attached to the body tag. Sometimes, it is easier to just not use the body_class function to replace the classes because to do it correctly, you have to empty the class array first and then refill it with only the class names you want. If you use $class as a variable of class names, they need to be separated by a space. The above way is the correct way to do it, but to keep my job simple, I decided not to go through all the steps to clear the class array/variable and I used this instead:
<body class='home blog logged-in admin-bar two-column right-sidebar'>
I choose those particular pre-existing classes because those are the ones that put the sidebar exactly how I wanted it. Although, technically not correct because I didn’t use the class array as in the previous example, my method gets the job done. I just copied the code from the index.php page as it displays the sidebar the way I needed. Then you call the get_header function like this:
…and it will include the header file you named instead of the default one. Yep, it’s as easy as that!
The get_header Function
The get_header function is another instrumental tool in our design. Since to get the body_class function to change we have to replace the default header.php file with a new one. This is true because the body tag which needs edited is in the header.php file. The get_header function takes one parameter also. That parameter is the sub name given to the new header file. All additional header files take on the form of header-newname.php where “newname” can be any name you want to give it.
How to Control Page Links in the Main Top Navigation Bar
Another requirement for my current project was that only specified links should appear in the main nav. At first glance, in WordPress, it appears as if WordPress just adds all new pages to the top nav with the default theme (and others). Thankfully, WordPress as of version 2.5 allows you to control whether or not new or existing pages are displayed in the top nav or not. If you look on your “edit pages” page in your admin area, next to where the update and publish settings are(in the right column by default), you will find a text link setting that reads “Visibility” which is set to “public” by default. To hide the current page from being shown in the main top nav, simply change this Visibility setting to “Private”. Problem solved!
Troubleshooting the Custom Post Template Plugin:
You are not likely to run into too many issues with a plugin as simple and straight forward as this one, but if you are not using the most recent version of WordPress, here is one error you may run across:
PHP Fatal error: Call to undefined function wp_get_theme() in C:\inetpub\wwwroot\WPSfolder\wp-content\plugins\custom-post-template\custom-post-templates.php on line 164
To stop the above error from occurring in WordPress while attempting to use the Custom Post Template plug-in, upgrade to most recent version of WordPress which was 3.4 at time of writing this tutorial. I also updated to version 1.4 of the twentyeleven theme that I was using just to be safe. After doing these simple steps, the plug-in worked perfect.
Okay, that’s enough for now. I hope you learned something positive while reading this tutorial. Have a great time learning new and exciting WordPress techniques. There are a lot of ways to make your WordPress site unique and interesting, just keep learning new techniques! Please share your comments below, we would to hear from you.