how to add radiobutton in wordpress widget form

4 comments

1. Create each radio button and make sure they are under the same “group”. The following is a basic HTML version of what you want.

   <input type="radio" name="group1" value="small" checked>Small<br />
   <input type="radio" name="group1" value="full"> Full<br />
   

   Take note of the name="group1" — this groups the two selections together so you can choose one or the other. checked marks the default selection when the radio buttons load.

   The WordPress version of this will require some logic to check what select the user has made. You will need to check if small or full is selected and have it supplement the checked attribute accordingly.

   For instance

   if($size == 'Full')
   {
        echo '<input type="radio" name="group1" value="small">Small<br />' . "n";
        echo '<input type="radio" name="group1" value="full" checked> Full<br />' . "n";
        //This will out put the radio buttons with Full chosen if the user selected it previously.
   }
   else
   {
        echo '<input type="radio" name="group1" value="small" checked>Small<br />' . "n";
        echo '<input type="radio" name="group1" value="full"> Full<br />' . "n";
        //This will out put the radio buttons with Small selected as default/user selected.
   }
   

   Log in to Reply

2. i tried using this but it doesent save my selection..
   i guess i dont get where the var $size came from in this script?

   My problem is that the radio buttons wont stay checked.. i tried using
   the if / else solution.. but only one seletion stay checked..
   (i know that logicly its weird)

   My code is part of a widget i am building (wp widget)…

   here is my code:

           <!-- Your Name: Text Input -->
       <?php if( $visiblecategories == showempty ) { ?>
       <p>
           <label for="<?php echo $this->get_field_id( 'visiblecategories' ); ?>"><?php _e('Show Empty Category:', 'badcategory'); ?></label><br />
           <input type="radio" id="<?php echo $this->get_field_id( 'visiblecategories' ); ?>" name="<?php echo $this->get_field_name( 'visiblecategories' ); ?>" value="showempty" style="" checked /> Show Empty<br />
           <input type="radio" id="<?php echo $this->get_field_id( 'visiblecategories' ); ?>" name="<?php echo $this->get_field_name( 'visiblecategories' ); ?>" value="hideempty" style="" /> Hide Empty<br />            
       </p>
       <?php } else { ?>
       <?php echo $visiblecategories; ?>
       <p>
           <label for="<?php echo $this->get_field_id( 'visiblecategories' ); ?>"><?php _e('Show Empty Category:', 'badcategory'); ?></label><br />
           <input type="radio" id="<?php echo $this->get_field_id( 'visiblecategories' ); ?>" name="<?php echo $this->get_field_name( 'visiblecategories' ); ?>" value="showempty" style="" /> Show Empty<br />
           <input type="radio" id="<?php echo $this->get_field_id( 'visiblecategories' ); ?>" name="<?php echo $this->get_field_name( 'visiblecategories' ); ?>" value="hideempty" style="" checked /> Hide Empty<br />            
       </p>
       <?php } ?>
   

   Log in to Reply

3. Use the same name for all the radio buttons that belong to the same group and use this to access the value.

   For example, if you have a radio group called ‘gender’ with values ‘male’ and ‘female’, use male/female for all the get_field* calls except for get_field_name. Use ‘gender’ for the get_field_name.

   In your widget() and update() code use ‘gender’ only – this will have either male or female as values.

   Log in to Reply

4. For anyone struggles with javascript issue, wrong checked gets checked, make shure the HTML not have empty checked="" attributes. Only add the attribute on selected radio button.

   This code works for a widget with radio-buttons without if-statements:

   function form( $instance ) {
   
       /* Option carrier is 'ecw_column' */
       $ecw_column = isset( $instance['ecw_column'] ) ? $instance['ecw_column'] : 'ecw_column_none';
   
       echo '<p>';
   
       $value = 'ecw_column_1';
   
       echo '<input value="'. $value .'" class="widefat" id="'. $this->get_field_id($value) .'" name="'. $this->get_field_name('ecw_column') .'" type="radio"'. ($ecw_column == $value ? ' checked="checked"' : '') .' />';
       echo '<label for="'. $this->get_field_id($value) .'">'. __('Column start') .'</label>';
       echo '<br/>';
   
       $value = 'ecw_column_2';
   
       echo '<input value="'. $value .'" class="widefat" id="'. $this->get_field_id($value) .'" name="'. $this->get_field_name('ecw_column') .'" type="radio"'. ($ecw_column == $value ? ' checked="checked"' : '') .' />';
       echo '<label for="'. $this->get_field_id($value) .'">'. __('Breakpoint') .'</label>';
       echo '<br/>';
   
       $value = 'ecw_column_3';
   
       echo '<input value="'. $value .'" class="widefat" id="'. $this->get_field_id($value) .'" name="'. $this->get_field_name('ecw_column') .'" type="radio"'. ($ecw_column == $value ? ' checked="checked"' : '') .' />';
       echo '<label for="'. $this->get_field_id($value) .'">'. __('Column end') .'</label>';
       echo '<br/>';
   
       /* Default value */
       $value = 'ecw_column_none';
   
       echo '<input value="'. $value .'" class="widefat" id="'. $this->get_field_id($value) .'" name="'. $this->get_field_name('ecw_column') .'" type="radio"'. ($ecw_column == $value ? ' checked="checked"' : '') .' />';
       echo '<label for="'. $this->get_field_id($value) .'">'. __('Current') .'</label>';
   
       echo '</p>';
   }
   

   Log in to Reply