Build Your Own Business Website header image

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.

Lesson 8 – Part 3 – Create the Single Posts Template

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

The next thing we’re going to do is create our single posts template. We’ll spend a good deal of time here because styling the comments and that kind of stuff is actually not nearly as fast and easy as styling the rest of this.

Review Desired Set Up and Styling for the Single Posts Template

Let’s refresh our memory of what we’re aiming at. We’re going to come back over here and this is what our single posts is going to look like when we’re done so we’ll just kind of scroll in here. We’ll have that fake title or the faux title “Blog” up at the top then our typical blog style heading with an image, text, tags, a comment link. And actually, this doesn’t show the Next Post, Previous Post link but that’s going to come in here between this and the comments.

Then we’ll have a Comments introduction and then the comments that we have and a comment form and that’s what this is going to look like when we’re finished. However, if we come and take a look at this right now we’ve got absolutely nothing.

Create the Single Template Using Home Template

The first thing to do then is to create our template. Now, we’re on our single template and what we’re going to do is use the home template again as our basis. We’re going to take Home, copy the template and really, you can see it’s already pretty much there except that we’ve got a Read More tag here and this is an excerpt and obviously on your single posts page, you don’t want a Read More text and an excerpt.

Remove Home Post Box and Create New Single Post Box

We want the Read More button to go away and this should be the full content so we’re going to end up changing our post box. Really, what that means is we’re going to take the post box out of here. We’re going to take our Home Post Box and drag it out entirely.

We’re going to create a brand new post box called Single Post Box and add it. We’ll drag it up into the WP Loop and now, as you might have guessed, we’re going to end up structuring this very similarly to the way in which we structure the Home Post Box last week.

Let’s look at our Home Post Box here. We’ve created a couple of boxes inside, there is Headline Area and an Ending Post Meta so we’re going to create both of those as well.

Create Container for the Headline Area

The Headline Area has a class of headline_area so let’s create those now. We’ll create a new container called Headline Area and we’ll give it a class of headline_area and it’s going to have an HTML tag of header and we’ll just drag this up into Single Post Box. Actually, we should go ahead and do that too, we’re going to make this an article and we’re going to use the schema as an article. Now we have that working.

Add Ending Post Meta

Then we’re going to have an Ending Post Meta. We’ll create another container, add that box and it’s going to be a footer and we need to look up the class here real quickly. Ending Post Meta, it’s just the same thing, ending_post_meta and we will drag that up into the Single Post Box and then drag it down inside of our Headline Area, with the Headline, Categories and Date.

So we need to open up our tray and bring all those things up. We need to bring Categories up and Date. We’ll drag Categories into the Headline Area, our Date; drag Categories into the Headline Area and then we’ll drag Headline into the Headline Area.

Our Headline here is going to be an h1, we don’t need to link the headline article to the page since this is already there. Our Categories, we’re actually going to make it a span and we need to see how do we set this up last time, Posted in: it’s a span with the Posted in: and a comma as a separator. Okay, Categories, Posted in:, comma and then our Date, let’s see what did we say for the date, just on.

So we’ve got our Headline, Categories and Date in our Headline Area and then we had our Featured Image and an Excerpt. What we’re really going to do is a Featured Image on Content though. We’ve already got Content up here so we’re just going to grab the Featured Image and drag it up above Content and then here under Ending Post Meta, we actually put Ending Post Meta in a set of columns so we need to create those columns.

Create Post Meta Columns

First, we’re going to have a container called Post Meta Columns and that’s going to have a class of columns_2. Notice how reusing this CSS that we’ve created in the past makes it easy for us to do this thing. And then we’re going to add another container and this is going to be Left Post Meta and that’ll be called half and then another one, Right Post Meta and it’ll also be half and then we’ll just drag Right into the Columns, Left into the Columns, Columns into Ending Post Meta.

In Post Meta Column 1 we had tags and Tagged as: so Tags, shift drag it into Left Post Meta and it was a span tag and we’ll put intro text and Tagged as: with the comma and then in our Right Post Meta. We had a Read More and our number of comments.

All we really care about here is our number of comments because there won’t be a Read More so we drag that up into there and I think that’s good just like that. Let’s go ahead and save this and take a look at the end result.

We’ve got our regular old page title Headline here, we’ve got our Tagged as: and we’ve got 1 comment. Now, we want that 1 comment to look just like this other 1 comment that is, just like in the Articles when you have this 1 comment and the way we got that was by adding the submit class to this column, I believe.

We’ll come back over here to Content Area, Single Post Box, Ending Post Meta, Post Meta Columns, Right Post Meta and here, I think we’ll just say, submit, save the template and I think we’re good to go on that. Okay, 1 comment, perfect.

Configure Post Navigation

Then we want to put the Post Navigation down here and this is where I said you’re going to see something different because instead of Previous Posts, it’s Previous Post and Next Post and so on. It’s slightly different so we’re going to come down to our Post Navigation.

Actually, we can get the Author out of here and the Edit Link out of here, that’s what we needed and then we’ll take our Previous Post Link and drag it into Post Navigation and our Next Post Link, drag it in.

What we’re going to do here, instead of using the Post Title is we’re just going to say Next Page>> and <>. I guess we’ll just have to rearrange, previous one here first and we do have submit already there so that’s probably just going to work right out of the box, <>.

I think I’m going to say in this case, Previous Post, Next Post but we want the Next Post to float off to the right so we need to add that to it as well. We need to add Next Post to that floating definition we have so we come back over here to Post Navigation and we’re just going to copy this, comma, paste it, get rid of the s there.

Now, they all should be, there we go, Next Page>>, <> works.

Style the Headline Area

Now we’re going to fix our Headline Area here so if we come back over and take a look at what this looks like, come back to this, it looks just like our Home Page does. We’ve got this green color, the white blue green color and then Posted in: with the link to that and then the date.

What we need to do then is take a look at our Headline, I think actually, this is h1 headline so we’ve got headline_area, h1 headline and right now it’s being styled by .post_box .headline and .post_box h1. I think what we’ll do is we’ll reference headline _area and then h1 headline and we’ll see how we do with that style.

We come back over to the editor and back over to the CSS and I think that’s in our Typical Page Post Format, no it’s not Typical Page, I’m almost certain it’s not there. Well, I think this is what we’re going to do anyway. We’re going to copy this, we’re going to say, .post_box .headline_area and then h1.headline and it’s going to say border:none.

Not sure about the padding-top here yet but our color, text color 11 as I recall, $tc11, let’s see how that looks. Okay, we’re getting there. It should be bold and we’ve got too much space here and that space that we have there is bottom margin. We want to make that bottom margin 0 and we want to make the font weight bold.

We come back over to our Typical Post Format and so we’ve got our margin-bottom is going to be 0 and then we’ll just have font-weight:bold. It almost looks like be better off having no padding at the top too, is that right? No, I guess not, I guess there’s plenty of room there. Let’s just see what it looks like, I haven’t saved the CSS obviously.

It still says, “Blog” which is what we want on the posts, scroll down, it’s got our 0 comments, it’s got our tags, it’s got <>, it’s got the 1 comment when there’s a comment and I think, we are ready now to add the comment form to our page.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment