Display Radio Group on front-end

[geoffmartyn]

Hi - I’m trying to do something specific with a radio group via ACF and whilst I understand this may fall into a ‘development’ question, which you can’t really support I just need to know if it’s possible, then I can take it from there.

I would like to display all the options in a radio group on the front-end, but the only thing ACF returns is the chosen value. Is it possible to return the whole array and in addition to that, some kind of indicator as to which radio option has been selected?

edit: this looks like a horizontal menu, but it’s not - it’s meant to be a static project status showing at which stage the project is currently at.

This is what I would like to create ; where there are five static options to choose from on the edit screen for this post-type, all of which are presented in a radio group. The user selects a single ‘status’ and that is reflected on the front-end. Or am I over-thinking this?

Thank you

[marc_a]

Hey @geoffmartyn,

Thanks for reaching out!

From what I have known, you can only display ACF field on front-end using the acf_form() function but you can check this thread, it might help you with your question.

• https://support.advancedcustomfields.com/forums/topic/show-an-entire-specific-field-group-in-frontend/

Hope that helps.

[geoffmartyn]

Hi Marc,

Thank you for your reply. Just incase anybody else is trying the same thing, here’s how I did it. I created a shortcode via a custom plugin which loops through the available values using the field_id, then appends the current selected item by retrieving the value rather than the label from the radio group, then appends this to a class on the unordered list tag. Then I use some CSS to style the result.

function current_project_status() { 
 
$current_status = get_field('current_status');

$field_key = "field_631f756b3f0cf";
$field = get_field_object($field_key);
     
if( $field ){
    echo '<ul id="current_status" class="highlight_' . $current_status .'">';
    foreach( $field['choices'] as $status ){
    echo '<li>' . $status . '</li>';
    }
    echo '</ul>';
} 

}
 
add_shortcode('current_status', 'current_project_status');

The resulting output allowed me to do this, which is pretty close to my client’s mockup.

Then a slightly different view on tablet down to mobile widths - same code, different CSS.

Regards,

Geoff

[tristup]

Hi Geoff,

Thanks for sharing it with others.