With the vast amount of Event’s Plugins in the WP universe, it would be crazy to roll your own! Let’s dig in…

First off I don’t like reinventing the wheel, nor am I a plugin-phobe. But recently I’ve ran into a few occasions where I needed something unique, that I couldn’t get out of one of the currently well rated plugins available. As I almost always install ACF and CPT UI when doing client work, it just made sense to utilize those tools.

For a recent project, I had very simple event needs.

1. Easily add new events via a custom post type
2. Needed several custom fields for various input, with almost no required fields to keep it flexible
3. Display future events on front end, and another loop afterwards to display past events

We’ll start by creating the CPT, “Events”. I use the Custom Post Types UI plugin to create it easily, as well as needed taxonomies, but you can also insert the code directly into your functions. They are plenty of posts and tools out there to help make that happen.

Alright, the Events CPT is created, we have no new taxonomies but the ability to “Add Event” is functional. You can also choose your own icon to use for your CPT’s from WP’s Dashicons, to customize it further.

Next we’ll use Advanced Custom Fields to create some custom fields for the Events post type. ACF is great, and the doc’s are plentiful. Echoing the fields data into your theme is pretty straight forward, but using the date data to alter your loops can be a bit tricky, but I’ll show you the working code.

These are the field names I created that were relevant to what the client needed. Number 1 and 6 are actually just tabs, that help cleanup the admin section for usability, as seen below.

The Date field uses a jquery Date Picker, that we’ll grab later for our loop. The Date is also the only required field. The rest our to help keep some sort of structured data, but the client will not them all for every event.

We can use conditional statements in our theme to only show the fields when they exist. As a side note, this is a good practice to use in general. This way, if something happens to the ACF plugin, the fields simply wont show up, instead of white-screening your site.

Now that we have all the fields created and populated lets echo them in our theme, below you’ll see the ACF syntax, sprinkled around common WordPress tags. Like I said earlier, most are straight forward, the date fields requires you to also include the php format that it’s supposed to be printed in.

|*|-php-|*|
<div class='event-excerpt'>
    <section class="">
        <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>

        <p>
        <?php $date = DateTime::createFromFormat('Ymd', get_field('date'));
        if ( get_field( "date" ) ) { ?>
            <?php echo '<i class="icon-calendar"></i> '.$date->format('l').", ".$date->format('F')." ".$date->format('d')." ".$date->format('Y').", "; ?>
        <?php } else { ?>
            Date is TBA
        <?php } ?>

        <?php if( get_field( "time_start" ) ): ?>
            <?php the_field( "time_start" ); ?>
        <?php endif; ?>

        <?php if( get_field( "time_end" ) ): ?>
            - <?php the_field( "time_end" ); ?>,
        <?php endif; ?>

        <?php if( get_field( "location" ) ): ?>
            at <?php the_field( "location" ); ?>
        <?php endif; ?>
        </p>

        <?php the_content(); ?>

        <?php if( get_field( "speaker" ) ): ?>
            <p>Speaker(s): <?php the_field( "speaker" ); ?></p>
        <?php endif; ?>

        <?php if( get_field( "topic" ) ): ?>
            <p>Topic(s): <?php the_field( "topic" ); ?></p>
        <?php endif; ?>

        <?php if( get_field( "invite" ) ): ?>
            <p><a href="<?php the_field( 'invite' ); ?>" class="button"><i class="icon-file-pdf"></i> Invite</a></p>
        <?php endif; ?>

        <a href="<?php the_permalink(); ?>" class="share-icon">Share <i class="icon-arrow-right2"></i></a>  
    </section>
</div>

Now let’s create a loop to show a list of upcoming events. This is a WordPress loop, with some extra args to get what we’re looking for. First off, notice we’re creating a variable at the beginning, getting the current date. We need that for our arguments later in the loop, for retrieving past or future events.

We’re looking for 20 published events, with a date that is greater or equal to today, then were showing them in an ascending order based on their date.

|*|-php-|*|
<?php
$today = current_time('Ymd');

    $args = array(
        'post_type' => 'events',
        'post_status' => 'publish',
        'posts_per_page' => '20',
        'meta_query' => array(
        array(
            'key' => 'date',
            'compare' => '>=',
            'value' => $today,
        )
        ),
        'meta_key' => 'date',
        'orderby' => 'meta_value',
            'order' => 'ASC',
        'paged' => ( get_query_var('paged') ? get_query_var('paged') : 1 ),
    );
    $query = new WP_Query($args);
    if ($query->have_posts()) :
    while ($query->have_posts()) : $query->the_post(); 
?>

    <?php get_template_part('content', 'events'); ?>

        <?php endwhile; ?>

        <?php mipla_paging_nav(); ?>

    <?php else : ?>

        <h3>More events coming soon...</h3>

        <?php get_template_part( 'content', 'none' ); ?>

    <?php endif; ?>

<?php wp_reset_postdata(); ?>

Make sure to reset the postdata, especially if your including another loop on your page. If you want to display past events, you can run the same loop again, just change the compare arguments to 'compare' => '<=',. This will look for dates that are less than or equal to the current date.

If you haven't used ACF, I suggest giving it a try. If you've found something you like better lemme know.