How to Create and use WordPress Shortcode

How to Create and use WordPress Shortcode

There are instances when you want to show specialized content in your WordPress Website like recent post, Buy on Amazon Button, twitter widgets, but does not know how to do this. The good news is that WordPress provides you with an easy solution for doing such works with Shortcodes. In this WordPress Shortcode Tutorial I will explain you how to create your Shortcode and use them in your website.

What is WordPress Shortcode ?

WordPress Shortcode in general is a shortcut for a specialized content (output). It is just one line code that can be placed in your WordPress website’s page and posts. The WordPress Shortcode is always contained within square brackets.

Take for example the [gallery] Shortcode, when you place it in your page (through text editor), you will get the image gallery created. Here image gallery is the specialized output returned by this Shortcode.

WordPress Shortcodes are used by lots of plugin like Contact Form 7 to make amazing forms for users to fill and submit to the site owners.

WordPress Gallery Shortcode

Let me show you how to add Gallery Shortcode in your website. You need to follow the steps outlined below –

  • 1. Go to Pages > Add New, then in the description field (text editor) click on Text display. Next add the [gallery] Shortcode to the description field.
    wordpress gallery shortcode
  • 2. Now click the Visual display. The Gallery will show No items found.
  • 3. Click on the Gallery and then click on Edit (pencil icon).
    editing wordpress gallery
  • 4. Edit Gallery window will open, from here you can either upload new images or use images from WordPress media. I have my images already there in WordPress media so I click on Add to Gallery.
    adding images to gallery from wordpres media
  • 5. Under Gallery Settings there are options to set gallery columns, link to, random order and size. I set the columns to 3.
    wordpress gallery settings
  • 6. Publish the page.
I have also written a tutorial on WordPress Image Modification which teaches how to Rotate, Scale, Flip and Crop Image in WordPress easily.

That’s all the gallery will show up for this page, as shown by the below image:

wordpress gallery

Create WordPress Custom Shortcode

Fortunately, WordPress allows you to add Custom Shortcode in your theme. You can create a Custom Shortcode in your Theme’s functions.php file.

Let us create a Buy on Amazon button Shortcode. This is a simple but powerful Shortcode and is also used by many people to place Amazon Product links in their WordPress websites (for doing Affiliate Marketing). So let’s start with it.

Create Shortcode by pasting the below code in your functions.php file –

function amazonshortcode( $atts ) {
	$atts = shortcode_atts( array(
		'producturl' => 'https://www.amazon.com',
		'buttonimage' => 'https://images-na.ssl-images-amazon.com/images/G/01/associates/remote-buy-box/buy1.gif',
	), $atts, 'bartag' );

	return '<a href="'. $atts['producturl'] . '" target="_blank"/><img src="'. $atts['buttonimage'] .'"/></a>';
}
add_shortcode( 'amazon', 'amazonshortcode' );

Explanation

I created [amazon] Shortcode here. The ‘amazonshortcode’is the name of the function (I can give it any name).

It can have 2 parameters which are producturl and buttonimage. Through these parameters I can provide the URL of an Amazon product and set the Amazon button image. You should also note that these 2 parameters have been given default values in the function itself.

I can call this Shortcode in any page or post, simply put this Shortcode in the post/product description field:

[amazon producturl="some amazon product url" buttonimage="amazon button image url"]

Note – Replace some amazon product url with amazon product url and amazon button image url with your amazon button image URL.

wordpress custom shortcode

Do you want to send unlimited free emails to your subscribers? Then you can use MailChimp WordPress Plugin to send your emails.

Creating 3 types of Commonly Used WordPress Shortcode

I will show how to make 3 common WordPress Shortcode which are required by most of us in our WordPress Website. If you are a WordPress Theme developer then you can use these to create great features.

WordPress Adsense Shortcode

The Adsense Shortcode will let you show google ads in any page or post you want to. Google will provide you Adsense code which you have to place it in your website.

This Shortcode will returns the Adsense code. Below is the WordPress Adsense Shortcode –

function adsenseshortcode( $atts ) {
	return '<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
        <!-- Blog Top Big -->
        <ins class="adsbygoogle"
             style="display:inline-block;width:728px;height:90px"
             data-ad-client="ca-pub-6586834539077137"
             data-ad-slot="4759218392"></ins>
        <script>
          (adsbygoogle = window.adsbygoogle || []).push({});
        </script>';
}
add_shortcode( 'adsense', 'adsenseshortcode' );

