How to create Image Radio Buttons for Advanced Custom Field

Recently I started working on modal plugin because haven’t found any of the free plugins that work. One of the features i wanted was a “layout” choice.

Here’s the end result, I’ll go over how I did this:

Adding The images

First Things first, you need to have your images already created and uploaded to your theme or plugin directory.

Once the images are uploaded, create a radio button field in Advanced Custom Field. Below is a screenshot of some of the settings:

ACF radio button Choice Settings

The amazing feature about ACF radio buttons is that they allow HTML in the choice field. So we set our on the left side of the colon. On the Right side, We add an in our Images, and then our Label for each.

In my case, I’m creating a plugin, so the Path to the images points to the images in my plugin folder.

left : <img src='/wp-content/plugins/PLUGIN_NAME/PATH/TO/image.png'><p>Left Image</p>

Styling the Radio Buttons

Now, that is technically all you need to add the images. However, It will look absolutely horrible. To style them into a nice row we need to do 2 things:

  1. Put a wrapper around our Custom Image Radio Buttons
  2. Enqueue custom CSS on the admin side to style the buttons.

Thanks to ACF, adding a CSS wrapper class is super easy. On the settings page for your fields, towards the bottom there are wrapper settings: width, class, id. We’re going to set the class to something unique that we can target like acf-image-select.

ACF wrapper Settings

Now that we have the wrapper class set, we’ll enqueue our own styles into the backend. There are a few ways to do this:

.acf-image-select label input {
    display: none;
}
.acf-image-select label p {
    margin: 0;
    font-weight: bold;
    text-align: center;
}
.acf-image-select label img {
    border: solid 6px #ddd;
    max-width: 90%;
}
.acf-image-select label.selected img {
    border: solid 6px #999;
}
.acf-image-select li{
    display: inline-block;
    list-style: none;
    max-width: 25%;
}

To recap the CSS above:

Once you have your CSS file created and those styles above saved, you can load it into the admin area like this:

function sce_admin_styles() {
	//if Using in a plugin
    wp_enqueue_style( 'PLUGIN-admin_styles', plugin_dir_url( __FILE__ ) . 'assets/modal-admin.css');

	//if Using in a Theme
    wp_enqueue_style( 'THEME-admin_styles', get_template_directory_uri() . '/assets/admin-styles.css');
	
}

add_action( 'admin_enqueue_scripts', 'sce_admin_styles' );

That should be everything you need to create fancy image radio buttons! If you have problems with this or I have a typo, hit me up on twitter. Thanks everyone!