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
You may have browsed many websites and spent hours to find the informaion provided in this tutorial.
So take 1 minute to share this post to help others find it quickly. Thank You for visiting InnovativePHP.
November 7th, 2011 at 1:16 pm
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!!