WordPress

Creating custom post templates for your blog is a good way to keep your posts interesting. Some notable writers with lots of custom templates are of course Jason Santa Maria and Andrew Rossi who writes for Design Informer. Each post has its own look and feel, and I have to admit I probably read more of their articles just because of the design , regardless of if I am interested in the topic. I will now take you through my first experience with creating custom WordPress post templates.

The Plugin

For this to work you will need to install a plugin in your WordPress Admin. Go to plug-ins/add new and in the search box type single post template. Select it in the list and click install. When prompted activate the plug-in and we are ready to go. If you want to install it manually you can get it here.

This plug-in will allow us to select custom post templates after we create them from a drop down box on our post creation page. There may be another way to do this but I searched around and this was the only thing that I could find.

Getting Started

I like to start this process by writing all the content that will go into the post before hand. Not only will this help you with the design, but it will also help you with layout. Once you have written your article you can wire-frame out your design and then bring it into Photoshop.

Next I like to take my design and mark it up in simple HTML and CSS, this way you have all the markup for your custom post ready and all you have to do is copy and paste into your WordPress template files. For me this is the easiest way to handle it as marking it up in your WordPress template files can become tedious.

Once you have an HTML version of your custom post you are ready to start creating the new WordPress files. If you have worked with WordPress before, you know that the template files for your blog are broken up into 4 or 5 main files. These files are header.php, footer.php, sidebar.php comments.php and your single.php file. Since the layout for the post I am creating is completely different from my blog layout I will be recreating most of these files.

Readying The Template

Currently all of the files in my themes root are custom, so to cut down on the confusion I will use the blank theme that I always start out with. You can download it here if you would like to use it.

Next we are going to copy and rename the files we need to modify.I created a new folder in the root of my theme called single_custom. This is where I am going to store all of the new files.Copy and paste header.php, footer.php single.php and if you are going to need to re-customize the comments section then you will copy comments.php as well.

REMEMBER NEVER SAVE OVER THE ORIGINAL FILES IN THE ROOT. I renamed these files to wp_custom_single.php, custom_post_header.php, custom_post_footer.php and custom_comments.php. I am not using a sidebar in my custom post but if you want to include yours you can copy that file as well. Now you will need to move wp_custom_single.php back to the root of the theme so that the plugin can find it.

Custom Single

Once you have renamed your files it is time to start editing them. We can start with wp_custom_single.php since this is where most of the work will be done. The first thing we need to do is add a snippet to the very top of this file above the get_header() include to tell WordPress that this is a custom post file. Paste the code below into the top of the file. /p>

<?php
/*
Single Post Template: wp_custom
Description: custom post template for tutorial.
*/
?>

Now when we go to create a new post we can select wp_custom from the drop down on our post creation page. This way once it is finished we can reuse it over and over again. After that has been added to the top we need to include our custom header, footer and comments template.

Lets start by including the new header and footer. WordPress has its own way of grabbing the header and footer. There are 2 very simple lines of PHP which include these files for WordPress, get_header() and get_footer(). Since we are not using the default we are going to have to replace these lines with some simple PHP includes. Delete the get header line and replace it with this code.

   <?php include(TEMPLATEPATH.'/single_custom/custom_posts_header.php'); ?>

Now do the same thing with the get footer line but use this code.

 <?php include(TEMPLATEPATH.'/single_custom/custom_posts_footer.php'); ?>

That part was not too hard now was it.

Next we will add our custom comments.php. For one reason or another you cannot use a php include statement for this file. I learned this the hard way after an hour or so trying to debug why the comments didn’t work in my new template. Luckily WordPress does not make it too hard to add custom comments either. In you custom_single.php file try to locate the line that says, comments_template(). Once you have found it just paste the path to your custom comment form in the parenthesis like below.

    <?php comments_template('/single_custom/custom_comments.php'); ?>

Custom Header and Footer

Now we will work on the header and footer files. Open your custom header file so that we can add the new markup to it. There is some php in the header that will take the place of some of the static elements in your HTML file, such as title and meta tags. Just paste your markup around these as you need to.

Copy and paste from your HTML file what would be contained in the head of your page from your HTML into the new header file.

This will generally include the !DOCTYPE declaration, title tags, links to your CSS and Javascript and your navigation (If you have it for your custom template).

The footer is not nearly as complicated, you can probably copy and paste it straight from your HTML document into the custom_footer.php file. Don’t forget to add you analytics if you are using any.

If you want to keep your header and just create a custom post area Chris Coyier just wrote a great post on it here. His method will allow you to import your custom stylesheet into your header.php, this way you are not running a bunch of unneeded styles on the rest of your site.

Adding the Content and Style

The template files are done for the most part. You will have to do some tweaking once you have your layout in WordPress as some extra markup will be added to your design.

Go to the WordPress admin and create a new post. Copy all the content HTML from your HTML file and paste it into the HTML tab in the post editor. Below the editor there should be a new section called single post tempates. In it is a drop down box which should contain your new post template. Select it and save your post.

Now we should add our CSS. Copy your CSS file into the CSS folder in your templates directory. Make sure that it does not use the same name as your sites CSS file. I named mine custom CSS. Add this to the CSS folder in your themes root and link to it in your custom header file if you have not already done it.

If you are anything like me you will probably have to go back and style the comment form at this point because you did not have it in your original template.

Another option would be to include the footer over the comment form so that you can use the same form the rest of your site uses.

I wanted to try something new with the way my comments were displayed so I used a Jquery plugin called masonry so that I could have 2 columns of comments and it would not matter how long each one was. The result is total anarchy, but it does give it an interesting look.

Conclusion

I am not gonna lie when I started writing this article I thought that the process was going to be a lot more simple and straight forward. As I dug into this project I came across many things that I had totally neglected. (Mainly the comment form).

Once I had worked out all the problems I was able to go back and rewrite this tutorial in a more sensible manner. The process was chaotic but the result has been refined into the steps I will use next time I create a custom post.

All in all if I had to go back and do it all over again I would have planned better. I would defiantly have worked in the blogs comment form and layout into the original design somehow instead of redoing the whole thing.

I hope this guide will help you to avoid the pitfalls I had while doing this. It was a great learning experience. Now leave a comment so you can check out the chaos in action