How to create and display upcoming events in WordPress

Spread the love

we looked at registering a custom post type for events. We customized the dashboard by adding a custom metabox using advance custom fields plugin. To make it easier for the user to input dates.

Table of Contents

While WordPress only shows the title and the date column for the custom post type in post admin screen, we added our own custom columns to show event start date, end date and the event venue. Doing so, we completed the most part of our upcoming events child theme.

In the this series, we will:

Create Child theme
Custom CPT – Event (Through Code add the CPT)
Custom Tags – Add tags like music, fitness, etc
On backend – start and end date of the event through ACF
On frontend – Display event on the upcoming/recent order
On frontend – Display title, image, tag, start and end date
On frontend – Add a dropdown of tags and it should work on Ajax filter
On frontend – When the event start date comes and it’s today’s date then it should show on the top of the page.
On frontend – When event start data expire then it should not show on the the page

Step 1. Create a child theme

twentytwenty-child/style.css

/*
 Theme Name:   Twenty Twenty Child
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Twenty Fifteen Child Theme
 Author:       Diwakar Academy
 Author URI:   https://diwakaracademy.com/
 Template:     twentytwenty
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twentytwentychild
*/

twentytwenty-child/functions.php

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    $parenthandle = 'parent-style';
    $theme = wp_get_theme();
    wp_enqueue_style( $parenthandle, get_template_directory_uri() . '/style.css',
        array(),  // if the parent theme code has a dependency, copy it to here
        $theme->parent()->get('Version')
    );
}

Step 2. Register Post type, register taxonomy and add ACF Plugin

twentytwenty-child/functions.php

<?php

function register_custom_post_type(){

    register_post_type('event',[
        'labels' => [
            'name' => 'Events',
            'singular_name' => 'Event',
            'menu_name' => 'Events',
        ],
        'public' => true,
        'publicly_queryable' => true,
        'has_archive' => true,
        'rewrite' => ['slug' => 'event'],
        'menu_icon'=> 'dashicons-editor-table',
        'supports' => [
            'title',
            'thumbnail',
        ]

    ]);

}

add_action('init','register_taxonomies');

function register_taxonomies(){

    register_taxonomy('event_cat',['event'],[
        'hierarchical' => true,
        'labels' => [
            'name' => 'Categories',
            'singular_name' => 'Category',
            'menu_name' => 'Categories',
        ],
        'show_ui' => true,
        'show_admin_column' => true,
        'rewrite' => ['slug' => 'cat'],
    ]);


}

Step 3. Display events using template file

twentytwenty-child/template-parts/loop-event.php

<div class="event_block">
    <?php if(has_post_thumbnail()): ?>
        <img src="<?php the_post_thumbnail_url(); ?>" alt="<?php the_title(); ?>" width="400" height="400">
    <?php endif; ?>
    <h4><?php the_title(); ?></h4>
    <?php
        $term_obj_list = get_the_terms(get_the_ID(),'event_cat');
        echo join(',',wp_list_pluck($term_obj_list,'name'));

        $start_date = get_field('start_date');
        $end_date = get_field('end_date');
        if($start_date && $end_date):
    ?>
        <ul>
            <li><strong>Start Date:</strong> <?php echo $start_date; ?></li>
            <li><strong>End Date:</strong> <?php echo $end_date; ?></li>
        </ul>
    <?php endif; ?>
</div>

twentytwenty-child/templates/template-events.php

<?php
/*Template Name: Events Page*/
get_header();

$args = [
        'post_type' => 'event',
        'posts_per_page' => -1,
    ];
$events = new WP_Query($args);
?>

    <main>

        <div class="container" style="width: 80%; margin: 0 auto;">
            <h2><?php the_title(); ?></h2>
            <?php while ($events->have_posts()): $events->the_post();
                get_template_part('template-parts/loop','event');
            endwhile; wp_reset_postdata(); ?>
        </div>

    </main>


<?php
get_footer();

Step 4. Display upcoming events using template file

twentytwenty-child/templates/template-events.php

<?php
/*Template Name: Events Page*/
get_header();

$args = [
        'post_type' => 'event',
        'posts_per_page' => -1,
        'orderby' => 'meta_value',
        'meta_key' => 'start_date',
        'order' => 'ASC',
        'meta_query' => [
            [
                'key' => 'start_date',
                'value' => date("Y-m-d"),
                'compare' => '>=',
                'type' =>'DATE',
            ]
        ]
    ];
