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 – Text Headers

on 2011/10/29 4:07 PM stored in: Uncategorized and tagged:

Introduction To Text Header Design Templates

In this tutorial I am going to show you how to use IBLOCKS plugin to create text blog headers as part of “Simple Blog Header Designs Using WordPress Shortcodes” post series. In this example I’ll provide normal bold text headers and underlined text headers.

Creating Simple Text Headers – Bold Headers

Syntax of Bold Headers
There are 3 types of predefined normal bold headers. You can use gen_head_small ,gen_head_medium or gen_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 gen_head_small in the example given below.

[[header type='gen_head_small' ] Your Title [/header]]

Parameters of Normal Bold Headers

Main Shortcode
[[header /]] is the main shortcode you need to be using.
Main Parameters
type defines the type of heading. this should have the value gen_head_small, gen_head_medium or gen_head_large
Optional Parameters
color Color of the header text. Default value = #000
font_name Name of the font to be used in header text.
font_size Size of the font used for header text. Should be defined in ‘px’. Sample value = 14px


Examples for using Bold Headers

[[header type='gen_head_small' font_name='comic Sans MS' font_size='16px'] Sample Title[/header]]

[header type=’gen_head_small’ font_name=’comic Sans MS’ font_size=’16px’] Sample Title[/header]

[[header type='gen_head_medium' color='#374651'] Sample Title [/header]]

[header type=’gen_head_medium’ color=’#374651′] Sample Title [/header]

[[header type='gen_head_large' color='#2085CC'] Sample Title [/header]]

[header type=’gen_head_large’ color=’#2085CC’] Sample Title [/header]

[[header type='gen_head_large' color='blue' font_size='20px'] Sample Title [/header]]

[header type=’gen_head_large’ color=’blue’ font_size=’20px’] Sample Title [/header]


Creating Simple Text Headers – Underlined Headers

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

[[header type='un_text_small' ] Your Title [/header]]

Parameters of Underlined Headers

Main Shortcode
[[header /]] is the main shortcode you need to be using.
Main Parameters
type defines the type of heading. this should have the value un_text_small, un_text_medium or un_text_large
Optional Parameters
color Color of the header text. Default value = #000
font_name Name of the font to be used in header text.
font_size Size of the font used for header text. Should be defined in ‘px’. Sample value = 14px


Examples for using Underlined Headers

[[header type='un_text_small' font_name='comic Sans MS' font_size='16px'] Sample Title[/header]]

[header type=’un_text_small’ font_name=’comic Sans MS’ font_size=’16px’] Sample Title[/header]

[[header type='un_text_medium' color='#374651'] Sample Title [/header]]

[header type=’un_text_medium’ color=’#374651′] Sample Title [/header]

[[header type='un_text_large' color='#2085CC'] Sample Title [/header]]

[header type=’un_text_large’ color=’#2085CC’] Sample Title [/header]

[[header type='un_text_large' color='blue' font_size='20px'] Sample Title [/header]]

[header type=’un_text_large’ color=’blue’ font_size=’20px’] Sample Title [/header]

Creating Simple Text Headers – Underlined Bar Headers

Syntax of Underlined Bar Headers
There are 3 types of predefined underlined bar headers. You can use un_bar_small ,un_bar_medium or un_bar_large in the type attribute to check these 3 different box headers. Your main shortcode will be [[header]Your Title [/header]]. I have used un_bar_small in the example given below.

[[header type='un_bar_small' ] Your Title [/header]]

Parameters of Underlined Bar Headers

Main Shortcode
[[header /]] is the main shortcode you need to be using.
Main Parameters
type defines the type of heading. this should have the value un_bar_small, un_bar_medium or un_bar_large
Optional Parameters
color Color of the header text. Default value = #000
font_name Name of the font to be used in header text.
font_size Size of the font used for header text. Should be defined in ‘px’. Sample value = 14px
underline_color Color used for the underlined bar. Default value = #000

Examples for using Underlined Bar Headers

[[header type='un_bar_small' font_name='comic Sans MS' font_size='16px'] Sample Title[/header]]

[header type=’un_bar_small’ font_name=’comic Sans MS’ font_size=’16px’] Sample Title[/header]

[[header type='un_bar_medium' color='#374651'] Sample Title [/header]]

[header type=’un_bar_medium’ color=’#374651′] Sample Title [/header]

[[header type='un_bar_large' color='#2085CC' underline_color='#B5D6EE'] Sample Title [/header]]

[header type=’un_bar_large’ color=’#2085CC’ underline_color=’#B5D6EE’] Sample Title [/header]

[[header type='un_bar_large' color='blue' font_size='20px'] Sample Title [/header]]

[header type=’un_bar_large’ color=’blue’ font_size=’20px’] Sample Title [/header]

2 Responses to “Simple Blog Header Designs Using WordPress Shortcodes – Text Headers”

  1. Fernanda Says:

    Good insights! I have been trying to find something like this for a while now. Appreciation!

  2. free ebay listing templates Says:

    Nice design you have here on this site.

Leave a Reply

Follow Us On Facebook