Add Icons to Repeater Select field in ACF

Recently I have worked on a website where I had been tasked to output custom icons, depending on the select field, the fields were used to display BER property icons, and some property specification icons on the website.

In my scenario, I was designing and developing the website with Oxygen Builder version 4.0.1 which supports PHP 8+, and I had my custom plugin created where I've added the code, this can be added directly to your theme code, or to the snippets plugin.

I will show you how to output custom icons through ACF PRO(Advanced Custom Fields) in a repeater field.

Create a Repeater and a Select field in ACF

First, we have to create a select field in the ACF inside the Repeater, define the list of icons with a label and value we want to include, and ensure that the output is set to both(array).

For the choices let's go with 6 different icons that we will use, 5 custom and 1 default, you will see what I mean soon by default.

Inside the choices let's add specs of car icons, we will take a scenario where we are building a car dealership website with a car listing and want to add custom specs to each car we will be showing on a website.

ac : Air Conditioning
wheels : Wheels
mirrors : Mirrors
seats : Seats
steering : Steering Wheel

I will also include a specification heading in there, and let that field be populated, as it may change with text.

Now I will want to show this field inside the custom Post Type "Car" and Publish It.

Designing or Downloading and Adding Icons

You can use custom icons that were designed by a designer, or in this scenario, I will download all the required icons from SVG Repo, download the required icons for this project, and add icons to the newly created folder "assets/icons/" inside my custom plugin.

Using Match Expression inside a Function

I am going to use Match Expression which is supported with PHP 8. If you are still using a lower version of PHP you can try writing your own code with Switch Expression, or if you want me to add it to the comments drop a comment below.

First, let's create a function with a parameter $icon

function my_custom_acf_icons($icon) {
    
}

Ok now let's include the icon locations and alt text that we're going to be using with variables and arrays with the following code:

$ac         = [
    "url"   => plugins_url( 'assets/icons/fan.svg', dirname(__FILE__) ),
    "alt"   => "Air Conditioning",
];
$wheels     = [ 
    "url"   => plugins_url( 'assets/icons/wheel.svg', dirname(__FILE__) ),
    "alt"   => "Wheel",
];
$mirros     = [
    "url"   => plugins_url( 'assets/icons/mirror.svg', dirname(__FILE__) ),
    "alt"   => "Mirror",
];
$seats      = [
    "url"   => plugins_url( 'assets/icons/car-seat.svg', dirname(__FILE__) ),
    "alt"   => "Car Seat",
];
$steering   = [
    "url"   => plugins_url( 'assets/icons/steering-wheel.svg', dirname(__FILE__) ),
    "alt"   => "Steering Wheel",
];

Note that I have used a "plugin_url" built-in WordPress function to get the path of the current plugin and to the folder where the code is located, and then used "dirname(__FILE__)" to get the directory of the "my-custom-plugin" as we want to get the path of the icons directly from there to assets folder.

If you are using a theme to develop the fields, replace it with the "get_template_directory_uri()", refer to WordPress codex documentation.

Let's get the field value from the parameter that we have added inside the function.

$icon_field = get_sub_field($icon);
$icon_value = $icon_field['value'];

Reference: https://www.advancedcustomfields.com/resources/select/

Ok, now we are going to add the Match Expression

$icon_match = match($icon_value) {
    'ac'        =>  $ac,
    'wheels'    =>  $wheels,
    'mirros'    =>  $mirros,
    'seats'     =>  $seats,
    'steering'  =>  $steering,
    default     =>  null,
};

Passing the value of the ACF select field, so what ever is going to match the value it will output the required link and alt for the SVG icon.

Now we will add a variable with the HTML code, and image and lt took from the match expression, using the ternary operator, if the value is missing it will not output anything.

And return the $img variable from the function.

$img =  $icon_match ? "<img class='spec-icons' src='${icon_match['url']}' alt='${icon_match['alt']} Icon'>" : "";

return $img;

Ok, that's it. Now we can call our icons where ever we need with the following code:

<?= my_custom_acf_icons('select_icon') ?>

Note that we added 'select_icon' which is our field name for the icons inside the repeater from custom fields, this can be whatever you set at the start.

Calling Inside Oxygen Builder

Here is an example of calling the function inside a code block, in an Oxygen Builder repeater, inside oxygen builder it throws an error with Oxygen Builder 4.0.2 RC, and the same with Oxygen Builder 4.0.1 stable version, and works fine on the front end.

The front end shows it as it should be

Calling Inside a Template

If you have a template set up and the custom coding for example a theme, here is an example code that could be used to call the function back.

<section class="content">
    <div class="columns">

<?php

if( have_rows('specifications') ):

    while( have_rows('specifications') ) : the_row();
        $sub_heading = get_sub_field('heading');
    ?>
        <div class='car-spec-box'>
            <div class='car-spec-box-inner'>
                 <?= my_custom_acf_icons('select_icon'); ?>
                <h3 class='car-spec-heading'><?= $sub_heading ?></h3>
            </div>
        </div>

    <?php 
    endwhile;

else :

endif;

?>
    </div>
</section>

This will give you the same result as above, of course with a bit more CSS added.