This tutorial ‘Using Images as Radio Buttons With ACF’ is dedicated solely to the visual transformation of ACF radio buttons into image-based selectors. It does not cover related topics, such as conditionally loading associated fields / Gutenberg blocks etc, which are outside the scope of this guide.
You’d be hard-pressed to find a WordPress developer that doesn’t use Advanced Custom Fields in their day to day workflow. It’s become such an invaluable tool for extending the functionality of WordPress and turning the platform into a powerhouse of a CMS. And I, myself use it on every project I work on.
A recent project required me to build a Gutenberg block (also created with ACF) – to allow editors to easily create tables with specific layouts, chosen from a selection of four predefined table layouts. Once a layout has been selected, the corresponding Gutenberg block will load in the editor, allowing the user to edit that specific table style.
I chose the radio button field to accomplish this task.
I couldn’t help but think the UI / UX could be improved, to give the user a better idea of what layout they were choosing – instead of a radio button and a label beside it. I thought a nice solution would be to use an image / icon for each radio button, hiding the radio button altogether.
I was surprised how easy it is to add this functionality with ACF.
Please note that in this example, for simplicity’s sake, I’ll just be adding the field group to the bottom area of a post and not utilising WordPress/Gutenberg blocks, etc.
1. Design Some Images to Replace Our Radio Buttons
if you have some images you can use already, great stuff – otherwise let’s create some here.
I have used Adobe Illustrator to create the four table images below that represents each table style.
Then, I have exported each image as its own SVG, labelled like so:
- table-style-1.svg
- table-style-2.svg
- table-style-3.svg
- table-style-4.svg
…and uploaded them to the media library.
2. Create an ACF Field Group
Next up, we’ll create a new ACF radio group by navigating into ACF > Field Groups > Add New.
I’ve called my group Table Styles, and chosen the Radio Button field type.
Now, we can add in our new images to the choices textarea by following the expected format by ACF:
The choices displayed when selecting a value. Enter each choice on a new line (eg.
Red). For more control over the value and label, you may use a colon to specify both (eg.red : Red).
table_style_1 : <img src="https://www.frontendhero.dev/wp-content/uploads/2024/08/table-style-1.svg">
table_style_2 : <img src="https://www.frontendhero.dev/wp-content/uploads/2024/08/table-style-2.svg">
table_style_3 : <img src="https://www.frontendhero.dev/wp-content/uploads/2024/08/table-style-3.svg">
table_style_4 : <img src="https://www.frontendhero.dev/wp-content/uploads/2024/08/table-style-4.svg">So, we have the value – which will be table_style_1, and so on, followed by a colon, and then the label. But instead of using text, we’re using an image 🙂
Above is a screenshot of my radio field group. You can see that I’ve made the default value the first image in our choices: table_style_1.
So, after saving everything, we should see something like the below in any of our post screens:
The image sizes… need some work, but if we click any of the images, the radio button gets selected. All we have to do now is add some CSS magic to finesse everything.
3. Enqueue ACF Stylesheet
So, in order to alter our image sizes, add some CSS tweaks etc to our radio buttons, we need to first enqueue a stylesheet for pages where ACF fields appear.
acf/input/admin_enqueue_scriptsWe can use the above action to enqueue a stylesheet to any page with ACF fields.
Open up functions.php and add the following snippet.
- functions.php
/**
* ACF Radio Buttons
*/
add_action('acf/input/admin_enqueue_scripts', 'my_acf_admin_enqueue_scripts');
function my_acf_admin_enqueue_scripts() {
wp_enqueue_style( 'acf-css', get_stylesheet_directory_uri() . '/css/acf.css', false, '1.0.0' );
}You will see that the stylesheet we have enqueued is will be located in sub directory called css, in our theme directory, and is called acf.css.
Now, we need to create this file. You can use SFTP / Cpanel / SSH etc to do this.
When you have added this new acf.css file to your theme directory (your_theme_dir > css > acf.css), open it up and let’s edit it.
4. Targetting the Field Group Up in acf.css
In order to target the radio button images, we need to target the field group. If we quickly view the Table Styles field group we created previously, we can see there is a key column with a key beginning with group_.
*If this column is not available in your ACF field group area, click the Screen Options tab and tick the Key checkbox*
Our key is group_66bbb65ac42d0.
Copy your key, and pop into the acf.css file. We then create an ID (#), and add our radio field group by prefixing the key with acf-.
So, we get the following: (red border added to make sure its working).
- acf.css
#acf-group_66bbb65ac42d0 {
border: 2px solid red;
}And you should see a red border around the our field group!
5. Styling the Radio Button Field Group
We only need a few lines of CSS to transform the size of our radio button images, hide the radio buttons from view, and add a hover / checked view, to make users aware of what table style is selected.
I’ve used the DOM inspector panel quite a bit, seeing how the radio button group is structured, and the below is the CSS that I have come up with:
- acf.css
#acf-group_66bbb65ac42d0 ul.acf-radio-list {
display: flex;
}
#acf-group_66bbb65ac42d0 ul.acf-radio-list li {
width: 100px;
height: 100px;
display: block;
margin-right: 15px !important;
}
#acf-group_66bbb65ac42d0 ul.acf-radio-list input[type="radio"] {
display: none;
}
#acf-group_66bbb65ac42d0 ul.acf-radio-list .acf-label {
display: none;
}
#acf-group_66bbb65ac42d0 ul.acf-radio-list img {
cursor: pointer;
transition: transform 0.2s ease;
border: 3px solid #fff;
border-radius: 7px;
}
#acf-group_66bbb65ac42d0 ul.acf-radio-list input[type="radio"]:checked + img,
#acf-group_66bbb65ac42d0 ul.acf-radio-list img:hover {
border: 3px solid #000;
transform: scale(1.05);
}You can see that I have prefixed all element styles with my key #acf-group_66bbb65ac42d0 as to not mess up any other ACF fields.
What we now get is a nicely formatted row of table images we can interact with and select, pretty cool!
6. Using Images as Radio Buttons Conclusion
So, that’s it – using images for radio buttons with ACF improves UI/UX by making options clearer and more intuitive, especially in scenarios like the above, presenting he user with a clear interface for choosing options.
