How to theme radios in Drupal ?

drupal-theme-tutorial-screenshot

The default theming for any form element can be easily override in Drupal. There are two choices in the place of using the override function. One is in the template file, other is in modules. I am going to demonstrate the theming in module using Drupal 6. Using template file or Drupal 7 do not have major different. I will show how to use them in the end of this page.

There are 2 different theming function for radios. One is, single radio button theming, other is group of radio button theming. The following theming functions are used by default for theming the above.

These functions are located in form.inc file. To ensure, it is working, we can copy the codes from them.

Ok, Now let’s lets start the work!

Objectives & Expected result :

Default theming for radios, create a DIV wrapper for each radio button. It results in rendering each radio in separate line. Here we are going to produce group of radios in to without the DIV wrapper and each next to other (inline). This will help us implementing custom scripts or if we want to theme using 3rd party theming library ex: Jquery UI

drupal-theme-radios

 

Step 1 : Create our form function containing radios

 

In the above function we use '#theme' => 'my_radios' to override the default theme function of the element. While rendering the element, Drupal theme engine will look for the theme_my_radios function . So we have to register the function as theme using hook_theme().

Step 2 : Registering theme function using hook_theme()

In our case, we have to override 2 theme functions. theme_radio and theme_radios that would theme single radio and group of radios respectively.

Ok, the theme functions are registered now. Now we need to create the actual function that is going to override the default theme.

Step 3 : Override the default functions
Group of radios

‘; foreach ($keys as $key) { // Each radios is theme by calling our custom ‘my_radio’ theme function. $output .= theme(‘my_radio’, $element[$key]); } $output .= ‘

‘; return $output; }

Single radio

Remember, without the function theme_my_radio($element), it will produce an item only with title that has no options to choose. And do not forget to CLEAR CACHE before checking in browser.

Thats fine! What if we do not going to develop any module and need to override all radio button’s theme in the site ?

Simple; use the template.php file. Copy both function from step 3 in to template.php file. And rename theme as below.

  1. function theme_my_radios($element)
    • function phptemplate_radios($element)
  2. function theme_my_radio($element)
    • function phptemplate_radio($element)

 

Then in function “function phptemplate_radios($element)” we need to change the part where it calls the single radio button theming function. Following code is modified version of it.

‘; foreach ($keys as $key) { // Below line is modified to call the theme function with it default name since we do not have registered any theming function. $output .= theme($type, $element[$key]); } $output .= ‘

‘; return $output; }

Yes! It works.

If we need to do the same in Drupal 7, there is not need of big changes. These are the both API specification for Drupal 7; 1. theme_radio, 2. theme_radios, It is same to go with.

Did this help any one? Please do not forget to put your comment or suggestion.

3 thoughts on “How to theme radios in Drupal ?

Leave a Reply

Your email address will not be published. Required fields are marked *


*

Please wrap all source codes with [code][/code] tags.

This site uses Akismet to reduce spam. Learn how your comment data is processed.