How to customize the markup of radio buttons in the edit/create node view?

Question

So I have a content type with several fields. One field is a set of two radio buttons. The output code while content creation/moderation looks like this:

<div id="edit-group-content-access" class="field-type-list-integer field-name-group-content-access field-widget-options-buttons form-wrapper">
<div class="form-item form-type-radios form-item-group-content-access-und">
    <label for="edit-group-content-access-und">Group content visibility <span title="Diese Angabe wird benötigt." class="form-required">*</span></label>
    <div class="form-radios" id="edit-group-content-access-und">
        <div class="form-item form-type-radio form-item-group-content-access-und">
            <input type="radio" class="form-radio" checked="checked" value="1" name="group_content_access[und]" id="edit-group-content-access-und-1">
            <label for="edit-group-content-access-und-1" class="option">Public - accessible to all site users </label>
        </div>
        <div class="form-item form-type-radio form-item-group-content-access-und">
            <input type="radio" class="form-radio" value="2" name="group_content_access[und]" id="edit-group-content-access-und-2">
            <label for="edit-group-content-access-und-2" class="option">Private - accessible only to group members </label>
        </div>
    </div>
</div>

Now I want it rather to be something like this:

<div class="form-radios" id="edit-group-content-access-und">
  <input type="radio" class="switch-input" name="group_content_access[und]" value="1" id="Public" checked>
  <label for="edit-group-content-access-und-1" class="switch-label switch-label-off">Public</label>
  <input type="radio" class="switch-input" name="group_content_access[und]" value="2" id="Private">
  <label for="edit-group-content-access-und-2" class="switch-label switch-label-on">Private</label>
  <span class="switch-selection"></span>
</div>

How can I change this markup? (I run Display suite and tried to ajust it somehow with DS settings; did not work out.)

---

Troubleshooting

Issue #1

In how far is $output not used anymore for radio buttons?

Issue #2

How do I add <span class="switch-selection"></span> after my second radio-button-label? (See the example above.)

Issue #3

The front page shows the following message.

Notice: Undefined variable: output in themename_form_element() (line 309 of D:\root\sites\all\themes\themename\template.php).

Answer 1

You can alter the output by overriding the following Drupal theme functions: theme_form_element, theme_radios, and theme_radio. (You won't need theme_radio unless you want to make changes to the <input> tag.)

Copy these functions into your theme's template.php file and replace "theme" in the function name with the name of your theme. Customize as needed. You will have to clear your cache in order for the changes to take affect.

In theme_form_element(), if you want to limit your changes to radio elements, you can add this condition:

if ($element['#type'] == 'radios' || $element['#type'] == 'radio') {
  // your stripped down mark-up here
}
else {
  // default mark-up
}

You can also check against other criteria such as #name and #id:

if (strpos($element['#id'], 'edit-group-content-access') !== FALSE) {
  // This form element has an id of 'edit-group-content-access-und-1' or 'edit-group-content-access-und-2'.
}  

A real world example that only prints the wrapper for elements that ARE NOT radio elements (only alter the code that is shown and leave the rest as-is):

BEFORE

function mytheme_form_element($variables) {
  // ... 
  $output = '<div' . drupal_attributes($attributes) . '>' . "\n";
  // ...
  $output .= "</div>\n";
  // ...
}

AFTER

function mytheme_form_element($variables) {
  // ... 
  $output = '';
  if ($element['#type'] != 'radios' && $element['#type'] != 'radio') {
    $output = '<div' . drupal_attributes($attributes) . '>' . "\n";
  }  
  // ...
  if ($element['#type'] != 'radios' && $element['#type'] != 'radio') {
    $output .= "</div>\n";
  }  
  // ...
}

Bonus tip :): If you just want to alter the attributes of the wrapper, not remove it entirely, see this example.