On placing [adsense] Shortcode in my post, I start displaying the Adsense advertisement.

wordpress adsense shortcode

You can create number of Adsense Shortcode for showing different size of ads (image ads/text ads).

WordPress Recent Posts Shortcode

WordPress Recent Posts Shortcode will show recent post from your WordPress. It is a good way to keep the users engaged with your website after they have read the post. The recent posts are shown at the end of each post.

Below is the code for this WordPress Shortcode, paste it in your functions.php file.

function recent_posts($atts){
	$atts = shortcode_atts( array(
		'quantity' => 3,
	), $atts, 'bartag' );

	$q = new WP_Query(
		array( 'orderby' => 'date', 'posts_per_page' => $atts['quantity'])
	);
	$list = '<h2>Recent Posts</h2><ul style="list-style:none;padding:0;width:600px">';
	while($q->have_posts()) : $q->the_post();
		$list .= '<li style="border:1px solid red;margin-top:10px;padding:0 5px">' . get_the_date(). '<br/>' . '<a href="' . get_permalink() . '">' . get_the_title(). '</a>' . '<br />' . get_the_excerpt() .'<br/>'. '</li>';
	endwhile;
	wp_reset_query();
	return $list . '</ul>';
}
add_shortcode('recent-posts', 'recent_posts'); 

wordpress recent post shortcode

WordPress Blockquote Shortcode

I will create a WordPress Shortcode for Blockquote. You can use this in your theme to create good Blockquote design.

Paste the below code in your functions.php file –

function blockquote_shortcode($atts){
	$atts = shortcode_atts( array(
		'text' => 'default text',
		'author' => 'default author',
	), $atts, 'bartag' );

	$list = '<blockquote class="blockquoteShortcode"><span></span>' . $atts['text'] . '<span></span>' . '<p>- ' . $atts['author'] . '</p></blockquote>';
	return $list;
}
add_shortcode('blockquote', 'blockquote_shortcode');

Add a bit of below CSS to your style sheet to make it look good –

.blockquoteShortcode {
    line-height: 35px;
     border-left: 5px solid #ccc;
         font-size: 18px;
        margin: 0 0 20px;
        padding: 10px 20px;
}

    .blockquoteShortcode span {
        width: 400px;
        padding: 15px 10px 0px 30px;
    }

        .blockquoteShortcode span:nth-child(1) {
            background: url("http://i47.tinypic.com/a9l0g3.png") top left no-repeat;
        }

        .blockquoteShortcode span:nth-child(2) {
            background: url("http://i48.tinypic.com/eb1yrr.png") top left no-repeat;
        }

    .blockquoteShortcode p {
        color: #6793d4;
    }

Now add the Shortcode in your page –

[blockquote text="Three Rings for the Elven-kings under the sky, Seven for the Dwarf-lords in halls of stone, Nine for Mortal Men, doomed to die, One for the Dark Lord on his dark throne. In the Land of Mordor where the Shadows lie. One Ring to rule them all, One Ring to find them, One Ring to bring them all and in the darkness bind them. In the Land of Mordor where the Shadows lie." author="J.R.R. Tolkien, The Lord of the Rings"]

This is how it the blockquote will look –

wordpress blockquote shortcode

WordPress do_shortcode Function

Sometimes you need to call a WordPress Shortcode in a template. In that case you can make use of do_shortcode function. For example, your website has over 1000 post and you want to call the Shortcode in all your post, you can’t do it from the text editor, by editing each and every post (as it is very long procedure).

To solve this problem simply put the WordPress Shortcode in the single.php file.

To put a Shortcode in a WordPress Template use do_shortcode function. Put this function like this in the template:

<? echo do_shortcode(‘[gallery]’); ?>

Hope you like this WordPress Shortcode Tutorial. I will be happy to assist in any of yours question. Comments section is below.

Share this article -

yogihosting

ABOUT THE AUTHOR

This article has been written by the Technical Staff of YogiHosting. Check out other articles on "WordPress, SEO, jQuery, HTML" and more.