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.