Special Offer - Get $90 Discount and Host Your Dream Web Site @ Dreamhost for 1 Year Click Here. Promo Code SLJ345
Back To Top
WordPress Web Application Development
Develop Powerfull Web Applications Using Cutting Edge WordPress Development Techniques

Creating Stylish Feature Boxes with WordPress Shortcodes

on 2011/10/14 11:15 AM stored in: Uncategorized and tagged:

Creating a Feature Box with WordPress Shortcode

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.
IBlocks Feature Boxes
Defining the shortcode functions

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>
";

}

Displaying Feature Boxes with Shortcodes


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.
Syntax of 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' /]
Parameters of Feature Boxes
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.

Customizing Feature Boxes Using Style Parameters

Feature Boxes with default values

 
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' /]
3 Column Feature Boxes
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' /]
3 Column Feature Boxes with Background Colors
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' /]
Dynamic Column Feature Boxes
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' /]


Whats Next

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.

2 Responses to “Creating Stylish Feature Boxes with WordPress Shortcodes”

  1. nimeshrmr Says:

    [under_header]lll[/under_header]

  2. Unwanted gift cards Says:

    I was curious if you ever considered changing the page layout of your blog? Its very well written; I love what youve got to say. But maybe you could a little more in the way of content so people could connect with it better. Youve got an awful lot of text for only having 1 or 2 images. Maybe you could space it out better?

Leave a Reply

Follow Us On Facebook