One of my favorite features of WordPress is the ShortCode API witch was introduced with version 2.5 and up til latest its a must in each site that i develop.
the smart thing about using a shortcode is the simplicity of it, you just type it in.
for example say i want to add custom styling to my post all i have to do is type

[Blue_BG]text with blue background[/Blue_BG]

and the magic happens.

But How ShortCodes work?

now that’s a great question, shortcodes are replaced by pre defined or dynamic output of text or HTML doing the the_content(); template tag call and can also be added to run on widgets by adding this line to your theme’s functions.php file:

add_filter('widget_text', 'do_shortcode');

witch tells WordPress to run the Shortcodes functions on the widgets as well as the content.
So as you can see we are basically calling a function from the posts content and you can do that with a simple line of code that hooks (connects between) a shortcode and the function we want to call:

add_shortcode('Blue_BG', 'my_shortcode_function');

As you can see the add_shortcode function takes two parameters:

• “Blue_BG”  – the text used to call the shortcode.
• “my_short_code_function” – the function that our shortcode is calling.

lets look at that function:

function my_shortcode_function( $atts, $content = null ) {
 return '<div style="background-color: #1B42E0;">'. $content . '</div>';
}

As seen above a the function is just one line and very simple, just takes the text inside the shortcode and wraps it up in a div tag with background color.
You can also see that a shortcode function accepts two parameters:

• $args – an array of attributes ti be used in the function.
• $content – the content entered between then shortcode tags.

So after this post you should by now know how to use and add shortcodes in your WordPress powered site or web bolg,
so every now and then i’ll post a useful shortcode for you guys, but before i get you started with a few there is just one more thing you should know.
As we said that shortcodes are used in posts and pages and we showed how to use them in widgets but what about the rest of the site like the header, footer or any other theme file?
easy all you have to do is to echo the function called do_shortcode(‘name_of_the_shortcode); like this:

<?php echo do_shortcode('my_shortcode'); ?>

that’s it you now a master of WordPress shortcodes and you can get started with a few:

Highlight text

Ever wanted to highlight text in your posts? well now with shortcodes its easy once you post this code below in your theme’s functions.php file
all you have to do is wrap the text you want to highlight with [ highlight ] tag like this [/ highlight] (the extra space is for showing this on the post)
example: i love shortcodes .

function bainternet_highlight($atts, $content = null) {
extract(shortcode_atts(array(
    'color' => 'yellow',
    'font' => '#000000'
  ), $atts));
  return "<FONT style=\"BACKGROUND-COLOR: $color; color: $font\">$content</font>";
}
add_shortcode('highlight','bainternet_highlight');

next week we will add a few more.

Incoming search terms:

• add div of text to use shortcodes in wordpress page
• wordpress shortcodes explained
• wordpress shortcode inside div tags
• wordpress shortcode explained
• text wrap shortcode wordpress
• shortcodes in editor for div tags in wordpress
• how to use wordpress shortcode with div in php file
• div tag in shortcode wordpress