Skip to main content
Developer in WordPress t-shirt developing

Adding Radio Buttons to WordPress Settings

In previous articles in the WordPress Settings series we covered adding a settings page with a few basic fields. Those articles cover the steps to build a settings form with three text inputs, a textarea input, a WP Editor input, a password input, and a select input.

This article builds on the previous articles by adding Radio Buttons to our existing settings.

Adding the Defaults

In the previous article we covered how every WordPress setting should have a default value assigned and how to add the defaults to your code. Below is an extended version of that code that includes the default settings for our new Radio Buton input.

<?php

function ltdi_register_settings() {
   /* Code for settings section goes here. */

   if ( false == get_option( 'ltdi_theme_settings' ) ) {
     $defaults = [
        'setting_field_one'          => '',
        'setting_field_two'          => '',
        'setting_textarea_field'     => '',
        'setting_wp_editor_field'    => '',
        'setting_password_field'     => '',
        'setting_select_field'       => '1',
        'setting_radio_button_field' => 'value-01' /* new setting */
     ];
     add_option( 'ltdi_theme_settings', $defaults );  
   }
}
add_action( 'admin_init', 'ltdi_register_settings' );

  1. We continue editing the “ltdi_register_settings” function from the previous article by adding a key/value pair for our “setting_radio_button_field”.
  2. For this tutorial the default value will be different. Instead of an empty string we will add an actual value. For this tutorail it will be the value of “value-01”. This can be any string you want the default value to be.
  3. Like the previous article, if no settings are found, the get_options() function will return false.
  4. When a false value is returned from get_option() we use the function add_option(), passing our settings unique identifier and the array of defaults as the first and second parameters respectively.  Doing so will save the default settings to the database.

Adding the Radio Button Input

As mentioned in a previous article’s section “Adding the Setting Input Fields”, each field is added with a combination of the built-in function “add_settings_field” and a callback function for the specific field type.

For the radio button input we start with the built-in function add_settings_field, using the arguments listed below.

The first argument is the field $name.  It is a required unique identifier for the setting. It should be a single string value usually formatted with underscores to combine multiple words. In this case it is “setting_radio_button_field”.

The second argument is the field $title. It should be a string value formatted for display to the WordPress user.  For this tutorial we will use the string “New Radio Button Setting”.

The third argument is the name of the $callback function that outputs the form input’s HTML. Because we are implementing a Radio Button input we will be using the name “ltdi_get_radio_input”.

The fourth argument tells WordPress what group of settings to add the setting to. For this tutorial we will use the string “ltdi_theme_settings” which is the name of our settings group.

The fifth argument tells WordPress what section to associate our setting with. For this tutorial we will use the string “ltdi_theme_settings_section” which is the name of our settings section.

Similar to the previous article “Adding a Select Input to WordPress Settings” , the Radio Button input args array uses three key/value pairs. The first two, “label_for” and “class” are the same. The third however has a key of “options” and is used to provide the available options to our select input.

<?php

  function ltdi_register_settings() {
      
      /* Code for settings section adding defaults goes here. */
    
      /* Code that adds the fields in the previous article goes here. */
   
      add_settings_field(
          'setting_radio_button_field',
          'New Radio Button Setting',
          'ltdi_get_radio_input',
          'ltdi_theme_settings',
          'ltdi_theme_settings_section',
          [
              'label_for' => 'setting_radio_button_field',
              'class' => 'setting_radio_button_field',
		      'options' => [
                  [
				       'value' => 'value-01',
                      'label' => 'Option One'
				   ],
				   [
					   'value' => 'value-02',
					   'label' => 'Option Two'
				   ],
				   [
					   'value' => 'value-03',
					   'label' => 'Option Three'
				   ]
			   ]
          ]  
      );

Adding the Radio Button Callback Function

Although the field has been added to WordPress, before it can be used we need to create the callback function to output the radio button HTML on the screen.

<?php

function ltdi_get_radio_input($args) {
    $nameAttr = "ltdi_theme_settings[{$args['label_for']}]";
    $settings = \get_option('ltdi_theme_settings');

	echo '<fieldset>';

	foreach ($args['options'] as $option) {
		$checked = checked($settings[$args['label_for']], $option['value'], false);

		printf(
			'<input type="radio" name="%1$s" value="%2$s" %5$s /><label for="%4$s">%3$s</label>',
			$nameAttr,
			$option['value'],
			$option['label'],
			$args['label_for'],
			$checked
		);
	}

	echo '</fieldset>';
}
  1. We start by declaring the function “ltdi_get_radio_input”.
  2. Within our new function we create a variable called $nameAttr that combines our settings unique identifier and the name of the field as the value.
  3. We then create a $settings variable that stores all of our settings by using the get_option() function with the argument “ltdi_theme_settings” to retrieve them.
  4. After that we echo the opening “fieldset” tags.
  5. Then we loop through the “options” available in the $args variable.
    • Directly within the loop we use the checked() WordPress function to determine if the option’s value is the selected value. If so, the value is assigned to the $checked variable.
  6. Then we use the printf() function with the values stored in the variables $nameAttr, $option[‘value’], $option[‘label’], $args[‘label_for’] and $checked to ouput the HTML for all the options.
  7. We finish by echoing the closing ‘fieldset’ tag.

Putting It All Together

The final code is available for download on github. When this code is added to your WordPress theme’s function file or your plugin’s main file, you should have a functioning WordPress settings page with two text inputs, one textarea input, one WordPress Editor input, one password input, one select input and our new radio buttons.

Receive Tutorials Direct to Your Inbox