Feature boxes are used in web sites to show the features of a specific products or service in a user interactive way. Normally the feature is displayed with a image that shows the meaning of the feature, title and a small description. So i have created a built in short code for displaying feature boxes on your wordpress blog without needing any design knowledge. This is part of the IBlocks plugin tutorial series. You can see some feature boxes made using this tutorial contents below.


In the following section I have given the functions needed to apply the shortcodes. Since we are not using any plugin for this shortcode, you have to manually put the following code into your functions.php file of your theme. If you are a technical person, use the IBlocks plugin.

function generate_css_iblocks($content) {
	return "<style>
dl,dd,dt{
	margin: 0;
	padding: 0;
}
.small_img_features{
	width:90%;
	float:left;
	height: 150px;
	margin-bottom: 10px;
	margin: 1%;
}
.small_img_features_image{
	width:40px;
	float:left;
}
.small_img_features_title{
	width:95%;
	color: #6D6C6C;
	font-weight:bold;
	font-size: 15px;
	padding:5px;
}
.small_img_features_title img{
	width: 64px;
	height: 64px;
}
.small_img_features_content{
	clear: both;
    font-size: 14px;
    padding: 5px 2%;
    text-align: justify;
    width: 90%;
}
</style>
".$content;
}
add_filter('the_content', 'generate_css_iblocks');
function list_box($atts, $content=null) {
	$type = $atts['type'];
	switch($type) {
		case 'small_img_features':
			$content = do_shortcode($content);
			$content = small_img_features($atts,$content);
			break;
	}
	return $content;
}
add_shortcode('list', 'list_box');
function small_img_features_styles($atts) {
	$width	= isset ($atts['width']) ? "width:".$atts['width'].";" : '';
	$height = isset ($atts['height']) ? "height:".$atts['height'].";" : '';
	$back_color = isset ($atts['back_color']) ? "background-color:".$atts['back_color'].";" : '';
	$border_color = isset ($atts['border_color']) ? "border:1px solid ".$atts['border_color'].";" : '';
	$title_color		= isset ($atts['title_color']) ? "color:".$atts['title_color'].";" : '';
	$title_width		= isset ($atts['title_width']) ? "width:".$atts['title_width'].";" : '';
	$title_font_size	= isset ($atts['title_font_size']) ? "font-size:".$atts['title_font_size'].";" : '';
	$title_margin		= isset ($atts['title_margin']) ? "padding:".$atts['title_margin'].";" : '';
	$title_font_name	= isset ($atts['title_font_name']) ? "font-family:".$atts['title_font_name'].";" : '';
	$content_color		= isset ($atts['content_color']) ? "color:".$atts['content_color'].";" : '';
	$content_back_color	= isset ($atts['content_back_color']) ? "background-color:".$atts['content_back_color'].";" : '';
	$content_width		= isset ($atts['content_width']) ? "width:".$atts['content_width'].";" : '';
	$content_font_size	= isset ($atts['content_font_size']) ? "font-size:".$atts['content_font_size'].";" : '';
	$content_font_name  = isset ($atts['content_font_name']) ? "font-family:".$atts['content_font_name'].";" : '';
	$style['small_img_features']		= $width.$height.$back_color.$border_color;
	$style['small_img_features_title']	= $title_color.$title_width.$title_font_size.$title_margin.$title_font_name;
	$style['small_img_features_content']= $content_color.$content_width.$content_font_size.$content_font_name.$content_back_color;
	return  $style;
}
function small_img_features($atts,$content) {
	$styles = small_img_features_styles($atts);
	$styles['small_img_features']			= ($styles['small_img_features'] != '') ? "style='".$styles['small_img_features']."'" : "" ;
	$styles['small_img_features_title']		= ($styles['small_img_features_title'] != '') ? "style='".$styles['small_img_features_title']."'" : "" ;
	$styles['small_img_features_content']	= ($styles['small_img_features_content'] != '') ? "style='".$styles['small_img_features_content']."'" : "" ;
	return "<dl class="small_img_features">
<dt class="small_img_features_title">
<img style="vertical-align: middle; padding-right: 10px;" src="".$atts[" alt="" />".$atts['title']."</dt>
<dd class="small_img_features_content">".$atts['content']."</dd>
</dl>
";
}

After adding the above code to functions.php file of your theme you can create and design different types of feature boxes using the syntax given below. First I’ll provide you the basic syntax of creating feature boxes. Then I’ll provide various examples of using feature boxes.

You have to above code to your blog post content or page content to create a feature box.

[list type='small_img_features' image='http://www.innovativephp.com/wp-content/plugins/iblocks/images/Hydropro5.png' title='SAMPLE TITLE' content='Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s' /]

Main Shortcode
[list /]	is the main shortcode you need to be using.
Main Parameters
type	defines the type of list. for feature boxes this should have the value small_img_features
image	path of the image used for the feature box.
title	main title of your feature box.
content	is the description about the features.
Optional Parameters
width	Complete width of your feature box. you can define the width using pixels or percentages. Default value = 90%
height	Complete height of your feature box. you can define the height using pixels or percentages. Default value = 150px
back_color	Background color of feature box. You can define colors like red,blue,green or using hexadecimal values ex:#cfcfcf.
border_color	Border color of feature box. You can define colors like red,blue,green or using hexadecimal values ex:#cfcfcf.
title_color	Color of title text in your feature box. You can define colors like red,blue,green or using hexadecimal values ex:#cfcfcf.
title_width	Width of your title area. can be defined using percentages or pixels.
title_font_size	Size of font for your title. Default value is 15px.
title_margin	Space around title. Can be defined using pixels or percentages. Default value= 5px
title_font_name	Font type for your title.
content_color	Color of description text in your feature box. You can define colors like red,blue,green or using hexadecimal values ex:#cfcfcf.
content_back_color	Background color of description area. You can define colors like red,blue,green or using hexadecimal values ex:#cfcfcf.
content_width	Width of your content area. can be defined using percentages or pixels.Default value = 90%
content_font_size	Size of font for your description. Default value is 14px.
content_font_name	Font type for your description.

 

Important – You have to be precise in changing the values of optional parameters. Your blog layout might display incorrectly if you use values which are not suited. Play around with optional parameters and change the values until you get the correct design.

SAMPLE TITLE

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s.

SAMPLE TITLE

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s

SAMPLE TITLE

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s

[list type='small_img_features'  image='http://www.innovativephp.com/wp-content/plugins/iblocks/images/ftype1.png' title='SAMPLE TITLE' content='Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s' /]
 
[list type='small_img_features'  image='http://www.innovativephp.com/wp-content/plugins/iblocks/images/ftype2.png' title='SAMPLE TITLE' content='Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s' /]
 
[list type='small_img_features'   image='http://www.innovativephp.com/wp-content/plugins/iblocks/images/ftype3.png' title='SAMPLE TITLE' content='Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s' /]

SAMPLE TITLE

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s

SAMPLE TITLE

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s

SAMPLE TITLE

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s

[list type='small_img_features'  width='30%'  height='170px' content_color='#254B78' title_color='#254B78' image='http://www.innovativephp.com/wp-content/plugins/iblocks/images/Hydropro3.png' title='SAMPLE TITLE' content='Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s' /]
 
[list type='small_img_features' width='30%' height='170px' content_color='#254B78' title_color='#254B78' image='http://www.innovativephp.com/wp-content/plugins/iblocks/images/Hydropro4.png' title='SAMPLE TITLE' content='Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s' /]
 
[list type='small_img_features' width='30%' height='170px' content_color='#254B78' title_color='#254B78' image='http://www.innovativephp.com/wp-content/plugins/iblocks/images/Hydropro5.png' title='SAMPLE TITLE' content='Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s' /]

SAMPLE TITLE

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s

SAMPLE TITLE

CLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s

SAMPLE TITLE

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s

[list type='small_img_features'  back_color='#eee' width='30%' height='190px' border_color='#cfcfcf'  content_color='#254B78' title_color='#254B78' image='http://www.innovativephp.com/wp-content/plugins/iblocks/images/socmed3.png' title='SAMPLE TITLE' content='Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s' /]
 
[list type='small_img_features' back_color='#eee' width='30%' height='190px' border_color='#cfcfcf'  content_color='#254B78' title_color='#254B78' image='http://www.innovativephp.com/wp-content/plugins/iblocks/images/socmed2.png' title='SAMPLE TITLE' content='CLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s' /]
 
[list type='small_img_features' back_color='#eee' width='30%' height='190px' border_color='#cfcfcf'  content_color='#254B78' title_color='#254B78' image='http://www.innovativephp.com/wp-content/plugins/iblocks/images/socmed1.png' title='SAMPLE TITLE' content='Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s' /]

SAMPLE TITLE

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s

SAMPLE TITLE

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s

SAMPLE TITLE

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s

SAMPLE TITLE

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s

[list type='small_img_features'  width='60%' height='170px' content_color='#254B78' title_color='#254B78' image='http://www.innovativephp.com/wp-content/plugins/iblocks/images/Hydropro3.png' title='SAMPLE TITLE' content='Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s' /]
 
[list type='small_img_features' width='30%' height='170px' content_color='#254B78' title_color='#254B78' image='http://www.innovativephp.com/wp-content/plugins/iblocks/images/Hydropro4.png' title='SAMPLE TITLE' content='Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s' /]
 
[list type='small_img_features' width='60%' height='170px' content_color='#254B78' title_color='#254B78' image='http://www.innovativephp.com/wp-content/plugins/iblocks/images/Hydropro5.png' title='SAMPLE TITLE' content='Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s ' /]
 
[list type='small_img_features' width='30%' height='170px' content_color='#254B78' title_color='#254B78' image='http://www.innovativephp.com/wp-content/plugins/iblocks/images/Hydropro5.png' title='SAMPLE TITLE' content='Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s' /]

Now can use these shortcodes to create your own feature boxes. I will be providing complete list of feature codes using the IBLOCKS plugin. You can create your own feature boxes and suggest to add to IBLOCKS using comments section.