How to make your own attention-grabbing information box

ad code=1 align=left

In this tutorial, I will guide you in making your own attention-grabbing in rank box which will help you to easily grab the attention of your readers and point them to things that need to be pointed out in your post or page content.

OUTPUT: What you’ll be making

STEP 1: Making the function

The initially step is to add our main function in functions.php which will return the markup of the in rank box wrapped around the selected text or content as well as to hook it into WordPress Shortcode System.

Start with the base and parameters:

function ib_shortcode($atts, $content = NULL){
	extract(shortcode_atts(array(
		'type' => 'info',
		'tag' => 'p',
		'icon' => false,
		'custom_icon' => ''
	), $atts));
}

Our function has four parameters to receive through $atts variable and the content itself through the $content variable:

• type – the type of in rank box such as info, note, warning, download and error.
• tag – the html tag of the container.
• icon – a boolean parameter that we can set whether we want to show an icon or not.
• custom_icon – the image that you want to set as icon in replace of the defaulting icon.
• content – the selected text within your post.

Next is the markup with the data that will passed in the attributes variable:

function ib_shortcode($atts, $content = NULL){
	extract(shortcode_atts(array(
		'type' => 'info',
		'tag' => 'p',
		'icon' => false,
		'custom_icon' => ''
	), $atts));

	$infobox_type = array('info', 'note', 'warning', 'download', 'error');
	if(in_array($type, $infobox_type)) {
		$class = $type;
	} else { $class = 'info'; }
	if($icon) {
		$class .= ' wicon';
		if($custom_icon != '') $style = ' style="background-image:url('.$custom_icon.')"';
	}

	return '<'.$tag.' class="infobox '.$class.'"'.$style.'>' . $content . '';
}

Hook into WordPress:

add_shortcode('infobox', 'ib_shortcode');

STEP 2: Styling!

You can use this awesome metaphors from freeiconsdownload for the icons and house it in your template folder.

click here to download the metaphors

Finally, Add the styling css code not more than in your style.css to make our in rank box noticeable.

.infobox {
	show:check;
	margin:10px;
	padding:10px;
}
.info {
	background:#f7fafd;
	border:1px solid #b5d3ff;
}
.info.wicon {
	padding-left:80px;
	background-image:url(info.png);
	background-repeat:no-repeat;
	background-spot:15px 15px;
}
.note {
	background:#eff1e1;
	border:1px solid #e2e2e2;
}
.note.wicon {
	padding-left:80px;
	background-image:url(note.png);
	background-repeat:no-repeat;
	background-spot:15px 15px;
}
.warning {
	background:#fffbbc;
	border:1px solid #e6db55;
}
.warning.wicon {
	padding-left:80px;
	background-image:url(warning.png);
	background-repeat:no-repeat;
	background-spot:15px 15px;
}
.download {
	background:#e7f7d3;
	border:1px solid #66cc33;
}
.download.wicon {
	padding-left:80px;
	background-image:url(download.png);
	background-repeat:no-repeat;
	background-spot:15px 15px;
}
.error {
	background:#ffecec;
	border:1px solid #df7d7d;
}
.error.wicon {
	padding-left:80px;
	background-image:url(error.png);
	background-repeat:no-repeat;
	background-spot:15px 15px;
}

And that’s in this area it! We’re done! Go to your editor and just type [infobox]selected text here[/infobox] and wordpress system will do the rest.

Conclusion

I hope you’ve get something useful in this tutorial that you can apply to your site. Subscribe to our RSS Feed or follow us on Chirrup to get more wordpress tutorial like this.