Add ‘Upcoming Events’ to your WordPress Blog
Recently, I had the opportunity to create a WordPress theme for a new site whose owner had plans to include both blog posts and a list of forthcoming events in several distinct areas. The challenge was to enable the site’s editor to easily add events and write regular blog posts, having each appear in separate sidebar widgets.
After several futile searches for plugins that would meet these requirements, I decided the best way forward would be to use blog posts for both future events and regular blog posts, by using a combination of dates, tags and categories. Here’s how I did it.
First, I set up a new post category, called “Events” and created a post tag for each area where the different events would be held. Then I made a page template for each area (I’ll use Springfield in my example):
<?php
/*
Template Name: Springfield
*/
get_header();
?>
<!-- PAGE COPY -->
<?php if (have_posts()) { ?>
<?php while (have_posts()) { the_post(); ?>
<h1><?php the_title(); ?></h1>
<div class="single_content">
<?php the_content(); ?>
<?php comments_template(); ?>
</div>
<?php }} ?>
<!-- END PAGE COPY -->
<!-- EVENTS -->
<?php
$q = new WP_Query('post_status=future&tag=springfield&category_name=events');
if ($q->have_posts()) : while ($q->have_posts()) :
$q->the_post();
?>
<div class="event">
<h2><?php the_time('l, F jS, Y'); ?></h2>
<h3><?php the_title(); ?></h3>
<?php the_content(); ?>
</div>
<?php endwhile; else: ?>
<p><?php _e('No upcoming events.'); ?></p>
<?php endif; ?>
<!-- END EVENTS -->
<?php get_footer() ?>
Next, I started a new page, using the Springfield page template. Now, when the editor wants to let her readers know about an upcoming event in the Springfield area, all she needs to do is start a new post, tag it with Springfield, select the Event category and the date when the event will be held. Since the date is in the future, it won’t appear in the “Recent Posts” widget, because the default widget will only show “published events.” This is the default WordPress functionality, and it’s great for bloggers, because it allows them to schedule posts they’ve already written to automagically appear on their blog on a predetermined date.
However, once an event happens, we run into a little problem, don’t we, since the “event” will now be considered a “published post” by WordPress. It will start to appear in the “Recent Posts” widget. To me, the most obvious way around this was to remove the default widgets, and create my own—one for Recent Posts and one for Upcoming Events.
The recent posts one is simple enough, and can readily be found on many WordPress help sites. It’s nothing more than your run-of-the-mill “recent posts” widget, except the Events category is excluded. It will look something like this (in my case, the category ID is 10):
<div class="widget widget_recent_entries">
<h4>Recent Posts</h4>
<ul>
<?php
$q = new WP_Query('post_status=publish&order=DESC');
if ($q->have_posts()) : while ($q->have_posts()) :
$q->the_post();
if (in_category('10')) continue; <-- Ignore posts in category 10 -->
?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endwhile; else: ?>
<li><?php _e('<a id="no" class="noa">Nothing just yet…</a>'); ?></li>
<?php endif; ?>
</ul>
</div>
The upcoming events widget would looks similar to this:
<div id="future_entries" class="widget">
<h4>Upcoming Events</h4>
<ul>
<?php
$q = new WP_Query('post_type=page&post_status=future&order=ASC');
if ($q->have_posts()) : while ($q->have_posts()) :
$q->the_post();
?>
<li>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
<strong><?php the_time('l, F jS, Y') ?>:</strong>
</li>
<?php endwhile; else: ?>
<li><?php _e('<a id="no" class="noa">Nothing just yet…</a>'); ?></li>
<?php endif; ?>
</ul>
</div>
Now, when the future event becomes yesterday’s news, it will no longer appear in either of these custom sidebar widgets, nor will they appear on the area’s Events page. I realize this technique is slightly more involved than simply cutting and pasting, but if you would like to add upcoming events to your WordPress-powered site, this is one possible solution.
Follow
RSS