Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:11Length:1.2 hours
  • Overview
  • Transcript

2.2 Elements of the Loop

In this lesson, I’ll give you a walkthrough of the code contained in The Loop and show you what each element does.

Related Links

2.2 Elements of the Loop

Hello, and welcome back to this Tuts+ course on working with the WordPress Loop. In this part of the course, I'm gonna show you the code within the loop, and show you how it works and how it displays content from the database. So let's take a look at the loops in our theme. The default loop in our theme is contained in this loop.php file. So if I just show you how that's called, just as a recap. In my template file, for example, index here, I've got get_template_part( 'includes/loop' ). And that's because my loop file is in the includes folder. So that will call a code within this file as if it was running right there within the index file. So here's my default loop. And this theme is working for archive pages and for anything that's not a single page, so things like the search page and the 404 page as well. So the first thing the loop will do is check if there are any posts. And the way it checks that is by referencing the main query that WordPress runs depending on what you're looking at on your site. So if there are any posts, it then does a while-have posts, so it wants to keep looping while there are posts. And once it finishe finding posts, it stops, and then it sets up the post. So this line here can sometimes take slightly different forms. Sometimes it's on more than one line, sometimes you've got brackets instead of these colons, but it's always if ( have_post() ) : while ( have_posts() ) : the post(). So that opens our loop for us and that starts things running. And now with this first post, the post, it'll start outputting code for that individual post. And by default the latest post will be output first. So for each post, we're outputting an article element with an ID of the post ID and with a variety of classes using the post_class tag. Which is provided by WordPress and gives you classes that you can use to star your posts using CSS. Within that article element, we've got an h2 with a class of entry title, and that has got the title of the post with a link to it. So the_permaLink template tag here, is a link to the_post that's currently being run in our query in our loop. And then the title is, as you'd expect, the title of the name of the post. So that's our h2. And then we've got a section called entry-meta. So here we've got metadata about the post, and within that we've got the date on which the post was published. So that's echoing out what is called by that get the date function in WordPress. We've then got the important stuff, the content. So we're opening a new section called entry-content with a class of entry-content. And here I've got a check for being on an archive page or being on the main block page, which you'll see in the next part of the course. And if that's the case, we'll show the_excerpt, and then a get more link. And this template tag here, the_excerpt, will display an excerpt from the post on archive pages. If that's not the case, in other words, if we're on a static page, or a single post or the home page or something like that, it'll output the content. So that is another template tag which outputs all of the content of your post. We're then closing that section there, the entry-content section. And here I'm adding an entry-utility section, which includes the comment form and that's only gonna be on single posts and pages. So here I'm checking if we're not in the archive or home, and I'll show you that in more detail later on in the course. So here's another template tag called comment_form, and you use that to display the comments form in WordPress. So if I go to an individual post, you can see down here, the comment form is here. So that will do all the work for you. You don't need to code any of this stuff, you just put a comment_form in. And then finally, we're closing our article, which we opened right here, right at the top, which encloses all of the markup for our post. And then after that, we use endwhile to stop that looping. So we know, while having any posts anymore, and then finally endif. And the reason those have to come in that order is because if came first, and then while, and while comes first here and if. Because just as in any markup or PHP, you have to enclose things correctly. So that is our standard loop. Let me show you the loop for single, is very similar, this is for single postal pages. So there aren't any conditional tags here for archive pages and we've got the comment form without any conditional tags as well. There's just a check for whether we're not on a page, which I'll show you in the next part of the course. But you can see again we've got if ( have_post() ) : while ( have_posts() ) : the post(), the article, the h2, the entry-content, note that that doesn't have a link because we're in a single post. You don't need to link to it cuz you're already there. And then we've got entry-content, entry-utility, the close of the article and endwhile and endif just the same. So every loop will always include these lines here, the one at the beginning and the one at the end. And what you put in the middle really depends on what you want to output. But you'll always need to use either the content or the excerpt and you'll always need to use the title, because people will want to see what your post is called, and they'll want to be able to read it. But as you code more and more loops you begin to become familiar with the things that are in common between all of them, and those basic building blocks of any loop and what they output on the page. So that's the element of the code in the loop. In the next part of the course, I'm gonna show you how to create a loop for archive pages. And you've had a brief glimpse of that in this part of the course, but I'll show you in detail how to create that code. See you next time, and thanks for watching.

Back to the top