Build Your Own Business Website header image

Community News Case Study – Part 12 – Create a Page with a Custom Loop to Display the Events Sorted by Date

Difficulty Level -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

This is the 12th in a series on using WordPress and Thesis as a Content Management System (CMS). In this case study we are creating a community news site. In this lesson we will create a static page to display our events sorted by the event date. In other words we are creating a custom loop to sort posts by custom post meta.

Video Transcript

So then the next thing for us to do is create a page to display these events. So we’re over in Seattle, edit Seattle News. We’re just going to create a brand new page from scratch.

Add new page and this page is going to be full events listing and this will show every post that is in the weekend event category sorted by event date. This will show all events past and future. Tonight, I’ll show you how to do it so that we only show the future events or we only show past events. But we’ll just go ahead and publish this and notice that it is… the full events listing is the slug here.

And the first thing we’re going to do is we’re going to put it on our menu so we’ll go down to Thesis Site Options, pages… and I don’t have room for everything here so I’m going to turn off my About page and I’m going to come down to this. I’m going to turn it on but I’m just going to call it events and that should fit just fine and then we’re going to come up here above the blog. Okay so in fact we can move this stuff out of the way.

Okay so home, Seattle Edmonds events and blog, hit save, check out the site, events, okay so there’s our page. So now the next thing to do is to add a loop that will display all of our events. And this probably will be familiar to some of you but let’s go ahead and dive right into it. File, Open File, and I’ve got to go get… let’s see, I’ve got to go get the file for this. Tutorial site, no… you know what? I don’t think it’s there. I think it’s tutorial sites here and it is community… yup. Wp content, themes, thesis_18, custom functions php… okay so here we go. This is our custom functions php file that we’ve used to create all the rest of that stuff and I started a function right down here at the bottom. This function creates an events listing page ordered by event date. What we’re going to do is we are going to come up here to this recent Seattle post loop and we’re just going to copy it. And we’re going to essentially use exactly the same thing except that we are going to change up the arguments because the way this works is… oh and we’re also going to put it inside a page. So if is _page and we’re going to… this is where, if I remembered what that slug was, I would have put that slug in. Let’s see, that slug is full events listing. So if is full events listing then we’re going to do this. Otherwise, we aren’t.

So if the page is full events listing then we are going to add this loop and I may as well just add the loop right now. So add_action, Thesis hook after content and then comma and then we’ll pick all events listing. Copy, all events listing semi-colon so is that where we want to put it? Thesis hook after content… yeah, Thesis hook after content, okay.

So now what we’re going to do though is change our arguments because right now it says post per page equals 2. We just want to show every single event we have so we’re going to say minus 1. That will not limit the post per page that will show everything. And then the post type is going to be… actually is going to be array. So post type equals array and we’ve got Seattle Edmonds and post. So for the Seattle post type, the Edmonds post type and the post post type, we’re going to do this. So we capture everything, not just one post type in this because we’re assuming that we have some events that are Seattle only, some events that are in Edmonds only and some events that are everywhere or not classified either Seattle or Edmonds.

Okay and then we are going to look up WP query again because now we have to add the order by values and you’ve all seen this before. But we’ll come back over to the codex and we’ll search for WP query and we’re looking for the reference, WP query here. And we are looking for order by parameters and in our order by, we are going to order by meta value and before we can order by meta value, we need to add the meta key and the key name. So what we’re going to do is we’re just going to grab this little piece of code right there, come over here… meta key and okay… meta key equals key name. Of course it’s not key name, right? It is date and so, let’s go back to our site. Make sure we understand what that is so we come back over here to our full events listing, we go to our dashboard, we take a look at a post. That’s what I should’ve gone to, edit… and then let’s just go down to… oh, it’s not showing me that. So we go to our screen options and we turn on our custom fields so we can see what custom fields have been added. And that custom field is event_date so that’s what we’re going to use here. So instead of key name, it’s event_date and that so… and then our last variable then is order by and then equals arrow sign meta_value, I believe. Let’s check it. Order by meta_value, right.

Okay now, I think, by definition, it’s going to go as by ascending so let’s just see if that’s right or not. Okay so now, let’s just look at our arguments for a moment. We are going to get every single post of the post type…oh, we need a category. That’s what it is. I knew there was something missing. Cat and then I need the category number. Oh, that’s not a semi-colon, it’s a comma. Got to get the category id number, come back over to here, go to categories, hover over weekend events and you can see then at the bottom of my screen that that is id 22, category id = 22. So that’s what has to go in here otherwise, you would have gotten every single post period. Order by date even where there isn’t a date.

So category 22, post type, we need those 3 post types so no pages. Meta key is going to be the event date, order by is meta_value then we’re going to do our secondary query with these arguments and then while have posts. We’re going to grab the Thesis teasers and use that as the thing we display and then the and while and that’s it.

So let’s go ahead and hit save and let’s upload this. Actually, I need to get to the right one here. This is community, content, themes, thesis_18, custom and then let’s see…custom functions php. Upload and we’re live. Drumroll please…events. It didn’t work, what did I do? Let’s see, Thesis hook after content, all events listing. Thesis hook after content, Thesis hook, if is page full events listing… okay, let’s just… just for grins, let’s just make sure I don’t have some other error here. I’m going to take out that entirely and we’re just going to put this essentially on every page. Save the document… oh, was it 22 or 12? Brian asks. Well, you know, I appreciate you guys watching me… catching my typos because maybe, it indeed was. Categories, weekend events, 12. Thank you, Brian. Appreciate that.

You can see that you know, you didn’t see my mind running here but the first thing I did was to make sure I’d spelled Thesis correctly because I regularly misspell Thesis when I’m typing and don’t notice it. So the first thing I did was to make sure I spelled these things right. I did not assume that made a mistake like that. Save the document, upload the document… y’all are familiar with my troubleshooting. Bingo! There we go.

Okay so I wonder though… I wonder if these are actually sorted by date. So let’s see, Dating Workshop for Ages over 50. Oh we can’t see it because we’re not showing it, for heaven’s sake.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 comments… add one

Leave a Comment