Design & Development

Roll our own Events with Custom Post Types and Advanced Custom Fields

Posted on

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.

Events CPT

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.

acf

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.

event-cf

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.

Previous Design and Development Love

Alter elements in the DOM based on scrollTop position

Next functions.php

A few of my favorite WP functions – collection 1

4 thoughts on “Roll our own Events with Custom Post Types and Advanced Custom Fields

  1. Hi,

    I can’t get it working, how can I debug my php code? I am developing locally, so I can’t share anything real yet. I have ACF working of cause, but when trying to make the upcoming and past events list, I getting nowhere. Hope you can help. best Anders

    1. Make sure your in php debug mode, by setting it to TRUE in your wp-config file, that will help point out where errors might be. When dealing with php errors, I find just by going over my variable names, and double checking how I’m using the date() function (when dealing with events) usually helps. Also, double check your conditionals, if your writing them like that. ACF provides great doc’s on their site so be sure to cross reference there as well. Good luck!

  2. Hi there,

    Thats a great bit of code there it helped a lot, have another question is it possible to make so it sets weekly events like every Monday to Friday recurring events?

    Thanks in advance,

    1. Hey, great, glad it helped. Setting reoccurring events would be possible but would be a lot more robust, I’d maybe lean on an established plugin for that. I am working on a project where I may try to do just that, I’ll post my code if it works out well. If you had any luck with this let me know.
      Cheers

Leave a Reply

Your email address will not be published. Required fields are marked *