Category:Bulid Web Designs & Code

How to Make a Radio Button with Image Label in WordPress

In HTML template things goes differently when we create some elements like radio button as compared to WordPress. The difference is that we have required to create HTML elements dynamically in WordPress. So we are going to create dynamic radio buttons along with images for WordPress.

Wordpress radio button

Let’s Strart How to Make Dynamic WordPress Radio Button

Our WordPress tutorial will have multiple steps. We are using a little bit modified files of HTML and css already created here

BOOTSTRAP RADIO BUTTON SHOWCASE WITH IMAGES 

We need a function to implement our radio button functionality to use within WordPress. Following steps are required to implement our function.

  1. Add radio button styles to WordPress theme’s css file
  2. Your theme should include bootstrap necessary files in its enqueue scripts. If theme has already bootstrap and jQuery support then no need do anything about it.
  3. Create a wordpress function in theme’s function.php file to create radio button.
  4. Finally Use Function to create radio button sets

STEP-1 – Add Radio Button Styles

Add styles given below in your themes style.css file. This file, in most of the cases, is located in main directory of wordpress theme.

[css]

/* styles for -add radio buttons with image labels function */
.layout-box{
width:450px;
margin-left:2px;
margin-top:20px;
}
.layout-box img{
max-width:100%;
height:60px;

}

img.layout-image{
margin-left:2%;
}

div.radio.radio-adjust{
margin-top:-30px;
margin-left:2px;
width:100%;
font-size:0.8em;
}

.ur-col-width {
padding:0;
width:23%;

}

[/css]

 

Include/Enqueue Bootstrap Script Files into Theme

Some themes already have bootstrap files included in their source files. But some times it is not. So you have to include bootstrap base files into WordPress theme by yourself. for the purpose you can consult this tutorial.

Bootstrap Setup for WordPress

Bootstrap Function for Making Radio Buttons

We will create following function in function.php file of our theme.

[php]

function ul_Add_Radio_Button ($col_width_percentage, $no_of_radio_buttons, $col_left_padding, $radio_name, $image_path, $title_array){

//************* Variables

$ur_col_width = $col_width_percentage.’%’; // chnage default columns width in %age
$no_of_radio =$no_of_radio_buttons; // set number of radio button blocks
$ur_col_padding=$col_left_padding.’%’; //left padding for columns in %age

//Implement dynamic styles with varibles of radio button

//start buffering
ob_start(); ?>
<div class=”layout-box”>
<div class=”row”>
<?php for ($x =1; $x <=$no_of_radio; $x++) { ?>
<div class=”col-md-2 col-sm-2 ur-col-width” style=”width:<?php echo $ur_col_width; ?>; padding-left:<?php echo $ur_col_padding; ?>;”>
<img src=”<?php echo $image_path.’rd’.$x.’.png’; ?>” class=”layout-image”>
<div class=”radio radio-adjust”>
<label><input type=”radio” name=”<?php echo $radio_name; ?>”><?php echo $title_array[$x-1];?> </label>
</div>
</div>
<?php } ?>
</div>
</div>
<?php
$u_radio= ob_get_clean();
return $u_radio; } //close function

[/php]

you will see that it is the complete function to add radio buttons in wordpress. You will notice that it is receiving input parameters. I will explain each and everyone as below:

$col_width_percentage: Integer value for width of each column containing radio button and its label. this is considered as percentage.

$no_of_radio_buttons: Accepts integer value that how many radio button you want to create

$col_left_padding: Horizontal distance between radio button column.

$radio_name: Name of the radio button

$image_path: This is the folder path in your theme where images resides to use in this function. images name should be rd1.png, rd2.png, rd3.png and so on. these images will be used automatically with radio buttons from left to right sequence.

$title_array: This is the array of titles. which will be added from left to right sequence of radio buttons. In below example you will learn how to use it.

EXAMPLE: How to Use this WordPress Radio Button Function

You can use this function to create beautiful radio button in any template file like page templates of your WordPress theme. The usage code is given below:

[php]

$rd_titles_array = array(“title-1″,”title-2”, “title-3”);//titles will be shown from left to right sequence
$rd_images_folder_path= get_template_directory_uri() . ‘/assets/images/’; //copy images in folder should be named as rd1.png, rd2.png respectively
$rd_radio_name=’layout-radio’; //name of the raido button

//call the function
$show_radio=ul_Add_Radio_Button(25, 3, 3, $rd_radio_name, $rd_images_folder_path, $rd_titles_array);
//show results
echo $show_radio;

[/php]

In above example. We are creating three radio buttons with its three titles and three images named. rd1.png, rd2.png and rd3.png. see above example in following demo.

DEMO EXAMPLE WORDPRESS RADIO BUTTON

Spread the love

Leave a Reply

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

14 − 13 =

Sign up Newsletter