Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now that were done styling all the content that can appear within the content section of our single post page. We scroll down and see that there's one more item that looks really off from the rest. It's this post navigation. You see in most WordPress themes you have post navigation. That allows you to navigate to the previously published post, or the next published post when you're on a single post, and it displays down here. Right now it looks completely off from the rest of my design. If I look at my actual design, you'll see here I have a line and then it says, Previous Post and Next Post.
With the titles of the post nicely bolded, and then there's another line. So this clearly separates the navigation from the rest of the content. But if I look at the existing navigation, you see instead of, previous and next, we just have an arrow. And the font is all wrong and it's not really separated. So here I need to do some work to make the navigation match my design. If you remember back to when we started working with a single post template, you may remember that inside the loop, I said we have first get template part that targets content-singledoc.php.
And then we have a couple of the functions including the post navigation. So here we have the function that creates the post navigation, and now we can use Netbeans to navigate directly to that function, by holding down ctrl or cmd, and clicking on the function name. And this takes us to the function that displays next or previous post. Here again we have one of these php functions that does a bunch of work for us where we only need to change the output. So this function goes and finds the previous and next posts and places them into variables, called previous and next, and then it displays some html.
As part of that html, you get this next and previous links that are displayed. And this is what we actually want to change. 'because if you look closely here, you see this is the divider that is wrapped inside, and within here, we have a span, that has the arrow. So this is the left arrow, and here you have the right arrow. And then it says, Next post link, and Previous post link. What I want to do now is create a new set of markup. So instead of displaying this single line with the arrows, I'm going to display two lines, and I'm going to have the top part be just the divider.
I want the actual post title to be an h1 heading. And I can do that simply by changing the markup within the previous post link and the next post link functions. If you go to the code snippets for this movie I've prepared that markup for you. So here I'm just going to copy it out. Go back into Netbeans, and just replace these two functions with my code. And if you look closely you'll see that this is pretty much the same. The only thing I've changed is, I've added new markups. So here we have div, it also has the class nav previous, and within that div we have another div called nav indicator.
The nav indicator is where is says, previous post and next post. And then, in addition, we have an h1 that displays the link, so that would be the actual link to the previous or next post including the title. Now I can save this first edit. And go back to my browser, and see if the output is correct, and it is. Here we have the previous post, and next post texts, and we see that the styling from underscores already separates them left and right. And I also see that my titles are nice and bolded.
And I don't really have to do anything else with that. Now i need to apply some extra styling to make this actually look the way it does in the design. So I'm going to go to my code snippets again and copy out this set of styles here. And here you'll see that the style rules that I'm copying out actually apply to more than just the post-navigation. I'll explain why in a second. So I'll copy out all of these style rules, go back into Netbeans and openstyle.css. And here I'm going to search for comments, navigation, and here you see we already have predefined styles.
And these styles apply to site main comment navigation, paging navigation, and post navigation. All three of them. And what's happening here is there's several different places where navigation can appear. So what I want to do is make sure that all of these navigation items on all the different pages have the same overall look. So I'm going to remove these three styles, and replace them with the ones I created. And then we can take a quick look at them. And you see all I'm doing here is setting the same font size, and font family, and font color for all the navigation on my entire site.
So, I'm not actually saying anything about the borders or margins or anything like that. I'm simply changing the positioning and changing the font families, so that all my navigation will now look exactly the same. Finally, I'm setting the font weight for the h1 tag, so that would be the actual post title, to 900, which is the heaviest font weight. Now I can save my styles and go and reload my page again, and you'll see the styles have changed ever so slightly, and my content has now shifted in under the rest of the content.
So now we have proper alignment. But now you see a bit of a problem, and that is, right now, the navigation doesn't actually work. If you tried to click on it, you can see nothing happens. And that's because, the content has been covered by the comments. And that's because of how we're aligning it. We're using a float left and float right, and these containers are not clearing properly. I also see that this still doesn't match my design exactly. You'll remember that in the design, there's a line at the top and a line at the bottom. So here, I need to add some more wrappers around my content and then add additional styles to make everything match exactly.
So I'll go back to my code snippets, and scroll down. Here you'll see I have some alternate code for the template tags function. So here I'll copy out the code. And go to template tags, and I'll replace the entire nav tag here. The only thing that's different about this new code is that I've added this divider that says, Post Nav Box, and it clears so that it pushes any other content further down. The reason why I wanted you to copy out all of it, is so that you don't accidentally make a mistake or put the divider in the wrong place.
It's just easier to copy the whole thing. So, now that I've added this additional divider with a new class, I also need to add an appropriate style to go with the class. And it's this divider I'm going to use to add a border at the top, and border at the bottom. I'll go back to style, and then right down here underneath nav previous h1, I'm going to add a final CSS rule. And it's this one that targets post navbox. So, I'll copy that one, and paste it in. And you see, this style adds padding on the top and the bottom.
It adds a margin on the bottom of 4em's to push the comments really far down. And then it adds a border on the top, and a border on the bottom. So when I now save my style, the style will target this new divider that I added around my navigation. And I'm going to reload my browser one more time here. You will see now the navigation looks exactly like it does in my design, and I can now click on the links again. And since my navigation is styled to fit within the framework of the rest of the site, and I'm using the existing classes that were already there.
This is now also fully responsive. So when I resize my window here, you will see that just like with everything else, the post navigation is fully responsive. And changes depending on the width of the window.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.