Header image

Display an Event or Gig List Using WordPress

Want to use WordPress to display an event or gig list with future dates, without resorting to a plug-in?

This method allows my clients to manage their own gig / event list by simply creating events as individual WordPress posts in a particular category – for sake of argument let’s assume a category entitled ‘Gigs’. The code then takes posts from this ‘Gigs’ category and displays them – past and present – in a listing.

Now this was always possible for past (published) post dates, but clearly that is not of much use in this situation, since the whole point of a gig or event list is to advertise future events, rather than past events. Fortunately, since the advent of WordPress 2.xx (not quite sure what version of 2 – to be safe use the latest version), you are now able to display future (scheduled) posts and it’s this functionality that I exploit to display a gig / event listing.

A later refinement has two headings on the web page, ‘Gigs’ and ‘Previous Gigs’; once the gig / event date has passed and the scheduled post becomes a published post, it dynamically moves from below the ‘Gigs’ heading and reappears below the ‘Previous Gigs’ heading. Sweet!!

Examples

Image of Wills Fargo gig list

Links to live examples …
http://www.heathersimmons.co.uk/gigs.php
http://www.digbyfairweather.com/gigs/

Notice how the ‘Gigs’ events are ordered in chronological (ascending) order with the next event at the top of the page and future events further down the page. As the top most event date passes, it dynamically drops down the page and reappears beneath the ‘Previous Gigs’ heading and the next dated event is then displayed at the top of the page under the ‘Gigs’ heading. The ‘Previous Gigs’ are listed in reverse chronological (descending) order.

Q: Why display past gigs / events at all?
A: Well, I’ve found that some artistes like their punters to see which of the more salubrious venues they’ve recently performed at – particularly if they’ve just played the 100 Club, or Ronnie Scotts, for example.

This is how it works …

Display Past Events

As mentioned earlier, it has always been possible to display a list of past events (published posts) – after all this is pretty much the anatomy of a blog. So to display only past posts from the ‘Gigs’ category – ie previous events / gigs …

<h2>Previous Gigs</h2>

<?php
$my_query = new WP_Query('category_name=gigs');
while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID;
?>

<dl class="giglist">
<dt><?php the_time('l, F jS, Y') ?>:</dt>
<dd><?php the_content(); ?></dd>
</dl>

<?php endwhile;?>

Note how the ‘WP_Query’ function is used to query only for posts in the ‘gigs’ category:
WP_Query(‘category_name=gigs’);
Then the results are displayed in a definition list – with a class of ‘giglist’ to enable future styling.

Display Future Events

However, to display future dates (scheduled posts) from the ‘Gigs’ category, I exploit the ‘post_status=future’ function which became available within WordPress 2.xx …

<h2>Gigs</h2>

<?php
$my_query = new WP_Query('category_name=gigs&post_status=future&order=ASC');
while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID;
?>

<dl class="giglist">
<dt><?php the_time('l, F jS, Y') ?>:</dt>
<dd><?php the_content(); ?></dd>
</dl>

<?php endwhile;?>

Note how this time the ‘WP_Query’ function queries only posts with a post status of ‘future’ in the ‘gigs’ category and also specifies that they are listed in ascending (ASC) order:
WP_Query(‘category_name=gigs&post_status=future&order=ASC’);
Again the results are displayed in a definition list – with a class of ‘giglist’ to enable future styling.

Complete Code

Of course, it makes more sense to have your future gigs / events at the top of the page where they are most visible and previous gigs further down the page. So the final code would be …

<h2>Gigs</h2>

<?php
$my_query = new WP_Query('category_name=gigs&post_status=future&order=ASC');
while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID;
?>

<dl class="giglist">
<dt><?php the_time('l, F jS, Y') ?>:</dt>
<dd><?php the_content(); ?></dd>
</dl>

<?php endwhile;?>

<h2>Previous Gigs</h2>

<?php
$my_query = new WP_Query('category_name=gigs');
while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID;
?>

<dl class="giglist">
<dt><?php the_time('l, F jS, Y') ?>:</dt>
<dd><?php the_content(); ?></dd>
</dl>

<?php endwhile;?>

A Touch of CSS

Now, all that that remains is to add that touch of style:

h2 {
font: 120% Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
}

.giglist {
font: 80% Verdana, Arial, Helvetica, sans-serif;
margin: 0 0 0 10px; padding: 0;
list-style-type: none;
 }

.giglist p {
margin: 0; padding: 0;
}

.giglist dl {
margin: 0; padding: 0;
list-style-type: none;
}

