WordPress Coding Basics: The Loop

1.2 WordPress Coding Basics: The Loop

[SOUND] Hello and welcome to this Tutsplus coffee break course on the Loop in WordPress. In this course, I'm gonna walk you through an example of the loop and show you the code it contains. And how it fetches and outputs data from your site's database. I'll also show you which files in your theme you need to add the loop to, and how you can use include files to save having to code the loop more than once in your theme. As we work through this course, I'm gonna use a worked example. And that's a site that I've developed myself. And this is a house renovation blog that I manage from my own home. Now this uses a bespoke theme I've developed, which is based on a parent theme that I use for all of my sites, both myself and my clients. And I'm gonna show you how the loop works in this theme. So here we are on the home page. And this has it's own specific file in my template called frontpage.php and we'll take a look at that in Coder. So here you can see my theme has got a file called frontpage.php. And that's the template file just for my front page of my blog, which is basically an archive of my latest posts. So this file, instead of having the loop coded directly into it, uses get_tempalate_part here. And get_template_part lets you fetch another file from within your theme. And it's really useful with the loop, because it means you only have to code your loop ones and then you can keep using that same file and that same code throughout your theme. And that saves you a lot of work if you ever have to rewrite or edit your loop in the future. Now here I'm specifically using the loop for archive pages, which not only relates to my front page, but also to other archive pages in my site such as tab or category archives. And so I'm fetching a file that's called loop archive.php. If this second parameter here, archive wasn't there, I would just be fetching a file called loop.php. And here's my loop archive file. In this file, firstly you can see that there's some text to output if there aren't any posts. And I'll skim over that because it's not the loop, but here is our loop. And our loop is everything contained between the while and the end while. So there's quite a lot there. So let's take a look at one of these posts on the site. So this is being output from that loop. So you've got the featured image of the post, the title, the date, the excerpt, a link to the post. And then a list of the categories that it's in. And then finally at the bottom, the opportunity to leave a comment. So let's go back and take a look at how this is coded in. Now before we start that, we have this essential line without which the loop won't work. And this is while have_posts the_post. So what this does is tells WordPress to check if there are any posts for this particular archive. And if so, it uses this, the post function to fetch the post so that it can output information relating to it. So, the first thing we do is open this article tag. And this uses the ID and post class template tags to output the ID of the post as an ID of this article in CSS and a number of classes that relate to the type of article it is. That'll include things like the categories it's in. So that helps you if you then want to use CSS to start any specific post or any post in a given category. And this article is wrapped around a whole load of other text. So this article is wrapped around some sections here. Now the first section we have here is the thumbnail. Now you can ignore some of the CSS classes I've used here because those are for my object-oriented CSS. So you can see it's got left in half because here this image takes a part of the screen and is floated on the left. So that's my section with my thumbnailing and that includes a link and this is a template tag that's used in the loop, and that's very important, and that's the permalink. And that outputs a link to the individual post. So if I click on that image, I'll go to the specific post. And then inside that, I'm using post thumbnail to output the featured image for that particular post, so that's that first section. And then moving onto another section with the content, the main content of my post. Now this isn't actually the full content, it's its title and its excerpt. But again, I'm using object-oriented CSS to make this right-aligned and take up half of my page. So within that section, I've got a h3 tag, which is my title. And here again, it's wrapped in this link. And that uses the permalink again. And it also outputs a title for accessibility reasons. And then inside that link, again I'm using PHP the title, in order to output the actual title of my post, which you can see there. Now once I've done that, here I've got an action hook. That's something that's specific to my theme and that isn't necessary for the loop. The next thing is the exert. And the exert is a template tag that you'll use on your archive pages, because instead of outputting the full content of the post, what you see here is this excerpt. Let's go back to this do_action. What I've got here on this action, I've got a function in my functions file that's attached to the compass method before_action. And that outputs the date. I use that in various places on my site. So another thing you can output here is the date. And the way that you do that is simply using a template tag called the date. So we've got the excerpt, then I've got another action hook called compass postmeta after and in this theme, I've attached two things to that, my read more link and also my list of categories. So that's that section there. When all of the content on the right hand side, all of what you can see over here. And then after that I've got a section called entry-utility. And here I've got a link to leave a comment and I'm using template tag comments_popup_link. And if somebody clicks on that it will take them to the post and take them to the spot in the post where they leave a comment. So let's get back to my archive page and back to my loop. So, that's the final section. And then here, there's another action that you don't need to worry about. The end of my article tag, and finally that end while. So, that's the loop in my archive page. Now, let's look at an individual post. Now, my single posts on this site, use a different version of the loop in the theme, and that actually comes from the parent theme. So I'll show you here in the child theme you can see that it uses template compass, so it uses compass as its parent theme and it's importing the style sheet and that's how you code and that's how you tell WordPress that this theme is a child theme. So here's my single PHP file from my parent theme. This has got the loop directly coded into it, which is another option. Here I've got my article element, which encloses everything else. Then I've got my H2 with the entry title, using the title again. And you can see that this time it's not enclosed in a link. That's because when you're already in the post, you don't want to include a link to the post because that will just be cycling back on itself. Underneath that, I've got a section called entry meta. And again, I've got this action compass post meta before. And in my theme, as you'll remember from the archive page. I've got the date attached to the action hook. So the next thing is my entry content section. And here is the actual content of my post. So you can see here that I'm using this called the content, and that outputs all off the content of my post. Now at the bottom of my post, there are few other things, and those are added by plugins. They're not actually part of my loop. But here, I've got content that's in my own loop. So you'll see this compass_postmeta_after hook here, which we also saw in the archive page. And again that's outputting a list of the categories for this particular post. And you can go to a category archive for either of those if you want to. And then underneath here, I've got a link to the previous post. If I click on that and scroll down to the bottom of that You'll see that because that's an earlier post, there's a link both to the previous post and to the next post which is the one we were just looking at. So these links here are actually coded via a function I've created in my theme called compass_page_links and that's in my parent theme which is called compass. And the outputs are linked to the previous and the next post. And then finally, there's another action hook, compass comments. And in my parent theme, I've attached the code to output the comments template. And that just uses the standard comments template provided by WordPress. And then finally, there's our end while PHP function which ends my loop. So that means on my single page, I'm now no longer in the loop and it goes through to my side bar if I've got one which I don't on this page and to my photo. And it's very important that you close your loop with a end while function because if your page will be running another loop, for example via a plugin or using the WP query class it means that WordPress won't get confused by thinking it's still in one loop when it's starting off another one. So that's the code that powers the loop. And as you can see you'll code a slightly different version of the loop depending on whether you're on an archive page or a single post. And that might apply to single post or single pages or both. If you want to learn more about the loop, you can read this guide in the WordPress codex which takes you through the code that makes the loop work. And you can also read a tutorial on how to add a loop to your theme in this part of a Tutsplus course I created on coding a WordPress theme from static HTML. I hope you found this course useful. Thanks for watching.