Getting Started with WordPress Shortcodes & Sample Snippets

WordPress shortcodes were introduced in 2.5, and help you to create macro codes to use within your content. If you think about it, this is a great way to create something like a dynamic ad spot or a call-to-action button in your posts.

If we use the call-to-action example, you could add something like this to your blogpost to show the button, and then edit the output in your templates functions.php file, which we’ll get to in a minute.


To customize the button, we could simply add something like:

[button type="twitter"]

Or to make it even better, we could use an enclosing shortcode:

[button type="twitter"]Follow me on Twitter![/button]

With some imagination, you soon realize the potential of shortcodes, and what can be done with them. In this article, I’ll show you how to create and use these three different types of shortcodes, and then I’ll show off some ready-to-use shortcodes to use on your own WordPress site.

Creating a self-closing shortcode

The simplest shortcode is the self-closing one. We’re going to create a simple link to our Twitter account, and then add it in a blog post.

All the code goes in functions.php, which is located in /wp-content/themes/your-theme/. If you don’t have one, just create it and put the code in it.

function button_shortcode() {
    return '<a href="" class="twitter-button">Follow me on Twitter!</a>"';
add_shortcode('button', 'button_shortcode'); 



Simply using the the add_shortcode() function, we can link any php function to our shortcode. In this simple example, all we do is returning a link to our Twitter account, but let’s take this a step further and add some parameters.

Creating a self-closing shortcode with parameters

Shortcode has support for parameters, which let’s us customize the output. In this example we have two different buttons, so we have to define what button we want to show.

function button_shortcode($type) {
        'type' => 'type'
    ), $type));
    // check what type user entered
    switch ($type) {
        case 'twitter':
            return '<a href="" class="twitter-button">Follw me on Twitter!</a>';
        case 'rss':
            return '<a href="" class="rss-button">Subscribe to the feed!</a>'
add_shortcode('button', 'button_shortcode');

Now you can choose what button to display by defining type in your shortcode.

[button type="twitter"]
[button type="rss"]

This is great. But what if we wanted to change the text? We could keep on adding shortcode types like [button type="twitter-2"] and so on, but that’s not very dynamic, is it? Let’s see how to do this the right way.

Creating an enclosing shortcode

The enclosing shortcode allows you to embed content within your shortcode, just like BBCode if you’ve ever used that.

function button_shortcode( $attr, $content = null ) {
    return '<a href="" class="twitter-button">' . $content . '</a>';
add_shortcode('button', 'button_shortcode');

To use this shortcode, you embedd the text you want to use like this:

[button]Follow me on Twitter![/button]

To make this button even better, we could add parameters just like we did in the previous example. Let’s add two parameters this time, one for Twitter username and one for button style. Then we can have different types of buttons, and choose what Twitter account we want to link the button to.

function button_shortcode( $atts, $content = null ) {
   extract( shortcode_atts( array(
      'account' => 'account',
      'style' => 'style'
      ), $atts ) );

   return '<a href="' . esc_attr($account) . '" class="twitter-button ' . esc_attr($style) . '">' . $content . '</a>';
add_shortcode('button', 'button_shortcode');


[button account="filipstefansson" style="simple"]Follow me on Twitter![/button]
// Result: &lt;a href="" class="twitter-button simple">Follow me on Twitter!&lt;/a>

Now we have a customizable button that can we link to any Twitter account. As I’m sure you understand, you can create much more advanced shortcodes than this, but this is a good start.

Shortcodes in widgets and template files

Now when you have seen the power of shortcodes, you’re probably wondering why you can’t use them in your widgets and in your template files. Well, it turns out you can.

To activate shortcodes in your widgets, just put the following code in functions.php:

add_filter('widget_text', 'do_shortcode')

And to use a shortcode in your template files, you can access them by using:


Ready-to-use shortodes

Here’s some cool shortcodes you can implement right away.

Code in posts

If you run a blog that focuses on programming you probably want to be able to display code in your posts.

function code_shortcode( $attr, $content = null ) {
        $content = clean_pre($content); // Clean pre-tags
        return '<pre"><code>' .
               str_replace('<', '<', $content) . // Escape < chars
add_shortcode('code', 'code_shortcode');


[code]&lt;?php echo 'Hello World!'; ?>

Embed Adsense anywhere on your posts

With this shortcode you can add an Google ad anywhere on your posts simply by using [adsense].

function showads() {
    return '<script type="text/javascript"><!--
    google_ad_client = "pub-3637220125174754";
    google_ad_slot = "4668915978";
    google_ad_width = 468;
    google_ad_height = 60;
    <script type="text/javascript"
add_shortcode('adsense', 'showads');

Embed YouTube video

This shortcode will let you embed YouTube videos to your blog posts.

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


// Optional attributes: width, height, name, allowFullScreen, allowScriptAccess, controls  
[youtube value=""]

Paypal Donation Shortcode

This is a shortcode helps you to create donation links to your Paypal account.

function donate_shortcode( $atts, $content = null) {
    global $post;extract(shortcode_atts(array(
        'account' => 'your-paypal-email-address',
        'for' => $post->post_title,
        'onHover' => '',
    ), $atts));
    if(empty($content)) {
        $content='Make A Donation';
    return '<a href="'.$account.'&item_name=Donation for '.$for.'" title="'.$onHover.'">'.$content.'</a>';
add_shortcode('donate', 'donate_shortcode');


[donate]Donate Now[/donate]
[donate account="[email protected]" onHover="Thanks" for="Title"]
[donate account="[email protected]" onHover="Thanks" for="Title"]Donate Now[/donate]

Private note to authors

This last one is a clever one. With this shortcode you can create notes in your posts which only the authors can see.

function sc_note( $atts, $content = null ) {
	 if ( current_user_can( 'publish_posts' ) )
		return '<div class="note">'.$content.'</div>';
	return '';
add_shortcode( 'note', 'sc_note' );


After reading this article I hope you love WordPress shortcodes as much as I do, and I hope you’ll start implementing them in your own blog.


  • nice list, always usefull :D thanks for sharing

  • Captain Kickarse

    great! developing a wordpress site at the moment so this is very handy.

  • tristar1983

    Very useful tutorial, I’ve been using a plugin called “post snippets” for reguarly used buttons etc… This will be a lot better. Thanks =)

  • These codes are so useful to me. I am new to wordpress, so thank’s for the effort.

  • Have you used any shortcodes for this post?

  • Paul Andrew

    No, I haven’t.

  • Filip, thanks for posting one of my snippets. Cheers!

  • Informative Post!

    We’re in the process of developing a WordPress site. This info, it most timely.


  • Rob Golbeck

    This is great. The paypal donation shortcode will be especially useful for a non-profit site I’m working on. Thanks for posting this! :)

  • filipstefansson

    No problem! 

  • filipstefansson

    Thanks for the good comments everybody!

  • Pushpinder Bagga

    super – thanks!

  • Very useful! Many Thanks!

  • Nice post…..Thanks for sharing with us

  • Gotta need more tutorial like this.
    Thank you very much Filip

  • I prefer to use plugins rather than play around with code simply because it’s easier. However, with all the plugins I’ve got installed I’m concerned about the effect on the load time of my site. When I was first getting started with WordPress I was’nt aware of this, but I now realise I need to start considering delving into code.  After reading through this tutorial I’m confident that I could implement shortcodes, and therefore add functionality to my site without slowing it down anymore. Thanks for sharing.

  • Pimschaaf

    Thanks! Just as a heads up, there’s a missing semicolon on the end of line 13 of the ‘Creating a self-closing shortcode with parameters’-example.

  • Carlos J Ramirez

    Mil gracias por este super post, luego de horas buscando una solución finalmente logré solucionar mi problema con estas instrucciones para agregar un botón sin tener que instalar un plug-in adicional ni esperar por WP 3.9 | Thanks a lot for this super post. After hour looking for a solution finally I solve my problem with this instructions, to add a button without the need of install additional plugin or wait till WP 3.9

  • very helpful, I had some trouble understanding how shortcodes work in wordpress. Thanks