Creating a Dynamic Events Slider

For this project I was asked to create a dynamic events slider, one that would update the events shown on the slider automatically as they were created.

For this project, I used a couple of plugins.

  • Advanced Custom Fields
  • Soliloquy – Featured Content Addon
  • Soliloquy – Featured Content – Custom Queries – Custom Fields
  • The Events Calendar PRO

Here, the goal was to allow the user to indicate, while creating a new event, that they wanted the event to appear on a slider on the homepage for the website.

First Step:
In Soliloquy, go to the Addons menu.

Select to install/enable the Featured Content Addon.

Second Step:
Now we will need to install/activate the Soliloquy – Featured Content – Custom Queries – Custom Fields plugin.

This plugin is actually just a simple php file.

Click the bolded text below to see the code.

Click to see the code for the plugin.

File Name: soliloquy-featured-content-custom-queries-custom-fields.php

<?php
/**
* Plugin Name: Soliloquy - Featured Content - Custom Queries - Custom Fields
* Plugin URI: http://soliloquywp.com
* Version: 1.0
* Author: Tim Carr
* Author URI: http://www.n7studios.co.uk
* Description: Restrict Featured Content by Author
*/
 
/**
* Add Custom Field Arguments to Featured Content Queries
*
* @param string $html HTML Link
* @param obj $post WP_Post
* @param array $data Slider Configuration
* @return string HTML Link
*/
function sol_soliloquy_fc_custom_fields( $query_args, $id, $data ) {
 
    // You could check for a specific slider ID here, if you only want
    // to amend your FC query on a single slider.
//    if ( 29 !== $id ) {
//        return $query_args;
//    add_filter( 'soliloquy_fc_cache_ID', '__return_true' );
//    }
 
    // $query_args is an array for WP_Query:
    // http://codex.wordpress.org/Class_Reference/WP_Query
 
    // Check if Featured Content has already set some Custom Field arguments
    // If not, set the meta (custom field) query as an array
    // This prevents us overwriting any existing arguments that may exist
    if ( ! is_array( $query_args['meta_query'] ) ) {
        $query_args['meta_query'] = array();
    }
 
    // Only get Posts that have a custom field name of 'test' equal to a value of '1'
    // See https://codex.wordpress.org/Class_Reference/WP_Query#Custom_Field_Parameters for full parameters
    $query_args['meta_query'][] = array(
        'key'   => 'featured',
        'value' => '1',
    'compare' => '=='
    );
 
    // Return query arguments
    return $query_args;
 
}
add_filter( 'soliloquy_fc_query_args', 'sol_soliloquy_fc_custom_fields', 10, 3 );

Place the PHP file under your WordPress Plugins Directory. Example.Com\wp-content\plugins\my-plugin.php
Then enable it under your wp plugins menu.

Notice in the code where it says, ‘key’ => ‘featured’, & ‘value’ => ‘1’. This means the plugin is going to add an additional requirement for posts to appear on the Soliloquy slider; they must have a ‘Featured’ property equal to 1.

Third Step:

Under your WordPress Plugins Menu, Choose “Add New”, then search for/install Advanced Custom Fields. Now activate the plugin.

A new menu should appear.

Create a new field group with the following settings:

Under Field Order,
Create a Field with these settings;

  • Field Label: Featured?
  • Field Name: Featured
  • Field Type: True / False
  • Required?: No
  • Default Value: (unchecked)

Under Location,
Use these settings,

Show this field group if; Post Type | is equal to | tribe_events

Now when you go to create a new event, you will see on the right-hand side a new custom option.

 

With the Featured? field checked, the “value” is now set to 1. This will satisfy the additional filter we’ve set for Soliloquy.

You don’t have to set a Featured Image for the event, but I highly recommend that you do, since that’s the image that will appear in the slider.

Create a new slider in Soliloquy, and choose the Featured Slider to inherit the config from.

Under External Slider, and under Slider, for the Select Your Post Type(s), set it to Event.

Then choose whatever other settings you’d like your slider to have.

When you are done setting up your slider, insert it into your page using the code featured on the right-hand side.

When you’re done inserting the Soliloquy Slider into your page/post then update/refresh and you will see your slider appear.

Your slider will automatically feature all of the Event post types where you have checked the Featured? option.

To remove an even from the slider, simply edit the event, and uncheck the Featured? option.

I hope you’ve enjoyed this tutorial, if you have any questions or issues, feel free to leave me a comment below.