Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
FREELessons:11Length:1.2 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

5.3 Using WP_Query to Set Up a Custom Loop

In this lesson, I’ll give you an overview of how you can use the WP_Query class to create custom loops.

Related Links

5.3 Using WP_Query to Set Up a Custom 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 another means to create a custom query in WordPress, and that's using the WP_Query class. Now, this is one of my favorite WordPress classes. In fact, it is perfect for every WordPress class but it's probably one of my favorite pieces of code in WordPress. I use it a lot to create custom templates, custom widgets, all sorts of things, and it gives you a lot of flexibility. So I actually tend to use WP_Query over get_posts or get_pages. The reason being, I use it so much for all sorts of things that I know it better than get_posts and get_pages. So I know I can code it quickly, because I've done it so many times. So I'm gonna show you how to use WP_Query to create the same lists of posts that we've created in the last part of the course using the get_posts function. And then you can decide for yourself which method you prefer to use to do it yourself. But instead of adding it to our single post, we're gonna add it to the static page template. So this about page is an example of a page using that template. And I'm gonna add a list of the latest posts at the bottom of the page here. So let's take a look where we need to add that in our theme. The theme template file being used is page.php and once again, I don't want to open my loop single file because I don't want to include it in the loop. This is a separate loop sitting outside that main query, so I'm gonna add it under here. So once again, I'm gonna start by defining an array of arguments. And that's the same as the last time. And then do something slightly different, instead of running get_post and saving that to a variable I'm gonna save a variable called query and I'm gonna use the WP_Query class to populate that. Making sure I use an equals there. So that's my query. The next thing I do is check whether any posts are returned. So this is very similar to checking whether my variable was populated, my latest posts variable was populated last time. And you'll recognize that I have posts from the standard loop. So I am now gonna add some HTML. And I'm gonna make sure I've got my PHP in the right places. So now, if the query has some posts, I'm gonna add a heading and an unordered list inside a div. So that's my H3 and now I open my list. So now, I'll use while $query->have_posts in a very similar way, to while have_posts is used in the standard loop. So let's just take a look at a standard loop to compare that. So here's my loop single.php, so you can see I've got if have_posts, while have_posts, the_post. And instead, I've got if $query->have_posts, while $query->have_posts, $query->the_post. So it's very similar but you just need to add that query variable because that's fetching this WP_Query with the arguments we already defined. So now, I'm gonna do my list item So this is just the same as last time, I've got my list item a href, a link to the permalink, and the title of the post. Closing my list item, and I also before I close my unordered list, I need to end this while. So if we go back here, you'll see that there is a end while down here, and I do the same. I don't need to use end if because I've used brackets here, and when you use brackets with an if, you don't need to use end if. So I'm ending my while statement here, closing my unordered list, closing my div. And then finally, just trying to bring this up here I need to do reset_postdata(), and that resets the query, and puts it back to what it was in the first place to the main query. So this is my list of latest posts. So I've got my arguments, my query, my loop which is very similar to the loop that we wrote before, and then resetting the post data and I'm coming out of it. Let me just indent that, whoop, and that's how it should be. So let's have a look on a single page on our site. I'll refresh the page, and there is an error, something to do with the internationalization that I did. So let's take a look at that, didn't put a comma there, simple error. But PHP can be very unforgiving. And here we go, we've got a missing opening bracket on line 36. You don't need to put brackets after end while, it's not a function. [LAUGH] I've got all these little syntax errors. So now I'm on line 47, we've got opening PHP again. So I'm just gonna close it here after my reset_postdata() and my closing bracket. And now here we are, it works, except I've got reset_postdata() is an undefined function. And that's because I've typed in wrong, it should be wp_reset_postdata(). That's the function that you use to reset the query. So if I refresh again, finally, it's all working fine. Now, there is a slight issue with the layout because this is obviously taking up too much of the screen and my sidebar is getting bumped down. Let's inspect the page, that's probably the best way. So you can see that is those paragraphs there are inside the content div and these latest posts are outside the content div. And so what I'm gonna do, I'm gonna have a look at this structure. Yeah, instead of having it outside my content div, I'm gonna cut all that, And paste it in here. So it's after my loop but it's still inside my content. And that is actually a much tidier way to code it, that's probably how I should've done it in the first place. So now let's take a look, and that's better. And I'm gonna check the get_posts example I did in the previous part of the course because I didn't look at that that time, and that's caused the same problem. So I'll go back and correct that in much the same way, I'll put it inside the content div so that that works correctly as well. So that's how you use the WP_Query class to create a completely custom ambispoke loop in WordPress. In the next part of the course, I'm going to recap on what we've covered during this course and what you'll have learned. See you next time, and thanks for watching.

Back to the top