New Check out the curated list of the finest design resources I've gathered for you! Take a look →

How I create custom events feature using ACF

Are you looking to add a custom event feature to your WordPress website? In this guide, I’ll show you how to use the popular plugin, Advanced Custom Fields (ACF), to create custom events on your website.

Table of Contents

Creating a Custom Post Type Event for custom event use WordPress ACF

To begin, we need to create a custom post type for the events. This will ensure easy maintenance and organization of the events. Here are the steps to create a custom post-type event using ACF:

Step 1. Go to the Post Types menu inside ACF and Create Post Type Event

Custom event use WordPress ACF
Custom event use WordPress ACF

This feature is available on ACF v6

Step 2. Set up support for the content editor, including the title, editor, and featured image

Step 3. Choose a menu icon for the custom post type. For example, you can use the dashicons-calendar icon to represent events

Step 4. Don’t forget to turn on the toggle for Archive. This will enable you to create a custom archive for the events.

The rest of the settings can be left as generated by ACF-CPT.

By following the above steps, you have successfully created a custom post type for the events.

Creating a New Field Group Event: Calendar on ACF

Now that we have created a custom post type for the events, the next step is to create a new field group event using ACF. This will allow us to add custom fields to the events, including the date of the event.

Step 1. Create a new field with the type Date Picker and set it as required

Step 2. Choose Custom as the display format and fill in the format d/m/Y

Set Display Format to Custom for The Field DatePicker
Set Display Format to Custom for The Field DatePicker

Step 3. Choose Ymd as the return format

Choose Ymd as the Return Format
Choose Ymd as the Return Format

Step 4. Set the field to required in the Validation section.

Step 5. Add a rule for the field. For example, you can set the rule to show the events that are happening in the future.

Set the rule to show only in Event Post Type
Set the rule to show only in Event Post Type

Once you have set up the above steps, click on the Save button.

Creating a Custom Archive for Custom Post Type Event called archive-event.php

The next step is to create a custom archive for the custom post-type event. Here’s how you can do it:

I used the twenty-twentyone theme for demo purposes and did not create a child theme.

Before we start customizing the archive-event.php, let’s create some dummy event content.

Create some dummy event content
Create some dummy event content
  • The first event is an old event that I set on a custom field in April 2022,
  • The second event is a new event that I set on a custom field on April 31, 2023.

Step 1. Customize the archive-event.php file and create a custom query. You can copy the code provided below and modify it to suit your needs.

<?php
/**
 * The template for displaying archive pages
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package WordPress
 * @subpackage Twenty_Twenty_One
 * @since Twenty Twenty-One 1.0
 */

get_header();

// Get Today's Date
$today = date( 'Ymd' );
?>

<?php 
  /* ======================================================================== */
  /* Custom Query For Showing Future Events */
  /* ======================================================================== */


  // Custom Query for Future Event
	$argsFuture = array(
		'post_type'       => 'event',
		'posts_per_page'  => -1,
		'orderby'         => 'meta_value', 
		'meta_query'      => array(
			array(
				'key' => 'date_event', // It's should same with Name of Custom fields that we registered
				'value' => $today,
				'compare' => '>='
			),
		),
	);

  // Get Future Event
  $futureEventQuery = new WP_Query($argsFuture);

  if ( $futureEventQuery->have_posts()) : 
?>
  <header class="page-header alignwide">
    <h1 class="page-title"><?php echo esc_html('Upcoming Event', 'rzwn'); ?></h1>
  </header>
<?php endif; wp_reset_postdata(); ?>

<?php 
  /* ======================================================================== */
  /* Custom Query For Showing Past Events */
  /* ======================================================================== */
  $argsPast = array(
		'post_type'       => 'event',
		'posts_per_page'  => -1,
		'orderby'         => 'meta_value', 
		'meta_query'      => array(
			array(
				'key' => 'date_event', // It's should same with Name of Custom fields that we registered
				'value' => $today,
				'compare' => '<'
			),
		),
  );

  // Get Past Event
  $pastEventQuery = new WP_Query($argsPast);

  if ( $pastEventQuery->have_posts() ) :
?>
  <header class="page-header alignwide">
    <h1 class="page-title"><?php echo esc_html('Past Event', 'rzwn'); ?></h1>
  </header>
<?php endif; wp_reset_postdata(); ?>

<?php
get_footer();

If everything is working well, the front-end will look like this.

Create custom archive-event
Create custom archive-event

Creating Single Archive for Showing Event single-event.php

Now we need to create a custom single event page to show the date of the event. Here’s how you can do it:

Step 1. Overwrite the code from single.php by copying and pasting the code below.

I overwrite from single.php

<?php
/**
 * The template for displaying all single event
 *
 * @package WordPress
 * @subpackage Twenty_Twenty_One
 * @since Twenty Twenty-One 1.0
 */

get_header();

/* Start the Loop */
while ( have_posts() ) :
	the_post();

  echo '<h1 style="text-align: center;">Single Event</h1>';

endwhile; // End of the loop.

get_footer();

Creating Content for CPT Event

We have created archive-event.php and single-event.php. Now it’s time to create a card-event for the archive and content for the single-page event. Here’s how you can do it:

Step 1. Create two files and place them inside template-part.

|-- template-parts
		|-- event
				|-- event-card.php
				|-- event-single.php

