dtrinh dtrinh - 3 months ago 10
HTML Question

Radio Buttons not showing up as checked

I'm currently trying to write a theme options page for Wordpress. In it, the user could select the alignment of the DIV through radio buttons.

Currently it looks like this when an option is selected: https://gyazo.com/e27c2fc2c2e1f751ab27d98453581c52

I was wondering how I'd fix that (for the radio buttons to actually show up as checked and not as checked='checked'Center). It works and it correctly outputs to front-end but it just doesn't show up as checked without the checked='checked'. If I use jquery to remove checked='checked' it removes the radio buttons all together.

register_setting('slider_setting','slider_section1_direction');
add_settings_section( 'slider_section', '', 'slider_settings_callback', 'register_slider_settings' );
add_settings_field( 'slider_section1_direction', '', 'slider_section1_direction_callback', 'register_slider_settings', 'slider_section' );


function slider_section1_radio_buttons_callback() {
$s1_radio_buttons_settings = array(
'left' => array(
'value' => 'left',
'label' => 'Left'
),
'center' => array(
'value' => 'center',
'label' => 'Center'
),
'right' => array(
'value' => 'right',
'label' => 'Right'
),
);

return apply_filters( 'slider_section1_radio_buttons_callback', $s1_radio_buttons_settings );
}

function slider_section1_direction_callback() {
$settings = get_option('slider_section1_direction');
echo '<div class="setting">';
echo '<div class="setting-header half-width-header">';
esc_attr_e('Slider Text Alignment');
echo '</div>';
echo '<div class="setting-body" style="margin-top: 5px">';

// RADIO BUTTONS
foreach ( slider_section1_radio_buttons_callback() as $s1_button ) {
echo '<label class="description" style="margin-right: 40px">';
echo "<input type='radio'" . checked( $settings['s1_radio_buttons_settings'], $s1_button['value'] ) . " name='slider_section1_direction[s1_radio_buttons_settings]' value='" . esc_attr( $s1_button['value'] ) . "'/>";
echo $s1_button['label'];
echo '</label>';
}

echo '</div>';
echo '<div class="clear"></div>';
echo '</div>';
}

function slider_settings_callback() {
}


Thanks!

Answer

I checked the documentation for the checked function, and it looks like it normally echos the checked="checked" attribute. However, because you want to concatenate it to a string, you want to return the attribute instead. Luckily the third parameter in that function can be set to false to cause the function to return the attribute instead. So just change your usage of the function to this:

checked( $settings['s1_radio_buttons_settings'], $s1_button['value'], false)

Notice the false at the end of the function.