Build Your Own Business Website header image

How to Create Custom Templates For Posts

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Part 1 – Create Selector Meta Box

This is the first in a short series on creating custom template styles for posts. Traditionally we think of creating custom templates only for pages. We will be using Thesis hooks and filters to create these “templates”. In this first part we create the template selector box using Verve Meta Boxes.

Video Transcript

Okay and so that’s it for the short, easy questions. Brian recently asked me on the forum how to have a varying… essentially post templates. You know, that in…oh let’s see, let’s just take a look at this here and this is the one that we were working on actually, last week. And if we go to the dashboard and we just look at pages, obviously, everybody’s familiar with the fact that if you edit a page, that you know, you can pick one of these templates down here.

However, if you edit a post, you don’t have a template choice. There is no place down here for you to choose, for example, a no sidebars template. And that’s currently because the way Thesis works is that all templates, all single posts are displayed exactly the same way. In really, not even a template, in the standard index style. And so, there’s no facility for choosing a template for post.

As it turns out, that’s the way it is in WordPress. WordPress has a default behavior of you know, using the same style of template for every post and that’s its ordinary behavior. And what you do is if you’re going to have it different in your pages, it’s called single.php.

And so, there is a plugin that you can install that gives you the opportunity to create custom posts or custom templates for your posts that you can select like this. And that’s actually what I use on my site here you know, I have a couple of different templates that can be selected from a post and you know, under Post Templates, you can pick the default template, a no sidebars template or a video template. And I accomplished this with a plugin and then with a hack. It’s not really a hack but it’s just a system that does not comply with the normal Thesis behavior. That is, it won’t survive an upgrade. Every time I upgrade Thesis, I have to fix these templates because they don’t transfer well.

Okay so what I’m going to teach you is a way of not doing it this way but instead, using a system that will in fact, transfer with Thesis or will survive upgrades of Thesis by using standard Thesis conventions. And so… in fact, I’m calling it “How to Create Custom Templates for Posts in Thesis” but what this really is is how to select different configurations for posts by simulating selecting custom template. We aren’t actually going to be creating a custom template or selecting a custom template. What we’ll be doing is simulating creating a custom template.

And so, what we’re going to create here then is the ability to select a style of post display from the Post Edit screen. It’s similar in concept to selecting a custom template and you’ll be able to choose between the default post template style or a no sidebar style or a split sidebar style. The split sidebars will put sidebars on either side of the content or a minimalist style that will have no sidebars, no header, and no footer. That’s what I’m going to show here today, how to do that.

And I just want to make it clear that we’re using a useful fiction. We’re talking about this as if we are creating custom templates but in fact, we’re not creating a custom template. We are simulating custom templates for posts by using Thesis filters and hooks. We are going to call it selecting your custom template but it’s important that you recognize that the terminology is only useful because it simulates the behavior, not because we’re actually doing that.

So the steps in this process will be first to create a template style selector meta box and then we’re going to create a function that removes sidebars from the post. Next, we’ll create a function that adds the custom body classes to the appropriate post and then we’ll create the function that adds the appropriate sidebars depending upon which post style we choose. And then finally, we’ll create the function that produces the minimalist style. So these are the steps we’re going to go through next.

And so, the first step is to create the template style selector meta box. Now you guys have probably seen me do this a few times. What we’re going to do is we’re going to use Verve Meta Boxes plugin and we’re going to create a new meta box, we’re going to assign it to posts, we’ll create a drop down list inside of it and then we’ll create the list items that we’ll use to make the selection with.

So let’s do that here, going back to this, we’re going to work on this site here, this where we’re working on this integration of jQuery. And we’re going to go to the dashboard and go down to plugins and Add New… that was users… go to Plugins and Add New. We’ll search for Verve Meta Boxes and we’ll install it. We’ll activate that plugin and then down here, it’s not at the bottom anymore. Where is it? Verve Meta Boxes under Tools, we’ll select that menu and we’re going to create our new meta box.

Now we are going to call this meta box… let’s see, post style templates. We’re going to make it apply only to a post and we’re going to create the box. And then we are… actually, we’re going to rename this if we can. We’re going to rename this, select the post style template. Okay, update that box…oh, it didn’t work. Oh well.

Actually, that’s fine. The nice thing about giving it a full name here is that when you see it, you can use that name essentially to give directions. So the next thing we’re going to do is choose our field and our field is going to be a select field and the field name will be post style selection. And the field description will be select the post style from this drop down list. We’re going to add the field and now, we’re going to add our values here.

And so the values are…click here to add the comma to separate the list of values and then hit enter to save. So we’re going to click there and the first one is going to be default and the second one will be no sidebars and the third one will be split sidebars and the fourth one will be minimalist. So those are the 4 choices that we’re going to have and then we hit enter.

So now we’ve created our post box and our style. We’re going to go ahead and update this box and then we’ll come over to our posts and we’ll look at our Rainier Sweet Cherry. And now, you can see post style template. Now if I had successfully put in you know, select the post template style or the post… yeah, select the post template style here, we’d have had a nice little bit of instruction for us, right? But we don’t. We do have this little thing where if you hover over it, it says, “Select the post style from this drop down list.” And now, you have default no sidebars, split sidebars and minimalist and I’m going to select no sidebars for this and go ahead and say update.

Just so that it’s clear that we’ve done something here, if we scroll down to the bottom and look under… we have to appear under Screen Options. We need to show custom fields but if we come down here under Screen Options, we’ll see that we have post style selection, now it’s called no sidebars. We’ve added that piece of post meta to the post.

Okay so that was step 1.

0 Comments… add one
0 comments… add one