How To Make Your Own Events Listing Using Custom Post Types [WordPress]

One of the advantages to using WordPress is its sheer flexibility. Version 3 introduced the concept of Custom Post Types to extend the built-in functionality.

Let’s take a look today at what you could do with them, as well as a quick practical example of how to create an events listing using a Custom Post Type called Event.

What Are Custom Post Types?

Typically, a WordPress blog consists of three types of content – blog posts, blogroll links, and static pages. Most of us are familiar with the fact that pages should be used for things like about me or contact information, whilst regular posts go to your blog. But beyond that, what if you want to add another special kind of content that doesn’t really fit into the chronological order of the blog and certainly isn’t static – like events? That’s where custom post types come in.

A fairly common request for club or group sites is to have some kind of events calendar. One solution that could be applied is to create a separate Events category, and just post everything in there. The problem with this is they’ll be displayed in the main blog timeline, and we really ought to separate the two concepts entirely.

For that purpose, let’s create a new post type called event, which will have it’s own separate section of the admin interface.

Create A Custom Post Type In WordPress

We’ll do this by adjusting your theme files directly. You could achieve the same effect through a plugin, but to demonstrate the concept and practice it’s just easier to write them directly.

Open up your theme’s functions.php file, stored in the theme folder inside wp-content/themes. At the end of the file, add this code:

add_action('init', 'events_init');

function events_init() {
 $args = array(
  'labels' => array(
   'name' => __('Events'),
   'singular_name' => __('Event'),
  ),
  'public' => true,
  'rewrite' => array("slug" => "events"),
  'supports' => array('thumbnail','editor','title','custom-fields')
 );

 register_post_type( 'events' , $args );
}

Be sure to do this before the closing php tag. Take a while to read over the code, but essentially it’s just declaring some properties (like labels for the interface), how the URLs (rewrites) should be handled, and what particular features this post-type supports (in this case thumbnails, a content editor for the event description, an event title, and custom fields).

That’s it, now if you save your theme and reload your blog, assuming you don’t have any errors you should now see a new events section on your admin sidebar.

Add some example events now, and create a custom field called ‘date’ to indicate when the event is.

Note that we need to use custom fields to specify the actual date of the event rather than the date of the post, because the date of the post is when it will be published. Since you’d presumably be adding events that will occur in the future, setting the publishing date to the actual event date would be useless.

If you try to view the event at this point, you may get a 404 error. This is because WordPress needs to regenerate your Permalink structure to account for this new post type. Head over to the Permalinks settings page, make sure it’s set correctly as sometimes it can go back to defaults, and save. You should now be able to view the individual event post.

Create A Special ‘Events Listing’ Page, Ordered By Date

Now that you have all these fantastic events in your blog, it would be nice to actually list them somewhere. For that, we will create a special page template, so you can then add that page to your regular menu items alongside About or Contact.

First, make a copy of your page.php or index.php if you don’t have one. Rename it custom-events-template.php or something similar. Open it up and add this to the very start of the file. This tells WordPress it’s a special page template, and will let you select it in the templates drop down.

<?php

/**
* Template Name: Events Page
*/

?>

Next, find the line that’s similar to this:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

and just before it, add this:

<?php query_posts( 'post_type=events'); ?>

You should be able to see pretty simply what we’re doing here if you followed the last tutorial on making your own widgets – we’ve created a new query, and simply restricted it to be our new event post type.

To use this special page template, just create a new Page, name it whatever you like, and choose the template from the page attributes box. You needn’t add any content to this page, just publish and view it. With any luck, it will display your Events.

Let’s make one more adjustment to the query – to show events in order of the actual event date, rather than the date the event was published. To do this, replace the query with this:

<?php query_posts( 'post_type=events&meta_key=date&orderby=meta_value&order=ASC'); ?>

Also, it would be helpful to display the date for the event in the actual post. Add this just after the_content(); function in the template:

<?php        
$date = get_post_meta($post->ID, 'date', true);    
if ($date){     
echo 'This event will be held on: '.$date;    
}    
?>

That little snippet will attempt to grab the event date from the meta, and display it if it exists.

Here’s how the final product looks on my new events page, sorted by date and displaying the date of the event on the listing:

Extra Homework

When we created the event post type, we added support for featured thumbnails. Use the tutorial I wrote last time to grab and display this image on the events listing.

Conclusion

I hope this shows you just how easy it is to extend WordPress functionality beyond the basic Posts and Pages. Can you think of any other post types that you might want to use? How about ‘asides’ for your sidebar when you have something to say but it doesn’t warrant a full post?

Anyway, let me know in the comments if you’re having problems or you’ve tried custom post types on your blog, and make sure you check out the rest of the WordPress tutorials on MakeUseOf.com.