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

Simple Blog Header Designs Using WordPress Shortcodes – Box Headers

on 2011/10/19 4:45 AM stored in: Uncategorized and tagged:

Introduction To Box Header Design Templates

In this tutorial I am going to show you how to create box type blog headers as part of “Simple Blog Header Designs Using WordPress Shortcodes” post series. In this example the headers are surrounded with a box with background color and a border.

Creating Simple Box Headers

Inserting Shortcodes to functions.php file

function generate_header_css($content) {

	return "<style>
/*
 * Box Headers
*/

.box_head_small{
	background-color: #EEE;
	color: black;
	font-size: 20px;
	height: 20px;
	margin-bottom: 20px;
	margin-top: 20px;
	outline: 1px solid #CFCFCF;
	padding: 1%;
	width: 98%;
}

.box_head_small_sub{
	float: left;
	width: 85%;
}

.box_head_small_sub h1{
	font-family: helvitica;
	font-size: 12px;
}

.box_head_mid{
	background-color: #EEE;
	color: black;
	font-size: 20px;
	height: 20px;
	margin-bottom: 20px;
	margin-top: 20px;
	outline: 1px solid #CFCFCF;
	padding: 1%;
	width: 98%;
}

.box_head_mid_sub{
	float: left;
	width: 85%;
}

.box_head_mid_sub h1{
	font-family: helvitica;
	font-size: 14px;
}

.box_head_large{
	background-color: #EEE;
	color: black;
	font-size: 20px;
	height: 20px;
	margin-bottom: 20px;
	margin-top: 20px;
	outline: 1px solid #CFCFCF;
	padding: 1%;
	width: 98%;
}

.box_head_large_sub{
	float: left;
	width: 85%;
}

.box_head_large_sub h1{
	font-family: helvitica;
	font-size: 16px;
}
<style>;

".$content;

}

add_filter('the_content', 'generate_header_css');

/*Testing Headers */
function header_box($atts, $content=null) {

	$type = $atts['type'];

	switch($type) {
		case 'box_head_small':
			$content = do_shortcode($content);
			$content = box_head_small($atts,$content);
			break;
		case 'box_head_medium':
			$content = do_shortcode($content);
			$content = box_head_medium($atts,$content);
			break;
		case 'box_head_large':
			$content = do_shortcode($content);
			$content = box_head_large($atts,$content);
			break;
	}

	return $content;


}

add_shortcode('header', 'header_box');


function box_head_small($atts,$content) {
	$style = box_head_styles($atts);

	return "<div class='box_head_small' style='".$style['part1']."'>
					<div class='box_head_small_sub'>
						<h1 style='".$style['part2']."'>" . do_shortcode($content) . "</h1>
					</div>
				</div>";
}

function box_head_medium($atts,$content) {
	$style = box_head_styles($atts);
	return "<div class='box_head_mid' style='".$style['part1']."'>
					<div class='box_head_mid_sub'>
						<h1 style='".$style['part2']."'>" . do_shortcode($content) . "</h1>
					</div>
				</div>";
}

function box_head_large($atts,$content) {
	$style = box_head_styles($atts);
	return "<div class='box_head_large' style='".$style['part1']."'>
					<div class='box_head_large_sub'>
						<h1 style='".$style['part2']."'>" . do_shortcode($content) . "</h1>
					</div>
				</div>";
}

function box_head_styles($atts) {
	$color = isset ($atts['color']) ? "color:".$atts['color'].";" : '';
	$background = isset ($atts['color']) ? "background-color:".$atts['background'].";" : '';
	$outline = isset ($atts['color']) ? "outline-color:".$atts['outline'].";" : '';

	$style['part1'] = $background.$outline;
	$style['part2'] = $color;
	return  $style;

}

Syntax of Box Headers
There are 3 types of predefined box headers. You can use box_head_small,box_head_medium or box_head_large in the type attribute to check these 3 different box headers. Your main shortcode will be [header]Your Title [/header]. I have used box_head_small in the example given below.

[header type='box_head_small' color='#fff' background='#809FC5' outline='#162F4D'] Your Title [/header]

Parameters of Box Headers

Main Shortcode
[header /] 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 box_head_small, box_head_medium or box_head_large
Optional Parameters
outline Border color of the box header. Default value = #CFCFCF
background Background color of the box header. Default value = #EEEEEE
color Text color of box header. Default value =#000


Examples of Using Box Headers

Creating Box Headers Default Version

[header type='box_head_small' ] Sample Blog Post Title [/header]

 

[header type='box_head_medium'] Sample Blog Post Title [/header]

 

[header type='box_head_large']Sample Blog Post Title [/header]
 

Sample Blog Post Title

Sample Blog Post Title

Sample Blog Post Title

Creating Custom Styled Box Headers
[header type='box_head_small' background='#BFD2F4' color='#2B4278' outline='#7FA0DC'] Sample Blog Post Title [/header]

Sample Blog Post Title

[header type='box_head_medium' background='#BFD2F4' color='#2B4278' outline='#7FA0DC'] Sample Blog Post Title [/header]

Sample Blog Post Title

[header type='box_head_medium' background='#000' color='#fff' ] Sample Blog Post Title [/header]

Sample Blog Post Title

[header type='box_head_large' background='#635E65' color='#ACAEB7' outline='#7FA0DC'] Sample Blog Post Title [/header]

Sample Blog Post Title


One Response to “Simple Blog Header Designs Using WordPress Shortcodes – Box Headers”

  1. water ionizer Says:

    I like this idea. I visited your website for the first time and simply been your fan. Continue to keep writing as I am planning to come to read it daily!!

Leave a Reply

Follow Us On Facebook