«Return to Blog List Adding a Custom WP_Query to a Divi Page

I’m gonna be upfront about not liking Divi, or any other page-builder. While they make a lot of things easier for designers who aren’t developers, they make some things harder, and maybe even impossible.

Recently, I designed a site using Divi because that’s what the client is used to. They didn’t have a lot of technical requirements, so I figured Divi would be OK. And it was OK, until it came to creating a listing of the ‘events’ custom post type: we wanted past events to drop off the list so only upcoming events are shown.

To accomplish this, I needed to compare today’s date (Ymd) with the value of a custom field called ‘event_enddate’ (also Ymd). If the end date is greater than or equal to today’s date, then the event is not past, and the event shows on the listing of upcoming events. Once today’s date is greater than the end date, the event is excluded from the listing. (FYI, custom fields were created with ‘Advanced Custom Fields Pro’, and the value for the date field was configured to Ymd in ACF’s UI when the custom field was created).

I’ve written WP_queries like this hundreds of times, and this one looks like this:

$today = date('Ymd', strtotime('-6 hours'));
$eventslist = new WP_Query(array( 
    'post_type' => 'events', 
    'posts_per_page' => 6,
    'paged' => $paged,
    'meta_key' => 'event_startdate',
    'orderby' => 'meta_value',
    'order' => 'ASC',
    'meta_query' => array(
        array(
        'key' => 'event_enddate',
        'meta-value' => $value,
        'value' => $today,
        'compare' => '>=',
        'type' => 'CHAR'
        )
    )
));
if ($eventslist->have_posts()) :
    while ( $eventslist->have_posts() ) : $eventslist->the_post();
    $date = get_field('event_dates');
    $place = get_field('national_state');
    $title = get_the_title();
    $link = get_the_permalink();
    $excerpt = get_the_excerpt();
    echo '
';
        echo '
'.$title.'
';
        echo '
';
        echo '
';
        echo '
'.$date.' | '.$place.' – '.$excerpt.'
'; 
        echo '
';
        echo '
';
    echo '
'; 
    endwhile; 
    else :
    echo '
No upcoming events are listed at this time.
';
endif;

The problem is how to get this query into a Divi page. You can’t just add PHP code to a text module; it will break the page. You can add a ‘blog’ module and specify the ‘Events’ custom post type, but that does not offer a way to make the comparison and add some of the other custom fields to the listing blurb.

Then I learned that Divi had recently introduced custom fields to its blog conditions, allowing me to make ‘event_enddate’ part of a display conditional (so exciting!). Unfortunately, blog conditions still offers no way to compare the custom field to today’s date (so deflating!).

Next I contacted both Divi support, and a Divi ‘expert’ who extensively publishes Divi ‘how-tos’. Neither had any ideas beyond “Consult a local developer.” Uh, I AM a local developer. I was frankly shocked that they had no advice about how to do something that is a common use-case and quite simple to do with a non-Divi template.

To make a long story short and way less frustrating, I finally found a plugin called ‘Insert PHP Code Snippet’ from XYZScripts. It allows you to create shortcodes from PHP code. And that’s what we did with the WP_Query shown above, creating a shortcode we could paste into the Divi text module (in this case: [xyz-ips snippet="Upcoming-Events"]).

And just like that, life is good again. Maybe not as good as life without Divi, but, still.

Tags: Divi, page builders