Friday , 31 October 2014
Hot!
Home » How-To & Hacks » 6 Simple But Handy WordPress Shortcodes For Your Blog

6 Simple But Handy WordPress Shortcodes For Your Blog

Even though shortcode feature has been introduced to WordPress bloggers for quite some time (since WordPress 2.5 version), not many WordPress bloggers have their head around this feature. Most of us find complex and complicated.

But, it is true?

I feel that most of us find it complex and complicated, because we have no clue on what shortcode is all about. To make it worse, some of WordPress bloggers that even bother to understand something that can make their blogging life easier.

Basically, shortcode allows you to do something that is complex in a very easy way by inserting very simple code into your WordPress blog.

For example, you don’t have to keep copying and then paste long winded Youtube video’s embed video each time you want insert the video into your WordPress blog. Instead, you just have to get the video URL and use it with simple shortcode.

So, I have listed down 6 Simple But Handy Shortcodes For Your WordPress Blog which you can try and help to get your head around on what shortcode is all about. Enjoy!


Display snapshot of any website

You want to showcase your favorite web site in your WordPress blog by showcasing its snapshot in your posting? There is easy way to do.

Paste the code below in functions.php file.

function wpr_snap($atts, $content = null) {
        extract(shortcode_atts(array(
			"snap" => 'http://s.wordpress.com/mshots/v1/',
			"url" => 'http://www.kissingcrust.com',
			"alt" => 'My image',
			"w" => '400', // width
			"h" => '300' // height
        ), $atts));

	$img = '<img src="' . $snap . '' . urlencode($url) . '?w=' . $w . '&h=' . $h . '" alt="' . $alt . '"/>';
        return $img;
}

add_shortcode("snap", "wpr_snap");

You just need to update the url; http://www.kissingcrust.com with the url of your favorite website. Then, to showcase the snapshot, use the shortcode below in your posting.

[snap url="http://www.kissingcrust.com" alt="Description of your favorite website" w="400" h="300"]

Source: Geekeries


Private content for registered reader

If you are planning to provide some premium content to your registered reader, you can use below code and shortcode to make it not only possible but in a plain simple way.

Your registered readers will definitely love you more ;)

Paste the code below in functions.php file.

function cwc_member_check_shortcode( $atts, $content = null ) {
	 if ( is_user_logged_in() && !is_null( $content ) && !is_feed() )
		return $content;
	return '';
}

add_shortcode( 'member', 'cwc_member_check_shortcode' );

After you have your registered user-only content, follow below shortcode to make the content can only be available for your registered reader.

[member]This content will be only displayed to registered readers.[/member]

Source: Snipplr


Display PDF file on blog post

With below example, you will now able to make it is easier for your readers to read any PDF files. Below code let the PDF file to load through Google docs and then displayed the file in an iframe, on your WordPress blog post.

function cwc_viewpdf($attr, $url) {
    return '<iframe src="http://docs.google.com/viewer?url=' . $url . '&embedded=true" style="width:' .$attr['width']. '; height:' .$attr['height']. ';" frameborder="0">Your browser should support iFrame to view this PDF document</iframe>';
}
add_shortcode('embedpdf', 'cwc_viewpdf');

You have to paste the above code first in the functions.php file. Then, use below shortcode to embed PDF file into your blog post.

[embedpdf width="600px" height="500px"]http://infolab.stanford.edu/pub/papers/google.pdf[/embedpdf]

As what you can see in the shortcode above, the PDF file will fit perfectly in your WordPress blog as you can define height and width of the iframe.

Source: Snipplr


Embed YouTube videos

Love to post videos Youtube videos on your blog but find it terribly tedious each time you want to embed the videos into your blog post? What about if I tell you that with below shortcode, you just need to copy and paste the url of the Youtube video?

Love it? I am sure you will. It will definitely make you save a lot of time.

First, paste the code below into your functions.php file.