$events = new WP_Query($args);
?>

    <main>

        <div class="container" style="width: 80%; margin: 0 auto;">
            <h2><?php the_title(); ?></h2>
            <?php while ($events->have_posts()): $events->the_post();
                get_template_part('template-parts/loop','event');
            endwhile; wp_reset_postdata(); ?>
        </div>

    </main>


<?php
get_footer();

Step 5. Add taxonomy ajax filter

twentytwenty-child/templates/template-events.php

<div class="js-filters">
	<?php if($terms = get_terms(['taxonomy'=>'event_cat'])):?>
	<select id="cat" name="cat">
		<option value="">Select Category</option>
		<?php foreach ($terms as $term): ?>
			<option value="<?php echo $term->slug; ?>"><?php echo $term->name; ?></option>
		<?php endforeach; ?>
	</select>
	<?php endif; ?>
</div>

twentytwenty-child/assets/js/scripts.js

jQuery(function ($) {

    $('select#cat').on('change',function () {

        var cat = $(this).val();

        var data = {
            action:'filter_post',
            cat:cat
        };

        $.ajax({
          url:variables.ajax_url,
          type:'POST',
          data:data,
            success:function (response) {
               $('.js-events').html(response)
            }
        })


    });

});

twentytwenty-child/functions.php

<?php 
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_script('jquery');

    $parenthandle = 'parent-style';
    $theme = wp_get_theme();
    wp_enqueue_style( $parenthandle, get_template_directory_uri() . '/style.css',
        array(),  // if the parent theme code has a dependency, copy it to here
        $theme->parent()->get('Version')
    );

    wp_enqueue_script('scripts-js',get_stylesheet_directory_uri().'/assets/js/scripts.js',['jquery'],'',true);
    wp_localize_script('scripts-js','variables',[
       'ajax_url' => admin_url('admin-ajax.php'),
    ]);
}



add_action('wp_ajax_filter_post','filter_post');
add_action('wp_ajax_nopriv_filter_post','filter_post');

function filter_post(){

$args = [
    'post_type' => 'event',
    'posts_per_page' => -1,
    'orderby' => 'meta_value',
    'meta_key' => 'start_date',
    'order' => 'ASC',
    'meta_query' => [
        [
            'key' => 'start_date',
            'value' => date("Y-m-d"),
            'compare' => '>=',
            'type' =>'DATE',
        ]
    ]
];
$type = $_REQUEST['cat'];
if(!empty($type)){
    $args['tax_query'][] = [
        'taxonomy' => 'event_cat',
        'field' => 'slug',
        'terms' => $type,
    ];
}
$events = new WP_Query($args);
 while ($events->have_posts()): $events->the_post();
    get_template_part('template-parts/loop','event');
 endwhile; wp_reset_postdata();
 wp_die();
}

Full Source Code

twentytwenty-child/functions.php

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_script('jquery');

    $parenthandle = 'parent-style';
    $theme = wp_get_theme();
    wp_enqueue_style( $parenthandle, get_template_directory_uri() . '/style.css',
        array(),  // if the parent theme code has a dependency, copy it to here
        $theme->parent()->get('Version')
    );

    wp_enqueue_script('scripts-js',get_stylesheet_directory_uri().'/assets/js/scripts.js',['jquery'],'',true);
    wp_localize_script('scripts-js','variables',[
       'ajax_url' => admin_url('admin-ajax.php'),
    ]);
}

add_action('init','register_custom_post_type');

function register_custom_post_type(){

    register_post_type('event',[
        'labels' => [
            'name' => 'Events',
            'singular_name' => 'Event',
            'menu_name' => 'Events',
        ],
        'public' => true,
        'publicly_queryable' => true,
        'has_archive' => true,
        'rewrite' => ['slug' => 'event'],
        'menu_icon'=> 'dashicons-editor-table',
        'supports' => [
            'title',
            'thumbnail',
        ]

    ]);

}

add_action('init','register_taxonomies');

