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 1 – Add Post Navigation to the Home Template

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Good morning everybody and welcome to Lesson 8 of our How to Create a Responsive Skin for Thesis Class. Today, we are going to be creating the archive template and the single post templates at which point we’ll have most of the templates completed. There’s one last thing we need to do to our home page template though before we are finished with it and that is, we need to create the post navigation for it.

Add Post Navigation to Home Template

This is the home template as we left it last week and we only have 4 posts showing up here so it’s not immediately evident that we’re missing the post navigation but if we had 20 posts and we had come to the end of our maximum number of posts shown on this page, we wouldn’t have links down here taking us to the previous posts. So that’s the part we’re going to add here now and we do need that also for our archive page and for our posts page. We’re just going to go ahead and dive right into that first.

We’re working here on lesson8.thesisresponsiveskin.com and I have the Lesson 8 skin activated so we’re just going to start off then inside the Skin Editor itself and we’re going to start at the home page. Inside of our Content Area, in our Content Columns at the bottom of our Main Content, we’re going to add Post Navigation and we’re going to start with that Post Navigation by adding a wrapper.

So we’ll just create a container and call it Post Navigation and I’m going to drag it up into the Main Content column and then below the WP Loop. I’m going to give it the class of post_nav and we’ll leave it just like that and then you see these things over here, the Previous Posts Link and the Next Posts Link, this is what we’re going to be moving over.

Difference Between Home and Single Page on Post Navigation

Now, you’re going to notice that once we get to the single page, this is slightly different. Instead of Previous Posts, it’s Previous Post and instead of Next Posts it’s Next Post. These look very much the same and we’re going to configure them the same but they’re actually different WordPress functions.

Review the Next and Previous Posts Link

We’re going to grab our Next Posts Link and drag it into Post Nav and Previous Posts Link and drag it into Post Nav and save our template, come on over to our Home page here. We can’t see what it looks like because we don’t have enough posts. So in order to make it clear what we’re doing here, I’m going to change the WP Loop so that it only shows one post on the home page. And now if we refresh this, we’ve got our blog page and we’ve got a Previous Posts Link down here and if we click on it, we’ll have a Previous Posts and the Next Posts link.

Create a Background Style Color for Post Navigation

Just to refresh your memory what this is going to look like. I’ll open up the PSD file that we’re working off of and it’s going to look kind of like this. I’m not going to have the pagination show up like this so it’s just going to go Next Page and Previous Page but we will wrap it in a gray box, we’ll have the blue labels and that kind of stuff down there.

We’ve saved that template and we’ll come over to our CSS and the first thing we want to do is create a new background style color as a variable. We’re going to create a variable, we’ll call it Input Background because we’re going to use the same thing on our comment form and that kind of stuff, Input Background Color and that is going to be $bc8.

Create Post Navigation Package

We’re going to use this color and create that variable. Now we have that variable available to us and we’re going to create a post navigation package and that’s going to be a Single Element Style package. We’ll call it Post Navigation, post_nav, the selector is the same class we give it before, post_nav.

In our options, we’re going to set a background color to be that $bc8 and we’re going to give it a border, 2 pixel border, it’s going to be solid and the border color is going to be $bc5. I’m going to put $bc5 and we’ll double check it, $bc5 which is the background color for the heading of the main widget area.

We’re going to add some padding around it. We’ll just make it 10 pixels of padding everywhere and I think we’ll call that good for now. Let’s just see what it looks like. We need to add the &post_nav to that. What did I do, and $post_nav and $post_nav. There must have been an extra space or character something like that in there.

We didn’t get our color quite right here but we do have everything else so let’s go back and look at what did I put in there for the color? I see, pardon me. I put that dollar sign in there, we don’t put the dollar sign in the reference like that so save and now we should be pretty good. I guess we want a bit of bottom margin for this too so let’s give a bit of bottom margin.

The other thing we want to do is make these like our submit buttons, like this color here so we’re going to add the submit class to this so actually, we’ll do that first. We’ll come over here to Post Navigation and we’re just going to add submit to our class name. I guess we need a bit more top and bottom padding and I want the Next Post to float over here to the right so let’s just double check that we know what that is called.

That is span class=”next_posts” so we’ll use that to float it right, come back over to CSS, go down to our Post Nav, .next_posts and we’ll just say float:right. You know, let’s just add .post_nav to that as well to make sure we are clear on what we’re doing here, so .post_nav .next_posts{float:right;} and then I think we should add a bit more padding to the top and the bottom so we’ll go 20 and 20.

That looks fine except I forgot the bottom margin for this and we’ll give it a bottom margin of 100%, that is $p100, save. Save the CSS, there we go. So we’ve got our Post Navigation set up properly now on this and let’s just make sure we save the CSS and let’s take a look at it here. So Previous Posts, Previous Posts, Next Posts, perfect. And that is our Post Navigation. Now with that done, we’re going to create our archive template.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment