Using ACF to create Randomized Ad Block

• Trishah

• July 26, 2021 at 9:01 pm

I created this solution and wanted to share it with the community.

I’m developing a website based on a TV show with multiple seasons. I wanted a Gutenberg block that I could drop into the post content at various places to display either a single Amazon image ad chosen randomly from either season-specific lists of ads, or a general list of ads. You will need ACF PRO to accomplish this.

SUMMARY
Create an OPTIONS Page
Create Repeater fields for the lists of ads
Create an ACF Radio Button Block to use in Gutenberg

INSTRUCTIONS
Here is what I did:

#1 Create an Options Page where the lists of ads will be entered.

Place the following in: functions.php

if( function_exists('acf_add_options_page') ) {

    acf_add_options_page();

}

#2 Create a custom Gutenberg Block for your ads

Add in function.php the following code:

// ACF Blocks

add_action('acf/init', 'my_acf_init_block_types');
function my_acf_init_block_types() {

    if( function_exists('acf_register_block_type') ) {

        acf_register_block_type(array(
            'name'              => 'ad_season',
            'title'             => __('Random Ads by Season'),
            'description'       => __('Random Ads by Season'),
            'render_template'   => 'templates/ad_season.php',
            'category'          => 'formatting',
            'icon'              => 'info-outline',
            'keywords'          => array( 'random', 'ad', 'season' ),
        ));

    }
}

NOTE: You can change the icon by using any WordPress dashicon, just leave off the “dashicon” part of the icon name.

NOTE: Keywords are the words you use to search for blocks.

#3 Create Repeater Fields for the lists of ads.

I created 7 Repeaters, each with a single textarea sub_field… one for each season of the show (6 seasons) and one for ads that could apply to any season. I chose to put the season number, i.e., “Season 1”, etc., as the ADD ROW name to make finding the right list easier.

Then instead of assigning them to a post or page LOCATION, assign each to the OPTIONS page you created.

You can find instructions on Repeater Fields here: Repeater Field Documentation

I named these fields:

random_ads_any_season
random_ads_season_1
random_ads_season_2
random_ads_season_3
random_ads_season_4
random_ads_season_5
random_ads_season_6

Here is what my list of ACF fields looks like:

CREATING THE GUTENBERG BLOCK

#4 Create a template for the block

Create a PHP file named ad_season.php and put it in your child theme in a templates directory.

wp-content/themes/theme_child/templates/ad_season.php

In this file I placed the following code that will call a single ad from one of the lists:

<?php

/**
 * Random Ads
 *
 * @param   array $block The block settings and attributes.
 * @param   string $content The block inner HTML (empty).
 * @param   bool $is_preview True during AJAX preview.
 * @param   (int|string) $post_id The post ID this block is saved to.
 */

?>

<?php if( get_field('ad_season') == 'any'): ?>
<div class="random_ad">
<?php $ads = get_field( 'random_ads_any_season', 'option' );
    if( is_array( $ads ) ) {
        $ad = array_rand( $ads );
        echo $ads[$ad]['random_ad'];
    } ?>
</div>
<?php endif; ?>

<?php if( get_field('ad_season') == '1'): ?>
<div class="random_ad">
<?php $ads1 = get_field( 'random_ads_season_1', 'option' );
    if( is_array( $ads1 ) ) {
        $ad1 = array_rand( $ads1 );
        echo $ads1[$ad1]['random_ad'];
    } ?>
</div>
<?php endif; ?>

<?php if( get_field('ad_season') == '2'): ?>
<div class="random_ad">
<?php $ads2 = get_field( 'random_ads_season_2', 'option' );
    if( is_array( $ads2 ) ) {
        $ad2 = array_rand( $ads2 );
        echo $ads2[$ad2]['random_ad'];
    } ?>
</div>
<?php endif; ?>

<?php if( get_field('ad_season') == '3'): ?>
<div class="random_ad">
<?php $ads3 = get_field( 'random_ads_season_3', 'option' );
    if( is_array( $ads3 ) ) {
        $ad3 = array_rand( $ads3 );
        echo $ads3[$ad3]['random_ad'];
    } ?>
</div>
<?php endif; ?>

<?php if( get_field('ad_season') == '4'): ?>
<div class="random_ad">
<?php $ads4 = get_field( 'random_ads_season_4', 'option' );
    if( is_array( $ads4 ) ) {
        $ad4 = array_rand( $ads4 );
        echo $ads4[$ad4]['random_ad'];
     } ?>
</div>
<?php endif; ?>

<?php if( get_field('ad_season') == '5'): ?>
<div class="random_ad">
<?php $ads5 = get_field( 'random_ads_season_5', 'option' );
    if( is_array( $ads5 ) ) {
        $ad5 = array_rand( $ads5 );
        echo $ads5[$ad5]['random_ad'];
    } ?>
</div>
<?php endif; ?>

<?php if( get_field('ad_season') == '6'): ?>
<div class="random_ad">
<?php $ads6 = get_field( 'random_ads_season_6', 'option' );
    if( is_array( $ads6 ) ) {
        $ad6 = array_rand( $ads6 );
        echo $ads6[$ad6]['random_ad'];
 } ?>
</div>
<?php endif; ?>

#5 Create an ACF Radio Button Block

This will be the block that you will use in your page or post to display the ad.

ACF Radio Button Documentation

I named my field: ad_season

And used the following for the radio buttons:

any : Any Season
1
2
3
4
5
6

Then choose the LOCATION of: “Block” is equal to “Random Ads by Season” (Note: this you created in the functions.php in step #1)

#6 Enter Ad Code on OPTIONS Page

When you go to the OPTIONS page you will see the Repeater Fields you created. Enter as many ad codes as you want to each.

#7 Insert the Random Ad Block into your Page or Post

Click the “+” button and search for your block:

Click the pencil icon to edit the block. Then choose the list you want the random ad to be chosen from:

You can add as many of these Blocks to your page or post as you want. Each will show a different random ad even if they are all from the same list. NOTE: Sometimes “random” means the same ad will be chosen again on the same page load.

I hope this helps you.

• Trishah

• July 29, 2021 at 8:05 pm

Correction: In my original post above, the last image is wrong. It should show the what the Random Ad Radio Button Block looks like.