Step 2. Update the archive-event page. It should look like this.

<?php
/**
 * The template for displaying archive pages
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package WordPress
 * @subpackage Twenty_Twenty_One
 * @since Twenty Twenty-One 1.0
 */

get_header();

// Get Today's Date
$today = date( 'Ymd' );
?>

<?php 
  /* ======================================================================== */
  /* Custom Query For Showing Future Events */
  /* ======================================================================== */
	$argsFuture = array(
		'post_type'       => 'event',
		'posts_per_page'  => -1,
		'orderby'         => 'meta_value', 
		'meta_query'      => array(
			array(
				'key' => 'date_event', // It's should same with Name of Custom fields that we registered
				'value' => $today,
				'compare' => '>='
			),
		),
	);

  // Get Future Event
  $futureEventQuery = new WP_Query($argsFuture);

  if ( $futureEventQuery->have_posts()) : 
?>
  <header class="page-header alignwide">
    <h1 class="page-title" style="text-align: center;"><?php echo esc_html('Upcoming Event', 'rzwn'); ?></h1>
  </header>

  <?php while ( $futureEventQuery->have_posts() ) : $futureEventQuery->the_post();  ?>
    <?php get_template_part( 'template-parts/event/event', 'card' ); ?>
  <?php endwhile; ?>
<?php endif; wp_reset_postdata(); ?>

<?php 
  /* ======================================================================== */
  /* Custom Query For Showing Past Events */
  /* ======================================================================== */
  $argsPast = array(
		'post_type'       => 'event',
		'posts_per_page'  => -1,
		'orderby'         => 'meta_value', 
		'meta_query'      => array(
			array(
				'key' => 'date_event', // It's should same with Name of Custom fields that we registered
				'value' => $today,
				'compare' => '<'
			),
		),
  );

  // Get Past Event
  $pastEventQuery = new WP_Query($argsPast);

  if ( $pastEventQuery->have_posts() ) :
?>
  <header class="page-header alignwide">
    <h1 class="page-title" style="text-align: center;"><?php echo esc_html('Past Event', 'rzwn'); ?></h1>
  </header>

  <?php while ( $pastEventQuery->have_posts() ) : $pastEventQuery->the_post();  ?>
    <?php get_template_part( 'template-parts/event/event', 'card' ); ?>
  <?php endwhile; ?>
<?php endif; wp_reset_postdata(); ?>

<?php
get_footer();

Step 3. Inside our new file event-card.php, copy this code below.

<?php
/**
 * Template part for displaying card event
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package WordPress
 * @subpackage Twenty_Twenty_One
 * @since Twenty Twenty-One 1.0
 */

?>

<article id="event-<?php the_ID(); ?>" <?php post_class(); ?>>
	<header class="entry-header">
    <?php the_title( sprintf( '<h2 class="entry-title default-max-width"><a href="%s">', esc_url( get_permalink() ) ), '</a></h2>' ); ?>

		<?php twenty_twenty_one_post_thumbnail(); ?>
	</header><!-- .entry-header -->

	<div class="entry-content">
		<?php
      the_content(
        twenty_twenty_one_continue_reading_text()
      );
		?>
	</div><!-- .entry-content -->

	<footer class="entry-footer default-max-width">
    <?php 
      $dateEvent = get_field('date_event');
      $dateEventNewFormat = date( "j F, Y", strtotime($dateEvent) );

      echo '<span class="posted-on">'. $dateEventNewFormat .'</span>';
    ?>
	</footer><!-- .entry-footer -->
</article><!-- #post-<?php the_ID(); ?> -->

If it works properly, your front-end should display the events page as shown in the image below.

Archive Event after finished updating with adding custom query
Archive Event after finished updating with adding custom query

However, if you have many events, I recommend creating a load-more pagination using AJAX.

Step 4. To create a single event, copy and paste the code below. If everything goes smoothly, you will see the result for both upcoming and past events as shown in the images below.

<?php
/**
 * Template part for displaying posts
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package WordPress
 * @subpackage Twenty_Twenty_One
 * @since Twenty Twenty-One 1.0
 */

 $today = date( 'Ymd' );
 $dateEvent = get_field('date_event');
 $dateEventNewFormat = date( "j F, Y", strtotime($dateEvent) );
?>

<article id="event-<?php the_ID(); ?>" <?php post_class(); ?>>

	<header class="entry-header alignwide">
		<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
	</header><!-- .entry-header -->
  
	<div class="entry-content">
    <?php if ( $dateEvent < $today ) : ?>
      <h2>Sorry the event is closed</h2>
    <?php else: 
      the_content();
    endif; ?>
	</div><!-- .entry-content -->

	<footer class="entry-footer default-max-width">
    <?php 
      echo '<span class="posted-on">'. $dateEventNewFormat .'</span>';
    ?>
	</footer><!-- .entry-footer -->
</article><!-- #post-<?php the_ID(); ?> -->
Upcoming event in single-event page
Upcoming event in single-event page
Past event in single-event page
Past event in single-event page

I hope this article has helped you learn how to create custom events using WordPress ACF. You may also be interested in checking out my other case studies available here.

Rizwan Aritonang

An independent WordPress & Front-End Developer from Bandung, Indonesia.

Get In Touch

Leave a Comment