function cwc_youtube($atts) {
	extract(shortcode_atts(array(
		"value" => 'http://',
		"width" => '475',
		"height" => '350',
		"name"=> 'movie',
		"allowFullScreen" => 'true',
		"allowScriptAccess"=>'always',
	), $atts));
	return '<object style="height: '.$height.'px; width: '.$width.'px"><param name="'.$name.'" value="'.$value.'"><param name="allowFullScreen" value="'.$allowFullScreen.'"></param><param name="allowScriptAccess" value="'.$allowScriptAccess.'"></param><embed src="'.$value.'" type="application/x-shockwave-flash" allowfullscreen="'.$allowFullScreen.'" allowScriptAccess="'.$allowScriptAccess.'" width="'.$width.'" height="'.$height.'"></embed></object>';
}
add_shortcode("youtube", "cwc_youtube");

Then, each time you want to put some Youtube videos into your blog post, simply follow below shortcode example and then, put it in your blog post.

[youtube value="http://www.youtube.com/watch?v=R55e-uHQna0"]

Source: WP Snipp


Create a download button

Instead of having text with link, you want to put download button for your blog readers to click on to download your latest eBook or WordPress plugin that you review?

With below shortcode, it allows you to include a nice download button to help catch readers’ eyes.

First, as usual, paste below code in functions.php file.

function button_shortcode( $atts, $content = null )
{
    extract( shortcode_atts( array(
      'color' => 'blue',
      'size' => 'medium',
      ), $atts ) );

      return '
		<style type="text/css">
		.shortcode_button {
			padding: 2px 8px;
			border: 1px solid #ccc;
			border-radius: 10px;
			-webkit-border-radius: 10px;
			-moz-border-radius: 10px;
		}
		.black {
			background: #ffd149;
			background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#636363), to(#332F2F));
			background: -moz-linear-gradient(19% 75% 90deg,#332F2F, #636363);
			color: #f0f0f0;
			border-top-color: #1c1c1c;
			border-left-color: #1c1c1c;
			border-right-color: #525252;
			border-bottom-color: #525252;
		}
		.blue {
			background: #a0c5ef;
			background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#508BC7), to(#203F75));
			background: -moz-linear-gradient(19% 75% 90deg,#203F75, #508BC7);
			color: #f0f0f0;
			border-top-color: #023778;
			border-left-color: #023778;
			border-right-color: #26609e;
			border-bottom-color: #26609e;
		}

		.large	{
			width: 200px;
		}
		.medium	{
			width: 120px;
		}
		.small	{
			width: 80px;
		}
		</style>

      <divmargin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 12px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; color: rgb(51, 153, 51); background-position: initial initial; background-repeat: initial initial; ">. $size . ' ' .  $color . '">' . $content . '</div>';

}
add_shortcode('button', 'button_shortcode');

After you have saved the modified functions.php file, you can great look download button by using below shortcode. Do remember to edit the Your File Url with the location of your file.

<a href="Your File Url">Download</a>

With the above shortcode, you can change 2 elements of the download button which are color (black & blue) and size (large, medium & small).

In order to control the size or color of the button further, all you have to do is create a CSS class with the same name as the value for size / color variables which you can find in the code for functions.php file.

Source: Pro Blog Design


Insert Google Map in WordPress blog

Going to have social gathering this coming weekend but hard to pinpoint the exact place where you want to hold it?

Below shortcode will definitely come handy.

You have to update your functions.php with below code.

function fn_googleMaps($atts, $content = null) {
extract(shortcode_atts(array(
 "width" => '640',
 "height" => '480',
 "src" => ''
 ), $atts));
 return '<iframe width="'.$width.'" height="'.$height.'" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="'.$src.'"></iframe>';
 }
 add_shortcode("googlemap", "fn_googleMaps");

Then, use below shortcode to integrate in Google Map into your blog post.

You just have to have update Google Maps URL with the URL that you can grab from Google Maps like below:

Insert Google Maps into WordPress using shortcode

Source: DigWP


Want to know more about shortcode?

Interested to know more about WordPress shortcode?

Check out awesome articles below to know more about shortcode and how can you make full use of shortcode with  your WordPress blog.

What now?

Share with me what do you think about WordPress shortcode. Do you find it handy? Or simply waste of time?

Feel free to share your thoughts. I am eager to hear what’s your say about WordPress shortcode.

300 x 250 #1 300 x 250 #1

5 comments

  1. avatar

    thanks for sharing! Is the codes may effect my blog loading?

  2. avatar

    Hii, your review is very important for me, Now I have more knowledge about this. I will come back again and again to your site.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>