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 "

".$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 "

".$atts['title'].": ".$atts['content']."

"; }

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='https://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='https://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='https://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='https://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='https://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='https://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='https://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='https://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='https://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='https://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='https://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='https://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='https://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='https://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”

nimeshrmr Says:
October 16th, 2011 at 5:36 am
[under_header]lll[/under_header]
Unwanted gift cards Says:
October 29th, 2011 at 10:37 pm
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?