How To Create Shortcode And Use It In WordPress

I don’t know how many of you know or used short codes in WordPress. I personally feel, short codes is one of the great features that enables to perform functions withing the post. Normally we cannot execute a function on WordPress, but with short codes you can achieve that. The short codes are quite handy for template designer to let their users to execute certain actions just by using the codes. OK, so lets have a detailed look on it

What are Shortcodes basically?

Shortcodes are the easiest way to execute certain actions. It doesn’t have any rocket science, just a couple of codes can get you started with the shortcodes. So here we go

To start the explanation, let me talk about a inserting a portfolio in your WordPress blog post. Short codes normally look like this

[portfolio]

WordPress shortcode API allows you to add attributes, suppose if you want to display a particular portfolio on the post, you can use id's to categorize it. So the short code will look like this

[portfolio id="35"]

Id is not the only supported attributes, you can create your own attributes by using array

function portfolio( $atts ) {
	extract( shortcode_atts( array(
		'value' => 'something',
		'count' => 'something else',
	), $atts ) );

So the above code says [portfolio] shortcode supports two attributes – value and count

Let me show you an example

A simple shortcode would look like this. For demonstration I am using an output “Test Message” for a short code test

Note: All the shortcodes should be placed in functions.php

function testfn() {
    return 'Test, Message';
}

Now we need to create a shortcode to return this value. WordPress has a damn simple technique to create a shortcode. Here “test” is the shortcode and “testfn” is the function that has to be called when you use “test”

add_shortcode ('test', 'testfn');

Finally add the below code in your post to out the message “Test Message”

[test]

Now let me show you a useful example of using shortcodes

Bloggers would want to display Adsense ads withing their post, but as I said earlier WordPress doesn’t support executing codes withing the post. So obviously most of the Bloggers rely on a plugin to achieve that.

Here is a little demonstration of how shortcode can be used to embed Adsense ads anywhere in the post, like the way you wanted it to be. [Tip via WPRecipes]

Go to functions.php and place this code

function displayad() {
    return '<div id="adsense"><script type="text/javascript"><!--
	google_ad_client = "pub-XXXXXXXXXXXXXX";
	google_ad_slot = "4668915978";
	google_ad_width = 468;
	google_ad_height = 60;
	//-->
</script>

<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>';
}

add_shortcode('adsense', 'displayad');

The adsense ad is wrapped in a div adsense to easily style up to look attractive within posts and replace your Pub ID and the dimension

Now go to edit post and insert the below code within the post to display ads with post

[adsense]

Simple isn’t it?

Related Resource

Shortcode API – WordPress Codex