This is the 15th 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. We have created a static page to display our upcoming events sorted by the event date. Now we are going to format the display of the date using PHP functions strtotime() and date().
You see what all these zeros are in here? Those zeros are the minutes or hours, minutes and seconds. And if we go back to our dashboard for just a second and go take a look at our posts and let’s see… look at the writer’s works up for a second. Hit edit this… you know, we picked this event date or we chose the date. It didn’t just choose the date, it also added hours, minutes, and seconds. And so, that’s what it’s showing there, it’s those zeros. And so, when we really want to display this, we’re going to have to change that and get rid of those zeros. Actually, I’m going to add a venue to this one. Let’s call it the King Dome which of course, no longer exists here. The King Dome, okay update.
So we’ve got this event, it is scheduled for August 28, 2011 at 7 o’clock in the evening at the King Dome. And so, now what we’re going to do is format all that information and display it. So here we are at our events and this is showing those… it’s showing the date but what we want to do actually is show the date and the time and the venue. That’s what we’re going to add to these and then we’re going to restyle these so that they take up the whole space.
So let’s see, but… okay so here we are back at upcoming events and we’re going to add…we’re going to change and format the date so that it says June 4th 2011 and it doesn’t have the zeros. And then we’re going to have the time or start time and then we’re going to have the venue or the location and that’s going to display with these. And we’re going to do that here. This is actually something that we started this morning with this function here. We got the event date from the post meta and then we echoed that event date which is why you see the date showing up there and then we added the Thesis hook after teaser headline. What we’re going to do now is we got event date, I want to let’s see… event time and event venue and then we need to get those, the values of those post meta or those custom post meta so we’re going to go back over to the website and go back to the dashboard. And then let’s look at posts and we’re going to edit this post and we’ll scroll down to the bottom to see what those custom fields are called. So we have event date, event_time and then venue. Okay so those are the ones we want to use. This has to be actually 100% accurate or it doesn’t work.
Okay so get post meta, post id, event date… grabs that event date from that field. Get post meta post id event_time, it gets that time from the field and then venue gets the venue from that field. Okay so now what we’re going to do is we are going to reformat event date and in fact, instead of… it’s okay. We can call that event date, that’s fine. And what we’re going to do though in this echo is rather than echoing the event date, we are going to use the php function called date to format it. And the first thing we have to do is what we did up here before which is this string to time event date so we’ll grab that. So we have to convert this string to a date stamp so echo string to time event date and then what we’re going to do is use the date function. So date echo date and then we are going to… you can see here it wants a format and then a time stamp. This is the format that we’re using: date, format and time stamp. So string to time and then we’re going to add our format and in this case, we want… the first thing we want to see is the month. So that’s F stands for the full name of the month and then we want the day which is in the 2-digit numerals and then we want a comma and then a space and then we want the year in 4-digit numerals. So this… so we’ve now used the date. Oh, pardon me. I have messed that up entirely. That actually goes here so it’s date with a format and then we’re taking string to time event date. So that’s how that works. And if we just save this and upload it, it’s going to look exactly like you think it should look. Either that or I’ll have egg on my face.
Okay, full events listing… oh no, pardon me. Let’s go back to the events here. Okay there you go, June 4th, 2011.