Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
So we are in a great place right now, because we have our finished HTML and CSS template that we finished at the end of Chapter 2 and we just took a tour of the WordPress themes. So we can move that static stuff to this dynamic WordPress theme stuff. That's the plan. Move from one to the other. To do that, we are going to open up both projects side by side in TextMate and look at them both at the same time to do the moving. So I am going to open up the HTML and CSS by dragging the whole folder to the TextMate icon in the dock to open that whole project and open up the theme by dragging that whole folder to the TextMate icon at my dock.
So I have got both of these projects opened side by side. I am just going to arrange them just so, so we can be looking at both at the same time. So we are going to be moving static on the left. Our static HTML and CSS to dynamic on the right. Our WordPress theme on the right. Left to right. We have got a little bit of prep to do before we can start looking at that though. All these images from our sliced up CSS over here we are going to drag over into our theme. So I am going to Option+Drag all those images in to the images folder of our theme.
So now our theme can have access to them as well. There is a little bit of a thing to note here in that our CSS file was in a folder in our static thing before. It's no longer in a folder over here. So the relationship between it and the images are just slightly different. So if I open up that CSS file in our theme, first thing I am going to do is actually move that CSS to the theme. Open up the CSS file, literally just select all of it and just paste it over here.
So our theme and our static has the same. We don't have to do a careful line-by-line analysis of the CSS. That's just a straight copy and paste except for these file paths. It start with this dot, dot, dash over here. They don't need to start with that ../ anymore, because of that change in relationship, but TextMate has a really easy Find and Replace. So this ../ we will just replace it with nothing. Hit Replace All, close it, and now we can see that in that example we are looking at, it doesn't start with ../ anymore.
It's just gone and that's just replaced with the proper file path. So there we go. I am going to save that CSS file. Then we are going to start looking at the index.html file over here. We are going to start with the header.php file in our WordPress theme. Both of these start with the DOCTYPE. So we are starting at the top and working our way to the bottom. Anything that we see different, we are going to check it out on a line by line analysis and figure out what we should do. So right away on line 2 we can see that there is a bit of a difference.
So over here it just says html. Over here it says html and it's got this special php function in here. WordPress has a special function for outputting the language attributes. There is no reason to remove that. It's just nice. It's just saying WordPress is going to be setting the English language and just proper outputs that attribute there. So we got to analyze if WordPress is trying to do something smart for us over here. Not to remove it, just because we don't have it over here, but to leave it in because it's not affecting anything.
It's just WordPress trying to help out and be a little smart. It comes up again right away, because it comes up in this meta character set. We just have a static UTF8 over here. But WordPress is outputting it dynamically here and we might as well leave that. It's just WordPress trying to help us out with some smarts. This meta tag here right here in between these PHP tags is saying don't index. So that's a little weird. Why would we tell a theme not to index? Well, it's only telling it to index on very specific pages.
WordPress has this thing called conditional tags. So if we read this out loud in plain English, it says if is a search. So is_search is the conditional tag. It will return true or false, meaning that this meta tag is only going to get output if this is true, which is only if you are searching for something literally on a search result's page on your WordPress theme, and those type of pages can have a lot of repetitive content on them. It's good to not have search engines index those page and possibly penalize you for duplicate content and stuff like that.
Over here where we are linking the CSS files. That happens down here in the WordPress theme. It's fine. It's doesn't matter where that happens. Right here, we are linking to the style. css file, but in our CSS link here, it has the special WordPress function, bloginfo, stylesheet_url. It's just ensuring the fact that this URL that it outputs is absolutely going to be correctly pointed at the CSS file that's part of our theme. So it's nice to leave that there. But boy! What's going on with this title tag? That's a lot of code there.
That there is a lot of these conditional tags that we looked at. As we covered, WordPress works in this modular way. There is all these little chunks that are getting called. You remember how it calls the header, it calls the footer, and it calls the sidebar. Every single page on our entire WordPress site. At WordPress there is going to be thousands of pages. All over them are going to call header .php, all of them are going to use the same code over, and over, and over again. So it needs to do smart things with the title of the page.
There is this class of group over here. We don't have a class of group here. So we detected a difference. We might as well put this class of group over here as well. So that's a match, div with an id of header, this h1 tag in here that links to Widget Corp. Over here it's the same deal, only it's outputting these links dynamically. So we are doing good. Then we just have a paragraph tag over here that says Established 1987. Over here we have a div of class description. That's different.
We might as well just do what we have already written in our page. So we are making those match, but we will leave in this dynamic part. That we can change through WordPress settings. Remember we looked at settings and how it said just another WordPress blog? We might as well make that say Established 1987 and that way we are staying dynamic. We are using the intelligence of WordPress. That's where this header. php file ends over here. So we need to be careful here, because notice we opened the body tag, we opened the page-wrap, but we didn't close either of those two thing.
We really need to be careful when we open tags to make sure that they are closed again. Make sure that our page looks right and validates and all that good stuff. Let's jump right away to footer.php. So this is what comes with the blank theme, but in our static we can just zoom all the way to the bottom to take a look at what's happening in the footer. Let's make sure that page-wrap is closed and notice we did all that scrolling. So sometimes when you do see a closing div tag, you are like what is that closing again? This is a nice comment to remind us what it exactly is closing.
So let's copy that and make sure that because we opened it, we are going to close it. Then grab this footer code over here. This is more appropriate of what's going on. We will just paste it in there and leave what was already there. So we can copy and paste. This is smart. It's about the same thing, outputting the copyright, but this is dynamically outputting the year and the name of our site. That's nice. So we don't have to change the copyright manually each year. Paste that in there. Get rid of the old stuff.
So we have made sure that the body is closed and that tag that we opened is closed. We are doing a good job there. We have this wp_footer in here that is telling us that's where the footer of this site is if a plug-in or something like that needs to know where the footer of your site is. Here it is, in case it needs to insert its own kind of stuff, and our nice, little, friendly comment reminding us about analytics. That's where we are. We have analyzed this as best as we can so far, going line by line and comparing what we already have and fixing it up in WordPress theme.
So we are doing a good job and we are going to continue looking at comparing these files to what we have already written and making it into a WordPress theme. So we have finished our line by line analysis of this theme, moving from the left to the right, making sure the tags are closed, and that we've moved and properly have everything that is from our working site into our WordPress theme. Let's take a look in the browser and see where we made it. Fair warning, this may not look super pretty, because we are not quite there. We are only half way through, but you should see some progress of this thing starting to take shape as it should.
Well, that's a little messed up, but don't worry about it. There is a reason that it looks like that and we are going to be fixing everything. I am sure you guys can relate to this site looking a little weird once in a while. Don't worry. We are going to fix it all up as we move along.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 101617 Viewers
61 Video lessons · 88376 Viewers
71 Video lessons · 72217 Viewers
56 Video lessons · 103966 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.
Your file was successfully uploaded.