Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Our main content area is styled correctly, but the code output needs work. If we compare this basic blog post that we see here to a comp basic blog post--I'll scroll down so we can see one. Let's just use this first Most recent post, that's very clear. So there's our heading, our body text, and comments, and then a Posted in whatever the category is. And now if we look at what we have already, well we have our title. Now we have a little additional information posted on a certain date by whomever, that we don't need to do. So, let's get rid of that.
And then, down here it has kind of a reverse, the Posted in Uncategorized category and No Comments. So, we need to switch those. All right. So we've got a little bit of work to do. For this, let's go into index.php, and I'm going to open it up completely into Code view. So we can take a look at the whole thing. Let's contract this so we get a little bit clear view. As I said before, we're mostly going to be working in what is called the loop. And here you can see this h2 tag here holds in the title so that's good.
But the next section, this meta section has that posted on, and it gives the date and time as well as the author. We don't want that according to our comp. So let's get rid of it. The next section is the actual meat in the sandwich, it's the content. So, we're going to leave that there. And then the following div is this one called postmetadata, and this has some of the information we want, others, we don't. I see, even though it didn't show up on our design because we didn't assign any tags, there is a bit of tag code here that's not in our comp.
So, let's delete that entire line, and now it comes time to reorganize what is posted where. So, I want my comments first. So, I'm going to just grab this line. In fact, let's just grab the whole two lines, and then drag it up so that it's above the Posted in category, and there's a little separator here. I'm going to copy that, and paste it in. All right. Let's save our index.php page.
Go to Design view and hit Refresh, and see how things are looking. All right. So we got rid of the unwanted extra content up here, and we do have our comments. We do have a little odd character that you see here, this double angle bracket. So let's go in, and take a look at the code one more time, so we can get rid of that. And that double angle bracket is this character entity that you see here that is the » so let's remove that wherever we find it, and there are three different places.
This little comments function that you see here comments_popup_link actually is very clever. If there are zero comments, you see the text No Comments, if there is just one, it will show 1 Comment, and if there's more than one, it will show however many comments there are, that's that little variable sign there, and then the word Comments. So, very neat. So it covers all the bases. Okay? Save the page, Design and Refresh. Our little unwanted character is now gone. Now, the only other thing that I spot as I look at this, and I need to scroll the page a little bit just to make sure is it seems pretty close to me between where one post ends and another post begins. And let's take a look at the comp. And yeah.
There is a big gap here. Let's use our Inspect mode to figure out where that is. So, I'm going to go here, and go down, and that's where it is. So, I'll go ahead and click once to turn off my Inspect mode. We'll expand the style sheet, and it's pointing right to main content post with these properties. Let's go to code, and I'll just select that, head back to my Roux style sheet. Now, instead of main content within the section, we're using an article tag to surround all the posts.
So, I'm going to go ahead and put that in, and there's one more wrinkle, the post class is actually attached to the article tag. So, you need to remove that extra space that you see here so that it is all one solid selector. Let's save the page, and then hit Refresh. And there is our additional space. All right. As you've seen in this lesson, it takes a combination of CSS and PHP adjustment to customize your theme's main content area. Now, you're ready to take on the sidebar.
Get unlimited access to all courses for just $25/month.Become a member
58 Video lessons · 61337 Viewers
61 Video lessons · 93540 Viewers
82 Video lessons · 104387 Viewers
56 Video lessons · 107844 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.