1

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).

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.

  • Thank you very much! 1. Is it possible to limit changes to radio element sin a certain node type (or any other limitation?) and 2. where do I find the default mark-up so I have a guideline? – Castor Sep 5 '15 at 19:47
  • Thank you very much for your detailes instructions. So I managed to implement default code into my template.php and strip it down according to my needs. What does not work is applying it only to certain elements. Neither with #type nor with #id. The error I get is: "Notice: Undefined variable: element in include_once()" Somehow $element is not recognized. What point did I miss? – Castor Sep 5 '15 at 23:46
  • That is because of the character limit of the comment. I have included my most recent code version at the bottom of the question-post. I treid to read about function theme_form_element but I could not figure out, what I am doing wrong. – Castor Sep 6 '15 at 12:34
  • Thanky ou very much. I appreciate your stamina! Thanks to your real world example I understood much more, how to approach my issue. So I implemented exactly your example and an additional snipped: if (strpos($element['#id'], 'edit-group-content-access-und') !== FALSE) { $output .= "<span class=\"switch-selection\"></span>\n"; } Three issues/problems arise, which I have described in my original post. – Castor Sep 7 '15 at 1:25
  • Now I understand. See thread/post for final update. – Castor Sep 7 '15 at 13:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.