Different WordPress Shortcodes Example for Beginner

WordPress is most popular CMS, Everyday lots of website builds in wordpress .
It’s user can use WordPress for business website, chruch website, ecommerce website etc.

There may be a question in your mind. why shorcode is important ? so it’s answer is here friends. It’s a fastest way for user to retrive function, style, data etc. in short if you want do more with less code then use shortcode.
It’s for your facilities.

Let’s start Learn about shortcode. Recommended to read how to create Shortcode ? If you have basic knowledge of php you can create own shortcodes easily.

In this article i show you 10 beginners to advance shortcode samples. I hope that it’s helpful for you to understand the best uses of shortcodes.

1) Get Author BIO, by this code you can learn how to add article poster’s information with simple code.

function getauthorbio()
{
	$info = 'Author Name'. get_the_author(). ' , Author Twitter :'. get_the_author_meta('user_email') .' , Description : '. get_the_author_meta('description');
	return $info;
}
add_shortcode('first_shortcode', 'getauthorbio');

You can get author name, email, Profile description via this shortcode.
Ussage : [first_shortcode]

2) Add social networking links with Shortcode. Add social link anywhere you want. Pass multiple attribute with simple shortcode.Shortcode supports attributes. in this code i passes the 3 value via shortcode and get easy output.

// add basic social share with shortcode
function social_network( $atts ) {
	extract( shortcode_atts( array(
		'fb' => 'no fb',
		'twi' => 'no twi',
		'gplus' => 'no gplus',
	), $atts, 'textshan' ) );
	return 'FB'. $fb .'TWI'. $twi .'Gplus'. $gplus;
}
add_shortcode( 'social_networks', 'social_network' );

You can add social networking icons with link via it.
Ussage : [social_networks fb="fbid" twi="twiid" gplus="gplusid"]

3) Facebook likes count with shortcode. Count facebook like without use API or any class.

// facebook fans count shortcode
function fbcount( $atts ) {
	extract( shortcode_atts( array(
		'pid' => 'no pid',
	), $atts, 'fbcounts' ) );
	$page_id = $pid;
	$xml = @simplexml_load_file("http://api.facebook.com/restserver.php?method=facebook.fql.query&query=SELECT%20fan_count%20FROM%20page%20WHERE%20page_id=".$page_id."") or die ("a lot");
    $fans = $xml->page->fan_count;
return 	'Fans =' .$fans;
}
add_shortcode( 'fbcounts', 'fbcount' );

Easy way to Count your fan page.
Ussage : [fbcounts pid="463379873797547"]

4) Create note above text.

// create text wtih note shortcode
function textnote( $atts ) {
	extract( shortcode_atts( array(
		'notetxt' => 'no notetxt',
	), $atts, 'textnotes' ) );
	return 
	'<div class=textnotes>'.$notetxt.'</div>';
}
add_shortcode( 'textnotes', 'textnote' );

You can add effect on important text with this code. You need css before this shortcodes.
usage : [textnotes notetxt="Note Text"]

5) Create Shortcode for add Youtube video in wordpress

// add youtube video shortcode
function addyoutube_function( $atts ) {
	extract( shortcode_atts( array(
		'foo' => 'no foo',
	), $atts, 'bartag' ) );
	return 
	'<embed width=420 height=345 src=http://www.youtube.com/v/'.$foo.' type=application/x-shockwave-flash>';
}
add_shortcode( 'youtube_url', 'addyoutube_function' );

usage : [youyube_url foo="XGSy3_Czz8k"]

6) Check Alexa rank with shortcode

function alexarank( $atts ) {
extract( shortcode_atts( array(
		'arank' => 'no arank',
	), $atts, 'aranks' ) );
$source = file_get_contents('http://data.alexa.com/data?cli=10&dat=snbamz&url='.$arank);	
preg_match('/\<popularity url\="(.*?)" text\="([0-9]+)" source\="panel"\/\>/si', $source, $matches);
$aresult = ($matches[2]) ? $matches[2] : 0;	
	return 'Alexa Traffic Rank: '.$aresult;
}
add_shortcode( 'get_alexarank', 'alexarank' );

Ussage : [get_alexarank arank="designspicy.com"]

7) Add image with rounded border

function imgborder( $atts ) {
	extract( shortcode_atts( array(
		'addborder' => 'no addborder',
	), $atts, 'imgbor' ) );
	return 
	'
	<img src='.$addborder.' class=imgbordercss>';
}
add_shortcode( 'imgbor', 'imgborder' );

Ussage : [imgbor addborder="http://designspicy.com/wp-content/themes/desgnspycy/image/logo.png"]

8) Add Text Shandows

function textshandow( $atts ) {
	extract( shortcode_atts( array(
		'gotit' => 'no gotit',
	), $atts, 'textshan' ) );
	return 
	'<div class=textshandow>'.$gotit.'</div>';
}
add_shortcode( 'textshan', 'textshandow' );

usage : [textshan gotit="Make it Bold"]

9) Add Smiles with wordpress Shortcode. This shortcode is using Switch statment .you can retrieve smiles by simple code. You must have knowledge of switch statement in php.

function switcht( $atts ) {
	extract( shortcode_atts( array(
		'switatt' => 'no switatt',
	), $atts, 'fbcounts' ) );
	$siteurl = get_option('siteurl');
	$path = $siteurl . '/wp-content/plugins/' . basename(dirname(__FILE__)). "/img/";
	switch (switatt) {
    case 0:
        $re = $path . 'smile.png';
        break;
    case 1:
        $re =  $path . 'smile.png';
        break;
    case 2:
        $re = $path . 'smile.png';
        break;
	}
	return 	'<img src='.$re.' class=imgbordercss>';
}
add_shortcode( 'switchs', 'switcht' );

Conclusion
usage : [switchs switatt="1"]

Hope that you enjoyed all the above example. i ensure you that you can start implement shortcode to your blog or website. ask me for your any query .

Savan Paun

I am Savan Paun Admin of this blog. I like to write about Wordpress, Design, Development, Plugin, SEO, Blogging and Making Money online. I am a professional blogger based in Jamnagar. I'm always available for beginner who wants to learn.

Leave a Reply