.giglist dt {
margin: 0; padding: 0 20px 0px 20px;
font-size: 90%; font-weight: bold;
background: url(http://www.stylegala.com/img/_bullets/0093_bullet.png)
no-repeat 0 50%;
}

.giglist dd {
margin: 0 0 19px 0; padding: 0 20px 0px 20px;
}

In Closing

The precise time of day at which an event dynamically moves between ‘Gigs’ and ‘Previous Gigs’ can be manipulated by adjusting the post’s time parameter. If it’s an evening event I tend to set the time to around 22.00hrs or 23.00hrs. This way the event is listed under the ‘Gigs’ heading all through the day and only transfers to the ‘Previous Gigs’ heading when it’s too late to be advertised under that day’s events. After all, there’s little point punters turning up to a gig if the drummer’s already loading his kit into the van!!

I’ve used definition lists as a means of displaying these events – now, should I have used unordered lists instead? I guess it comes down to your take on the W3C directives. However, if unordered lists, or even tables (since it’s tabular data) are your preference, then these layouts are easily implemented.

There’s a setting in WordPress, ‘Blog pages show at most’ which determines the maximum number of posts displayed on a page. The default setting of 10 will need to be increased if you intend displaying more than 10 gigs / events on your page.
In WP version 2.3.x, it’s here: Options / Reading / Blog Pages / Show at most.
In WP version 2.5.x, it’s here: Settings / Reading / Blog pages show at most.

For alternative bullets – look here:
http://www.stylegala.com/features/bulletmadness/

Thanks to ‘mfields’ of the WordPress community who put me on to the idea of exploiting the ‘post_status=future’ function in the first place.

And blog’s your proverbial uncle!!

Appendix 1

Display a message if no future gigs exist – thanks to KayBee for thinking of this – a useful refinement I think. Seagyn Davis has the answer – an if statement with the have_posts().

I’d do it like this I think …

<h2>Gigs</h2>

<?php
$my_query = new WP_Query('category_name=gigs&post_status=future&order=ASC');
?>

<?php
if ($my_query->have_posts()) : while ($my_query->have_posts()) :
$my_query->the_post();
$do_not_duplicate = $post->ID;
?>

<dl class="giglist">
<dt><?php the_time('l, F jS, Y') ?>:</dt>
<dd><?php the_content(); ?></dd>
</dl>

<?php endwhile; else: ?>
<p><?php _e('Sorry, no shows at present.'); ?></p>
<?php endif; ?>

37 Responses to “Display an Event or Gig List Using WordPress”

  1. thanks for the tip! very useful :-D

  2. Very interesting, i’m testing it ! thx

  3. This is a great idea. I love GigPress until I found out that it generated around 100 queries for my previous gigs.

    This is just what I am after.

    Just a quick question. Is there an easy way to display a ‘Sorry no shows at present’ if there are no future gig posts?

    I have been searching for an answer but thus far had no luck.

    All the best
    Karl

  4. Great bit of code.

    @ KayBee – you can use a if statement with the have_posts() function built into WordPress

    There fore if have_posts() do it else display “No shows coming up”

  5. @ Seagyn Davis; How would I incorporate that into the existing code? Sorry to be a pain :)

  6. Hi KayBee,

    I’ve just added an appendix to the original post explaining how to incorporate the if else statement into the original code. There is probably a more elegant way to code it, but this seems to work.

    As for GigPress – I have heard of it, but tend to avoid plug-ins where a few lines of code do what I require.

    Please let me know how you get on with the above.

    Regards,
    Keith

  7. This technique seems to work great, except it won’t show future posts individually. For viewing single posts, WordPress filters out anything with a future status unless you’re an admin or have permission to edit that post. I’ve been looking at hooks to try to figure out a way to modify this behavior, but I’m not sure it’s possible without editing WP core code, which is a real pain when it’s time to upgrade. Any suggestions?

  8. this is a great idea!
    i’m having a problem getting the list to display in the sidebar on my home page however (separate from the posts list). any ideas? i see that your example site has it working this way.

    thanks

  9. Hi Keith,

    Thanks for the really useful thread.

    I’m using the code successfully in a sidebar and would like to restrict the number of future events displaying to 5

    I’ve tried adding “numberposts=5″ thus

    But no joy. Any ideas please?

  10. That is exactly how i would do it. Its actually the best way to do it in WP. I have also found a few “bugs”.

    One problem I have run into is with IE. It works great in FireFox but as soon as you click the future event in IE then it gives a 404 error. Any ideas?

    PS a link would be great ;)

  11. I stand corrected, it is on both, it does not allow you to view a future post if you are not logged in.

  12. Jeremy Clulow: Try ’showposts=5′, rather than ‘numberposts’. That’s the expression I use on this page to display the next three gigs: http://www.heathersimmons.co.uk/home.php

    The entire code used to achieve the above, is:

    <h2>Next Five Gigs</h2>
    
    <?php
    $my_query = new WP_Query('category_name=gigs&post_status=future
    &order=ASC&showposts=5');
    while ($my_query->have_posts()) : $my_query->the_post();
    $do_not_duplicate = $post->ID;
    ?>
    
    <dl class="giglist">
    <dt><?php the_time('l, F jS, Y') ?>:</dt>
    <dd><?php the_content(); ?></dd>
    </dl>
    
    <?php endwhile;?>
    

    Matthew Glover and Seagyn Davis: Presumably you’re both trying to display events in ’single post view’, using the ’single.php’ or similar template file. Sorry, but my technique was only ever intended to display posts in multi-post view – displaying the events as a list rather than individually. However, I don’t see this code cannot be adapted so that one could drill down to a particular event in single post view. When I get a little more time I will investigate and post my findings.

    Regards,
    Keith

  13. ’showposts=5′ works

    Many thanks – we’re rockin’ and rollin’ again.

    Jeremy

  14. Beautiful, Keith – this is what I’ve been looking for. Thanks!

  15. do you know a possibility to show the RSS feed including future events, additionally?
    that would be awesome..
    i mean if i would subsribe to a gig-feed without showing the upcoming event, doesn’t make any sense, doesn’t it?

  16. How would you create a link to the gig information?

    I’ve changed the above to display Gig Name, Gig Date and would like a link on the Gig title.
    any ideas?

  17. oops… a link on the Gig Name

  18. Well I looked into it, it only works if you allow future dated posts to be published.Mail me if you want the plugin name, cant remember off hand.

  19. I gave this a shot and really like the idea it’s simple and uses the tools wordpress provides … HOWEVER… This is less than perfect if the future posts can’t be seen in the feed. I’ve searched and searched and tried all sorts of things but can’t find any way to show these future posts in the feed. I’d hate to have to give up on this since I also created a custom widget to display the events as well.

    Please tell me there is a solution that I’m overlooking to get these into either the main feed or even better it’s OWN custom feed.

    Cheers

  20. I’ve done something similar showing the event/post title. I want to link to the full post, but of course single.php won’t show this by default. anyone know how to modify things so that single.php will show scheduled posts?

  21. Cant get it to work without being logged in. Any clues?

  22. in the single template,

    has anyone tried using query_posts(‘p=’.$post->ID.’&post_status=future’);
    or something along those lines (I’m not in front of the right computer right now, so I can’t try it out.

    If that doesn’t work, couldn’t one instead do something like

    if(!have_posts()){
    $futurepost = new WPQuery(‘p=’.$postid.’&post_status=future’);
    if(have_posts()) $post = the_post();
    }else{
    $post = the_post();
    }

    then have everything use $post->functionnames() rather than calling them with out the object
    like $post->get_the_title() instead of the_title();

    keep in mind, again, i’m not in front of my computer, so I can’t test this out… i’m sure there are syntax problems.

    Finally, the other issue this my suggestion is that if people guess the url of your post, then they will be able to view future posts even if you didn’t want them to… and from reading the wordpress website, it would seem this is the reason they’ve restricted future posts and why we’re having the problems we are having with the single post templates.

    DerekNobuyuki

  23. Addendum:

    Now that I’ve had a chance to actually try it out, I see now that if you specify an ID with p=
    and are using post_status=future then the code they’ve added to restrict access comes into effect.

    Unfortunately, there doesn’t seem to be any efficient way of working around it.

    while($wp_query->have_posts()&&$post->ID!=$id) $wp_query->the_post();

    would go to right ID but isn’t efficient (like if we could put it into the SQL)

    However, there are plugins out there that would make scheduled posts have a “published” status instead of a “future” status like this one
    http://wordpress.org/extend/plugins/the-future-is-now/

    DerekNobuyuki

  24. and what about the rss-feed and the calendar?

  25. I ran into this same problem my self. The wp-core code does not allow for future posts to be queried by non-admins in single.php. The most simple solution I found is to make a custom 404.php template (since this is where the query will be redirected to after it cannot find what it’s looking for with single.php).

    Take a look at dameer’s comment here: http://wordpress.org/support/topic/276841

    Best of luck, and boy do I love ruby after all these PHP hacks.

    • For me this is a relatively easy qtuseion, but has a pretty complex answer. The specialty I have actually looked forward to working with is OB/GYN. I find that the ability of a woman’s body to produce a child, endure the amount of abuse it takes during a pregnancy, and the amount of pain endured during delivery is amazing. The joy of being able to be present as life enters the world is truly one of the greatest moments in life. To me that would be the best possible option. I also would love working in the operating room with a surgeon. I have experienced the OR quite a few times, and have been on both sides of the table. I have to say I would love to work with any surgeon in the OR except for Orthopedics. The reason behind that is the surgery’s are pretty brutal when it comes to the skeletal system. Having been in the OR with an Orthopedic surgeon and seeing the use of the saws, hammers and other heavy equipment in order to perform the surgery just sends chills up my spine. I know that type of surgery is not for me. I think my favorite surgeries have to be that of the abdominal cavity. The specialties that I would least like to work for are few, and for simple reasons. Pediatrics is not a specialty for me since I have four children of my own. My Aunt is a neonatal nurse practitioner and I followed her in high school and saw the good, the bad, and the ugly so I can honestly say I could not emotionally handle that type of position. Podiatry is also an area I could not see myself working. The reason behind this is pretty silly, but here goes, I very much dislike other peoples feet especially if they are not well kept. I know in the medical field you will encounter feet on a daily basis, but I could not mainly work with feet on an everyday basis. My last specialty is Orthopedics for the reasons I noted above about the barbaric nature of the surgeries and treatments for the musculoskeletal system. Its just not for me.

  26. I have this problem too but I created my own plugin to fix this. NO hacks and NO need to edit your templates. Just install it and it solves the problem.

    Check: http://wordpress.org/extend/plugins/show-future-posts-on-single-post/

    Running example is at http://www.FredRadio.com

  27. Cool thread – I’m trying to apply the future posts idea to my site, but it’s using a function to display the posts in the location where I want them. I’ve tried messing around with the code a bit to see if I could modify it, but always get some PHP error. Here’s the function that displays 3 latest news posts on my homepage (www.musicvancouver.com):

    function print_news_posts($count=3){
    global $cat_news, $more;
    $more = 1;
    query_posts(‘showposts=’.$count.’&cat=’.$cat_news);
    if (have_posts()) :
    echo ‘What\’s Happening’;
    while (have_posts()) : the_post(); ?>

    <a href=”">

    <a href=”" class=”more”>Read More

    <?php endwhile;
    endif;
    }

    What I’d prefer to do is print the next 3 upcoming (future posts) events, in ascending order, but can’t figure out the syntax with this particular function (not knowing much PHP and all).

    Any help would be greatly appreciated.

    Regards,

    Luis

  28. Thank you so much for this article! I’ve been trying so hard to find a good way to use wordpress to display events, and used a number of plugins that just added more work to add an event. This makes it so much easier for me as a developer and for the users to post events.

    You’ll be able to see this in action at:
    starryeyedmusic.com (new design will be up may 9th)

  29. Dude, you just saved my ass with this post. The post_status=future was exactly what I was looking for!!! THANKS!

  30. I have been playing with this sort of thig on a recent site and here is the solution i have used – it bypasses the future posts issue altogether and pulls the date from a custom field.

    =&meta_value=’ . $todaysDate . ‘&orderby=meta_value&order=ASC’); ?>

    You can add a time as well if needed – i use this and have a form setup that automatically publishes the post – so no backend manipulation has to occur.

  31. =&meta_value=' . $todaysDate . '&orderby=meta_value&order=ASC'); ?>

  32. Last attempt – never tried code in a comments box before.

    query_posts(‘showposts=20&category_name=Queensland&meta_key=EventDate&meta_compare=>=&meta_value=’ . $todaysDate . ‘&orderby=meta_value&order=ASC’);

  33. So will the gigs then be posted to the RSS feed if they are future (scheduled) posts?

  34. I wonder if it’s possible to set an ‘expiry date’ on a post rather than base it on time of the gig day? reason being I actually need this for publishing exhibitions which run for longer than one night so I don’t what an exhibition to jump to ‘previous’ on the day it opens, but the day it closes… How would I do this?

    Thanks so much for taking the time to write this :)

  35. This is such a sweet method, so easy to implement and easier to restyle then all the gig plugins out there. Cheers!

  36. Great post, but I have one issue.

    When I use post_status=future, WP is also displaying my trashed items, as well as my drafts. I’m trying to only display scheduled posts, but post_status doesn’t recognized a “scheduled” parameter.

    Any thoughts or ideas?

    I’m trying to do an events list, just like most others have mentioned, but trashed & draft items cannot be showing up on the live site.

    Thanks.

Leave a Reply