The Advanced Custom Fields plugin I used a lot of times to make post editing for customers as easy as possible.

The plugin got so many features and possibilities to put custom fields within WordPress to the next level. If you don’t know this plugin take a look at Elliot’s page. There you will find a lot of example documentation on how to use ACF. And if you get in trouble, Elliot will respond very quick in the support forum.

In the near future the new version will be released. ACF5 is re-written from ground and looks awesome.

Today I will give you a short description on how to make checkboxes and/or radio buttons to use symbols instead of text.

Normally you will enter the options for the group in the Choices field like this

and the user will see e.g. normal radio buttons

In this case I would like to see symbols for left, centered and right alignment. This is a much more intuitive way for the user.

To accomplish this, I use an icon font – in this case the Font Awesome icon set – which will be embedded into my theme in the functions.php. You could embed the Font Awesome through the Bootstrap CDN

	
add_action( 'admin_enqueue_scripts', function() {
    wp_enqueue_style('fontawesome', '//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css');
}
	

or if you like to host the Font Awesome on your own server, you have to download the icon set and upload the font folder to your themes folder for WordPress. In addition you have to upload the font-awesome.min.css, too. I recommend to put the CSS file into the font folder you uploaded first. Your embed code have to look like this

	
add_action( 'admin_enqueue_scripts', function() {
    wp_enqueue_style('fontawesome', get_template_directory_uri() . '/your-font-folder/font-awesome.min.css');
}
	

To get the symbols for your checkboxes and/or radio buttons all you have to do, is to put the relevant code for the icons into the Choices field of your button group for the label values after the colon.

and you will get a nice looking button group

A different approach I have implemented for a customer where I build an ACF field set where the user can select special colors. I want to show the colors with the labels of the radio buttons. This can’t be done with an icon set. But there is a solution.

I created a CSS file called acf-styles.css within my themes folder and embedded this into the WordPress admin area within the admin_enqueue_scripts action

	
add_action( 'admin_enqueue_scripts', function() {
    wp_enqueue_style('fontawesome', get_template_directory_uri() . '/your-font-folder/font-awesome.min.css');
    wp_enqueue_style( 'acf_styles', get_template_directory_uri() . '/additional-css-folder/acf-styles.css');
}
	

The acf-styles.css will look like this

	
.color_swatch:before {
    color: #FFF;
    content: "";
    width: 20px;
    height: 20px;
    display: inline-block;
    position: relative;
    top: 6px;
    margin-right: 5px;
    border: 1px solid #ddd;
}

.red:before {
    background-color: #9e0347;
}

.gray:before {
    background-color: #5a5a59;
}

.light-gray:before {
    background-color: #f5f5f5;
}

.silver:before {
    background-color: #bdc3c7;
}

.green-sea:before {
    background-color: #16a085;
}

.carrot:before {
    background-color: #e67e22;
}

[class^="icon-"] {
    font-size: 18px;
    position: relative;
    top: 4px
}
	

As you see in this CSS file I also style the symbols of the Font Awesome icon set to make them a little bit larger and positioning them a bit lower.

To get the colors with the labels for the button group my Choices field get this content

and the radio buttons looks the way I want them to look

I love this solution to make buttons more visual to the user and the possibilities for visual buttons are numerous.

Hope you enjoy this small tutorial on how to make visual checkboxes and radio buttons with the Advanced Custom Field plugin. If you have suggestions or new ideas about this topic, I look forward to read your comments.