
- Overview
- Transcript
3.2 The Index Page
In this lesson we'll start working on the index.php file.
1.Introduction1 lesson, 01:20
Free Lesson 1.1Welcome01:20
2.Framework Basics2 lessons, 14:38
Free Lesson 2.1Installing WordPress05:58
2.2Creating the Framework Outline08:40
3.PHP Files16 lessons, 2:08:48
3.1The functions.php File11:22
3.2The Index Page04:30
3.3The Content Pages (Part 1)09:37
3.4The Content Pages (Part 2)09:49
3.5The Content Pages (Part 3)07:37
3.6The Content Pages (Part 4)05:36
3.7The Header (Part 1)10:35
3.8The Header (Part 2)06:17
3.9The Footer11:35
3.10The Single Page and Post Templates07:10
3.11The Comments Template11:19
3.12The Author Archives05:20
3.13The Date, Category and Tag Archives08:02
3.14The 404 and Search Pages04:26
3.15The Full Width and Contact Page Templates06:45
3.16Creating a Simple Widget08:48
4.Finishing Touches2 lessons, 23:07
4.1The CSS Explained07:01
4.2Final Touches16:06
5.Conclusion1 lesson, 01:31
5.1Conclusion01:31
3.2 The Index Page
Welcome back. In this lesson, I'm gonna start writing the index.php file, and this is like the main template file. It's gonna be used to display the blog index. So, let's go ahead and open this. I'm gonna start with a php tag, index.php. I'm gonna give it a small description. And then, I'm gonna write something that's called the WordPress loop, and it goes like this. If we have posts then while we have posts, we're gonna do the_post. And then I'm gonna do php endwhile, to close out this while right here. And inside, just for testing, I'm just going to say, hello. And of course we're going to do a php with endif, to close this if right here. So, if we refresh our page, we can see hello, because we only have a single post. Which is hello world. If I'm going to add a new post, for example, testing. And I hit publish. I'm gonna get two hello's because we have two posts. And this is how this loop works. If we have posts, then while we have posts, we load the current post. We dosomething in between. And then we load the next post, until we don't have anymore posts. Now, instead of this hello, I'm gonna put something like this. content, and I'll explain in just a bit, and get_post_format, which is a function actually. And then in here, I'm gonna say php else, so if we don't have any posts, I'm gonna say php get_template_part, content none. Okay, so time to explain, get_template_part will load a file that starts with content dash, and then another word, which is given by the second argument. So this function right here, will load content dash none. So it's a file that we're gonna write, when there is no content to show while this one will load content-the post format. So if we have a standard post format, well, it's just going to load contentphp. If we have like a gallery post format, it's going to load content-gallery.php. Now these content files will be written in the next lesson, but right now I want to add a few more things to it to this index page. Now when writing a framework like this, you gotta make sure you add some sort of HTML structure behind it, and that will help you create the layout much faster. So what I'm gonna do here is, I'm gonna wrap this entire section in In a div with the class of main-content. And also col-md-8. And I'm doing this, I don't know if you're familiar or not with the Bootstrap grid. I'm gonna use Bootstrap to power up this framework, and col-md-8 is one of the classes used for displaying the grid. So, this one uses eight grid columns, and the other four so we can complete a full row of 12 columns will be used for the side bar later on. And, I'm just gonna say role equals main here, just for accessibility purposes. So I'm gonna grab all of this, I'm gonna indent it. I'm gonna write a comment here. End main content, so I know what exactly is ending there. And that's basically all that I'm doing to this file right now. If we refresh, we won't see anything, because we don't have the content files created yet, but I'm gonna do that in the next lessons, so I'll see you there.