Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
So now if I do a little comparison and see where we're at with our blog_comp. Well, the first thing is I've got a title, Roux Academy Blog, to put in that I don't have in index.php. So, let's go into the actual index.php page. I'm going to open it up into Code view so you can see what we're working with here. The index.php page is really the centerpiece of the entire WordPress site, and it acts as pulling in the various parts.
The first line we see here is a WordPress function get_header, which brings in the header page. Then after that, there is a div with an id of contentWrap that holds all of the content for that main area. So, we also have another div within it for content, and then here's a section with a series of PHP code blocks. This is what's known in WordPress as The Loop, capital T, capital L. It's a very important aspect of WordPress and much of the work in WordPress has to do with the loop.
In this case, what we want to do is go actually right above the loop and put in our static content, which is an h1 tag, with the text Roux Academy Blog. And let me close off the tag using code completion by putting in an angle bracket and then a forward slash. Now this will appear on all of our pages that rely on the index page, which will be a good number of them. Now, you might recall from earlier lessons the difference between working with styles.css pages and other PHP pages, and that you always have to save it in order to see the changes.
So, I'm going to go ahead and save this page, and then go to Design view, and hit Refresh. There is our new h1 tag. But it needs quite a bit of styling as we see here. So, let's use our Inspect mode, go to just that one tag. I'll click once to lock it down, and it looks like we have article h1 rule. Let's go to the code. And this time, I'm just going to copy the whole thing, article h1. Now, that's copied, let's go back. We want to go into our Roux style sheet.
I'll go down to the bottom here. Since this is in the content area, I'm going to put it in between the content rule, and the widget area rule. So I'll paste that in. And instead of article, let's change article for #content. So that should style it. Let's refresh the page and see how we do. All right, looking good. Working our way down the page, we come to the post headings next. And more specifically, the link states for these headings. In WordPress, it's a standard practice for post titles to link to a single page for just that post.
So, let's grab the basic CSS rules for anchor tags, and there are take from the comp and paste them into the theme.css. The anchor tags are found pretty early on. I did a little investigation earlier, and I happen to know that they are on line 97. So, Dreamweaver has a handy tool for going to specific lines, and you can find that under Edit > Go to Line. It will bring up a small dialog box, and I'll put in 97 there.
So, here's my anchor tag as well as a hover state rule. So I'm going to go ahead and select those two. Let's copy them and head on over to style.css. I'm going to place these because they're pretty important and they kind of rule over much of the site. I'm going to put them up near the top here after the body tag. I'll paste those in. And again, we don't need this path correction here, so I'll remove that. Now, let's refresh and see what happens. Well, it looks like we're not quite there because at this point, we've got a color: white that is taking effect.
So it's going to have to be something else that overrides that and changes the color. This color: white is probably used also, it is used over here. We can see that, that's the case. So it's worked for the sidebar, and there's our little diagonal rule there. That looks good. But the main area, the area that is in the blog_comp that is defined by the article tag, has a different kind of hovering state. So let me just click on here. And when I do that, I can see the article a:hover appears. That's perfect.
That's what exactly what we're looking for. And above it is article just article a. So, let's go to code using that, and pick up those two rules. And you can see that it changes the color there. So, we're going to put that right next to our other anchor tag rules. Let's hit Refresh again. Now, we have our blue anchor complete with the yellow hover state, and it's very faint. There's not a whole lot of contrast that we see here against the white.
But it is there, you can see the diagonal pattern. So that's working well. With the main content area styled, you're ready to make any necessary changes to the actual WordPress postcode.
Get unlimited access to all courses for just $25/month.Become a member
58 Video lessons · 65679 Viewers
61 Video lessons · 96444 Viewers
56 Video lessons · 110191 Viewers
82 Video lessons · 105083 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.