Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
At this point in the course, there's only one type of content left we have yet to work with, and that is the single page. And here you'll reap the full benefits of the dry development principles we've been applying throughout the course, because if I go to a single page here, let's say this sample page. You'll see that apart from the title jamming up against the main menu, the rest of the page is already complete. All our content has beautiful typography. When I scroll down we have a regular comments section. The side bar appears as it should.
And everything is responsive. The only things that are missing are the featured image function at the very top, and also, we need to deal with this title jamming up against the menu. This is happening because on a single post, we have the category display at the top, and the category display bumps the title down. So now, because we're on a page and it doesn't have categories, we need to add some extra styling just to move the title on single pages down. Now, you'll remember from previously in the course that when WordPress outputs something into the browser,.
It always appends a class to the body tag, telling you exactly what type of content this is. So in the case of a single page, the body tag has the class page on it. That means, we can easily target this entry title here by also targeting the page. So we can create a new rule, targeting page, entry title, and then make some extra margin at the top. In the code snippets I've prepared that rule for you. It's just .page .entry-title, and then the margin at the top of 0.7 ems. So I'll copy that out, go back into style.css, and here I want to find posts and pages, so 10.0.
And here I can choose exactly where I want to place it. So I'm going to place this rule directly under the typography section here, entry title, and bump it down because I already have the entry title as the first rule. Reload the page, and the title is bumped down. So now the typography layout looks correct. The last thing I need to do is add the featured image in. And you'll remember, we already have the code for the featured image in a separate template. So in content-single. We entered in the featured image right up here, and now that we're working with a page, we're going to work with content-page.
All I have to do is go to content-single. Copy out the code for the featured image. Go to content-page, and add it in, in the exact same place. Now I'll save content page, and go back and reload my page. And of course nothing happens because I now have to apply a featured image to my page. So I'll go and edit my page, scroll down and find a featured image. So here I'll pick a random image, maybe this one. Update my post, view the page. And that's it.
Now our pages are styled exactly at the posts, minus the meta content in the categories. And, in fact, our entire site is now fully styled to function the way it's supposed to. Anything we do from here on out will be extra features that add to the value of the theme itself.
Get unlimited access to all courses for just $25/month.Become a member
58 Video lessons · 66481 Viewers
61 Video lessons · 96915 Viewers
56 Video lessons · 110600 Viewers
82 Video lessons · 105186 Viewers
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.