function register_taxonomies(){

    register_taxonomy('event_cat',['event'],[
        'hierarchical' => true,
        'labels' => [
            'name' => 'Categories',
            'singular_name' => 'Category',
            'menu_name' => 'Categories',
        ],
        'show_ui' => true,
        'show_admin_column' => true,
        'rewrite' => ['slug' => 'cat'],
    ]);


}

add_action('wp_ajax_filter_post','filter_post');
add_action('wp_ajax_nopriv_filter_post','filter_post');

function filter_post(){

$args = [
    'post_type' => 'event',
    'posts_per_page' => -1,
    'orderby' => 'meta_value',
    'meta_key' => 'start_date',
    'order' => 'ASC',
    'meta_query' => [
        [
            'key' => 'start_date',
            'value' => date("Y-m-d"),
            'compare' => '>=',
            'type' =>'DATE',
        ]
    ]
];
$type = $_REQUEST['cat'];
if(!empty($type)){
    $args['tax_query'][] = [
        'taxonomy' => 'event_cat',
        'field' => 'slug',
        'terms' => $type,
    ];
}
$events = new WP_Query($args);
 while ($events->have_posts()): $events->the_post();
    get_template_part('template-parts/loop','event');
 endwhile; wp_reset_postdata();
 wp_die();
}

twentytwenty-child/templates/template-events.php

<?php
/*Template Name: Events Page*/
get_header();

$args = [
        'post_type' => 'event',
        'posts_per_page' => -1,
        'orderby' => 'meta_value',
        'meta_key' => 'start_date',
        'order' => 'ASC',
        'meta_query' => [
            [
                'key' => 'start_date',
                'value' => date("Y-m-d"),
                'compare' => '>=',
                'type' =>'DATE',
            ]
        ]
    ];
$events = new WP_Query($args);
?>

    <main>

        <div class="container" style="width: 80%; margin: 0 auto;">
            <h2><?php the_title(); ?></h2>
            <div class="js-filters">
                <?php if($terms = get_terms(['taxonomy'=>'event_cat'])):?>
                <select id="cat" name="cat">
                    <option value="">Select Category</option>
                    <?php foreach ($terms as $term): ?>
                        <option value="<?php echo $term->slug; ?>"><?php echo $term->name; ?></option>
                    <?php endforeach; ?>
                </select>
                <?php endif; ?>

            </div>
            <br>
            <div class="js-events">
            <?php while ($events->have_posts()): $events->the_post();
                get_template_part('template-parts/loop','event');
            endwhile; wp_reset_postdata(); ?>
            </div>
        </div>

    </main>


<?php
get_footer();

twentytwenty-child/template-parts/loop-event.php

<div class="event_block">
    <?php if(has_post_thumbnail()): ?>
        <img src="<?php the_post_thumbnail_url(); ?>" alt="<?php the_title(); ?>" width="400" height="400">
    <?php endif; ?>
    <h4><?php the_title(); ?></h4>
    <?php
        $term_obj_list = get_the_terms(get_the_ID(),'event_cat');
        echo join(',',wp_list_pluck($term_obj_list,'name'));

        $start_date = get_field('start_date');
        $end_date = get_field('end_date');
        if($start_date && $end_date):
    ?>
        <ul>
            <li><strong>Start Date:</strong> <?php echo $start_date; ?></li>
            <li><strong>End Date:</strong> <?php echo $end_date; ?></li>
        </ul>
    <?php endif; ?>
</div>

twentytwenty-child/assets/js/scripts.js

jQuery(function ($) {

    $('select#cat').on('change',function () {

        var cat = $(this).val();

        var data = {
            action:'filter_post',
            cat:cat
        };

        $.ajax({
          url:variables.ajax_url,
          type:'POST',
          data:data,
            success:function (response) {
               $('.js-events').html(response)
            }
        })


    });

});

twentytwenty-child/style.css

/*
 Theme Name:   Twenty Twenty Child
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Twenty Fifteen Child Theme
 Author:       Diwakar Academy
 Author URI:   https://diwakaracademy.com/
 Template:     twentytwenty
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twentytwentychild
*/

How to create crud operations plugin in WordPress

Step 1. Create a child theme

Step 2. Register Post type, register taxonomy and add ACF Plugin

Step 3. Display events using template file

Step 4. Display upcoming events using template file

Step 5. Add taxonomy ajax filter

Full Source Code

Related Articles

Leave a Reply Cancel reply