Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

WordPress Shortcodes: A Complete Guide

WordPress shortcodes were introduced in version 2.5 and since then have proved to be one of the most useful features. The average user acting as editor has the ability to publish dynamic content using macros, without the need for programming skills.

When a shortcode is inserted in a WordPress post or page, it is replaced with some other content. In other words, we instruct WordPress to find the macro that is in square brackets ([]) and replace it with the appropriate dynamic content, which is produced by a PHP function.

Further Reading on SmashingMag: Link


The usage is pretty simple. Let’s say we want to show the most recent posts in a given post. We could use something like this:


For a more advanced shortcode, we could set the number of posts to display by setting a parameter:

[recent-posts posts="5"]

Going one step further, we could set a heading for the list of recent posts:

[recent-posts posts="5"]Posts Heading[/recent-posts]

Simple Shortcode Link

In the first part of this tutorial, we will create the code for this simple shortcode:


The creation process is simple and does not require any advanced PHP knowledge. The basic steps are:

  1. Create the function, which will be called by WordPress when it finds a shortcode.
  2. Register the shortcode by setting a unique name.
  3. Tie the registration function to a WordPress action.

All codes in this tutorial can be placed in functions.php or in a seperate PHP file that will be included in functions.php.

Create the Callback Function Link

When a shortcode is found, it is replaced by some piece of code, which is the callback function. So, let’s create a function that fetches recent posts from the database.

function recent_posts_function() {
   query_posts(array('orderby' => 'date', 'order' => 'DESC' , 'showposts' => 1));
   if (have_posts()) :
      while (have_posts()) : the_post();
         $return_string = '<a href="'.get_permalink().'">'.get_the_title().'</a>';
   return $return_string;

As shown, we’re querying the database to get the latest post and return a string with a link to it. Ιt is worth noting that the callback function does not print anything, but rather returns a string.

Register the Shortcode Link

Now, we tell WordPress that this function is a shortcode:

function register_shortcodes(){
   add_shortcode('recent-posts', 'recent_posts_function');

Ιf a shortcode of [recent-posts] is found in a post’s content, then recent_posts_function() is called automatically. We should ensure that the shortocode’s name is unique in order to avoid conflicts.

Hook Into WordPress Link

In order to execute our register_shortcodes() function, we will tie it to WordPress’ initialization action:

add_action( 'init', 'register_shortcodes');

Test the Shortcode Link

Our simple shortcode is ready, and the next step is testing that it operates properly. Let’s create a new post (or open an existing one) and put the following line somewhere in the content:


Publish the post, and viewing it in a browser, you should see a link to the most recent post on your blog, as shown in this screenshot:


Simple shortcode

Advanced Shortcode Link

Shortcode Parameters Link

Shortcodes are flexible because they allow us to add parameteres in order to make them more functional. Let’s say we want to display a certain number of recent posts. To do this, we need to add an extra option to our shortcode that specifies how many recent posts to show.

We have to use two functions. The first one is WordPress’ built-in shortcode_atts() function, which combines user shortcode attributes with native attributes and fills in the defaults where needed. The second function is the extract() PHP function, which does what its name suggests: it extracts the shortcode attributes.

Extending our callback function, we add an argument, which is an array of attributes from which we extract the parameter for the number of posts. Then we query the database to get the desired number of posts and create an HTML list to show them.

function recent_posts_function($atts){
      'posts' => 1,
   ), $atts));

   $return_string = '<ul>';
   query_posts(array('orderby' => 'date', 'order' => 'DESC' , 'showposts' => $posts));
   if (have_posts()) :
      while (have_posts()) : the_post();
         $return_string .= '<li><a href="'.get_permalink().'">'.get_the_title().'</a></li>';
   $return_string .= '</ul>';

   return $return_string;

If the user skips the option, 1 is the default value. In the same way, we can add more attributes, enabling the shortcodes to accept multiple parameteres. Thanks to this enhanced function, we can set how many posts to show:

[recent-posts posts="5"]

When viewing it in the browser, you should see links to the five most recent posts in the content:


Advanced shortcode

Content in Shortcode Link

We can take our shortcode one step further and add the ability to pass some content as an argument, which in this case will be a heading for the list of recent posts. To do this, we use a second parameter, $content, in the callback function and add it as an h3 heading before the list. The new function is as follows:

function recent_posts_function($atts, $content = null) {
      'posts' => 1,
   ), $atts));

   $return_string = '<h3>'.$content.'</h3>';
   $return_string .= '<ul>';
   query_posts(array('orderby' => 'date', 'order' => 'DESC' , 'showposts' => $posts));
   if (have_posts()) :
      while (have_posts()) : the_post();
         $return_string .= '<li><a href="'.get_permalink().'">'.get_the_title().'</a></li>';
   $return_string .= '</ul>';

   return $return_string;

This kind of shortcode is similar to an HTML tag. We enclose the content in an opening and closing shortcode:

[recent-posts posts="5"]This is the list heading[/recent-posts]

The result is the same as the previous example, except for the new heading for the list of posts:


Content in shortcode

Shortcodes Anywhere, Anytime! Link

Enabling Shortcodes in Widgets Link

By default, shortcodes are ignored in WordPress sidebar widgets. Take the following as an example:

[recent-posts posts="5"]

If you type this shortcode into a widget, it would look something like this:


A shortcode in a widget before enabling the functionality

With WordPress, we can enable this functionality with a single line of code. To be able to add shortcodes in widgets, add the following:

add_filter('widget_text', 'do_shortcode');

Now, without having to change anything else, the shortcode will display properly in widgets:


A shortcode in a widget after enabling the functionality

Similarly, we can enable shortcodes in comments:

add_filter( 'comment_text', 'do_shortcode' );

And excerpts:

add_filter( 'the_excerpt', 'do_shortcode');

Shortcode TinyMCE Editor Button Link

While shortcodes are a handy way to add dynamic content to posts, the might be a bit confusing for the average user, especially when they get complicated, with multiple parameteres. Most users are not familiar with HTML-like syntax; and yet they have to remember the exact syntax and all available attributes of shortcodes, because even a minor syntax error could cause an undesirable result.

To resovle this, we can add a button to the TinyMCE editor`s interface, enabling the user to create a shortcode with a simple click. There are two basic steps to creating this button:

  1. Create the JavaScript file for the button.
  2. Register the button and the JavaScript file.

JavaScript File for the Button Link

The JavaScript file is used to register the TinyMCE plugin through the TinyMCE API11. We create a new file named recent-posts.js in the js directory of our theme, and then we type the following piece of code:

(function() {
   tinymce.create('tinymce.plugins.recentposts', {
      init : function(ed, url) {
         ed.addButton('recentposts', {
            title : 'Recent posts',
            image : url+'/recentpostsbutton.png',
            onclick : function() {
               var posts = prompt("Number of posts", "1");
               var text = prompt("List Heading", "This is the heading text");

               if (text != null && text != ''){
                  if (posts != null && posts != '')
                     ed.execCommand('mceInsertContent', false, '[recent-posts posts="'+posts+'"]'+text+'[/recent-posts]');
                     ed.execCommand('mceInsertContent', false, '[recent-posts]'+text+'[/recent-posts]');
                  if (posts != null && posts != '')
                     ed.execCommand('mceInsertContent', false, '[recent-posts posts="'+posts+'"]');
                     ed.execCommand('mceInsertContent', false, '[recent-posts]');
      createControl : function(n, cm) {
         return null;
      getInfo : function() {
         return {
            longname : "Recent Posts",
            author : 'Konstantinos Kouratoras',
            authorurl : '',
            infourl : '',
            version : "1.0"
   tinymce.PluginManager.add('recentposts', tinymce.plugins.recentposts);

As shown below, we create a new plugin, calling the tinymce.create() method, passing in the plugin’s name and the attributes. The most important part of this code is the init() function, where we define a name, an icon file and an event handler for the button using the onclick() function.<1/p>

In the first two lines of the onclick() function, the user is prompted to input the parameters for the number of posts and list heading of the shortcode. Then, depending of the values of these parameters, the appropriate shortcode form is inserted in the editor.

Finally, our TinyMCE plugin is added to the PluginManager using the add() function. Now we’ve successfully integrated the [recent-posts] shortcode into a WordPress theme.

Registering the Button and TinyMCE Plugin Link

After creating the JavaScript file, we need to register it and the shortcode button. So, we create two functions and tie them to the corresponding WordPress filters.

The first function is named register_button() and pushes the shortcode into the array of buttons, adding a divider between the new button and the existing ones:

function register_button( $buttons ) {
   array_push( $buttons, "|", "recentposts" );
   return $buttons;

The second function, add_plugin(), points to the path and name of the JavaScript file:

function add_plugin( $plugin_array ) {
   $plugin_array['recentposts'] = get_template_directory_uri() . '/js/recentposts.js';
   return $plugin_array;

The next step is to add a filter with the previous functions. The register_button() function is tied to the mce_buttons filter, which is executed when the editor loads the plugins, and add_plugin() is tied to mce_external_plugins filter, which is executed when the buttons are about to be loaded:

function my_recent_posts_button() {

   if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') ) {

   if ( get_user_option('rich_editing') == 'true' ) {
      add_filter( 'mce_external_plugins', 'add_plugin' );
      add_filter( 'mce_buttons', 'register_button' );


The previous function takes no action if the user does not have permission to edit posts or pages or if the user is not in visual editor mode.

Finally, we hook the function into WordPress’ initialization action to execute this when a page loads:

add_action('init', 'my_recent_posts_button');

Button Usage Link

To check that the shortcode button functions properly, let’s create a new post or edit an existing one. A new button, with the icon that we set before, should have been added to the left of the first line of the TinyMCE buttons, as in this screenshot:


Shortcode TinyMCE editor button

When we press the shortcode button, a dialog appears that prompts us to type the shortcode parameter for the number of posts:


Shortcode TinyMCE editor button

After inserting the number of posts, a second dialog appears, prompting us to type in the heading of the list:


Shortcode TinyMCE editor button

If any parameter is left blank, it will not be included in the final shortcode.

Finally, the shortcode appears in the editor:


Shortcode TinyMCE editor button

Some Useful Shortcodes Link

This part of the tutorial provides the source code for some userful WordPress shortcodes that will take your blog one step up.

One simple example is the link button shortcode:

function linkbutton_function( $atts, $content = null ) {
   return '<button type="button">'.do_shortcode($content).'</button>';
add_shortcode('linkbutton', 'linkbutton_function');

Use this shortcode as follows:

[linkbutton]Click Me![/linkbutton]

Something like this should appear:


Link button shortcode

WordPress Menu Link

Let’s move on to a more complex shortcode, one that grabs a WordPress menu:

function menu_function($atts, $content = null) {
         array( 'name' => null, ),
   return wp_nav_menu(
          'menu' => $name,
          'echo' => false
add_shortcode('menu', 'menu_function');

When calling this shortcode, pass in the name of the menu you want to show:

[menu name="main-menu"]

The menu will appear in your content:


Menu shortcode

Google Maps Link

A Google Maps shortcode is really useful, because we can insert a map into our content without needing to edit the source code.

function googlemap_function($atts, $content = null) {
      "width" => '640',
      "height" => '480',
      "src" => ''
   ), $atts));
   return '<iframe width="'.$width.'" height="'.$height.'" src="'.$src.'&output=embed" ></iframe>';
add_shortcode("googlemap", "googlemap_function");

When typing the shortcode, pass in the width and height and the link from Google Maps as parameters:

[googlemap width="600" height="300" src=",+Greece&hl=en&ll=35.327451,25.140495&spn=0.233326,0.445976& sll=37.0625,-95.677068&sspn=57.161276,114.169922& oq=Heraklion&hnear=Heraklion,+Greece&t=h&z=12"]

The result is the following:


Google Maps shortcode

Google Charts Link

Another useful service is Google Charts, because it is very customizable. Here is a shortcode example with multiple attributes:

function chart_function( $atts ) {
       'data' => '',
       'chart_type' => 'pie',
       'title' => 'Chart',
       'labels' => '',
       'size' => '640x480',
       'background_color' => 'FFFFFF',
       'colors' => '',
   ), $atts));

   switch ($chart_type) {
      case 'line' :
         $chart_type = 'lc';
      case 'pie' :
         $chart_type = 'p3';
      default :

   $attributes = '';
   $attributes .= '&chd=t:'.$data.'';
   $attributes .= '&chtt='.$title.'';
   $attributes .= '&chl='.$labels.'';
   $attributes .= '&chs='.$size.'';
   $attributes .= '&chf='.$background_color.'';
   $attributes .= '&chco='.$colors.'';

   return '<img title="'.$title.'" src="'.$chart_type.''.$attributes.'" alt="'.$title.'" />';
add_shortcode('chart', 'chart_function');

To create a pie chart with four types of data, we insert the following line:

[chart type="pie" title="Example Pie Chart" data="41.12,32.35,21.52,5.01" labels="First+Label|Second+Label|Third+Label|Fourth+Label" background_color="FFFFFF" colors="D73030,329E4A,415FB4,DFD32F" size="450x180"]

The result is a pie like the following:


Google Charts shortcode

PDF embedding Link

We can use the Google Docs PDF viewer to embed a PDF on your website. Here is the shortcode to do this:

function pdf_function($attr, $url) {
       'width' => '640',
       'height' => '480'
   ), $attr));
   return '<iframe src="' . $url . '&embedded=true" style="width:' .$width. '; height:' .$height. ';">Your browser does not support iframes</iframe>';
add_shortcode('pdf', 'pdf_function');

To embed a PDF, type the shortcode [pdf], and pass in the URL as the content argument:

[pdf width="520px" height="700px"][/pdf]

When viewing the page, the visitor will see a viewer with the PDF:


PDF embedding shortcode

Shortcodes WordPress Plugins Link

Thanks to WordPress plugins, adding shortcode functionality to a website requires no source-code editing at all. If you look at the WordPress plugins directory21, you’ll see a large number of such plugins with which to style posts and pages. In this section, we’ll recommend some of the best shortcode plugins (favoring the free ones) to satisfy your every need.

Shortcodes Ultimate Link

Without a doubt, this is the best shortcode plugin out there. It enables you to easily create buttons, tabs, boxes, sliders, tooltips and many more elements.


Shortcodes Ultimate23

J Shortcodes Link

The J Shortcodes plugin is similar to Shortcodes Ultimate, offering a collection of useful elements to style a website, including buttons, boxes, tabs and accordions. J Shortcodes lets you set custom attributes on elements, such as color, size and shape, and define custom column layouts on any page or post.


J Shortcodes25

Shortcodes Pro Link

Shortcodes Pro does not offer ready-to-use shortcodes. Instead, this plugin allows for quick and easy creation of WordPress shortcodes from inside WordPress’ administration panel.


Shortcodes Pro

Shortcode Exec PHP Link

Natively, WordPress does not provide functionality to execute pieces of PHP source code on posts or pages. Shortcode Exec PHP plugin enables you to execute PHP code in WordPress content using manually defined shortcodes.


Resources From Around the Web Link

Last but not least, here are some articles you might find useful.


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5 /wp-content/uploads/2012/04/shortcodes.jpg
  6. 6 /wp-content/uploads/2012/04/shortcodes01.png
  7. 7 /wp-content/uploads/2012/04/shortcodes02.png
  8. 8 /wp-content/uploads/2012/04/shortcodes03.png
  9. 9 /wp-content/uploads/2012/04/shortcodes04.png
  10. 10 /wp-content/uploads/2012/04/shortcodes05.png
  11. 11
  12. 12 /wp-content/uploads/2012/04/shortcodes06.png
  13. 13 /wp-content/uploads/2012/04/shortcodes07.png
  14. 14 /wp-content/uploads/2012/04/shortcodes08.png
  15. 15 /wp-content/uploads/2012/04/shortcodes09.png
  16. 16 /wp-content/uploads/2012/04/shortcodes10.png
  17. 17 /wp-content/uploads/2012/04/shortcodes14.png
  18. 18 /wp-content/uploads/2012/04/shortcodes11.png
  19. 19 /wp-content/uploads/2012/04/shortcodes12.png
  20. 20 /wp-content/uploads/2012/04/shortcodes13.png
  21. 21
  22. 22 /wp-content/uploads/2012/04/shortcodes15.png
  23. 23
  24. 24 /wp-content/uploads/2012/04/shortcodes16.png
  25. 25
  26. 26 /wp-content/uploads/2012/04/shortcodes17.jpg
  27. 27 /wp-content/uploads/2012/04/shortcodes18.png
  28. 28 /2009/02/02/mastering-wordpress-shortcodes/
  29. 29
  30. 30
  31. 31
  32. 32

↑ Back to top Tweet itShare on Facebook

Konstantinos Kouratoras is a software engineer based in Crete, Greece. WordPress lover and amateur photographer. You can contact him through personal website or follow him on twitter.

  1. 1

    What an amazing tutorial! I have been wanting to use shortcodes for a long time now, and this is the perfect opportunity!

    Thanks a bunch!

  2. 2

    Konstantin Kovshenin

    May 2, 2012 12:21 am

    A complete guide you say?

    We have to use two functions. The first one is WordPress’ built-in shortcode_atts() function, which combines user shortcode attributes with native attributes and fills in the defaults where needed. The second function is the extract() PHP function, which does what its name suggests: it extracts the shortcode attributes.

    You barely explained what shortcode_atts is for and what exactly extract does, other than just “extracts the shortcode attributes.” It’s almost as saying array_walk_recursive “recursively walks through an array.”

    The shortcode_atts function is an important security measure. It takes a list of accepted (and default) shortcode attributes and makes sure that any extra attributes provided by the user are stripped, and the ones skipped, are defaulted. This is very important especially with a function like extract around. And you say “combines with native attributes,” huh??

    Dear Smashing Magazine, please don’t become like WPTuts+.

    ~ Konstantin

    • 3

      Jeff Starr

      May 4, 2012 1:20 pm

      Hi Konstantin,

      Absolutely, further info on shortcode_atts and extract would be useful, especially your point about the former playing an important role in WordPress security. It’s good to know that WordPress shortcode_atts function is operating securely behind the scenes. Also agree that “combines with native attributes” is a bit vague, but otherwise think the article does a good job of completely guiding the reader through the fun and rewarding world of WordPress shortcodes.

      Thanks for the feedback — and for holding us to a higher standard.

    • 4

      Alex Vallejo

      July 2, 2012 7:30 am

      One question on the Advanced Shortcodes part; Where is ‘$posts’ defined? You extract ‘posts’ from the attributes but they are never assigned the variable of $posts, even though you use the variable in defining the number of posts to display. Should you assign the entire extract function to the variable of $posts?

    • 5

      Hi Konstantin,

      Your tone is critical and not complimentary to the efforts of the author of the article. If you have anything to add that can assist people further then please write your own article, expanding on the points you made, and give good illustrative examples. Then come back here and make a link to your contribution. In this way we assist and support one another, and take action on what we can offer.

      • 6

        You can check his contributions in majority of WordPress Codex. Plus what he criticized holds absolutely true. The functionalities of pre-defined functions should be explained. I actually admire his higher regard for SM against others :P

  3. 7

    This was really helpful! Before I knew how to do this I had to create a custom page template that ran a function above or below the content region. This is a huge help! Thanks :)

  4. 8

    Nice roundup! Very useful ( and not too detailed as some would have it ). More detail can be found elsewhere and i would also suggest always wrapping related code inside a nice, portable class to be used as a plugin on any site! Cheers!

  5. 9

    Sami Keijonen

    May 13, 2012 2:35 am

    Just made pullquote shortcode plugin with a help of this article. Thank you.

  6. 10

    Thanks for the great Tutorial.

    What if I wanted to include a shortcode in another shortcode?

    Here is an example

    function twitt() {
    return ‘ID).’?trackid=” title=”Click to send this page to Twitter!” target=”_blank”>Share on Twitter‘;

    add_shortcode(‘twitter’, ‘twitt’);

    you will see that at the end of the post it relates to, we add a track ID

    We have another shortcode already on our site that collects this data, so if someone sends us traffic, we know where its from as their link is cookied so we can see where the visitor goes.

    example: person links to a site post like this

    We then know who referred to our site. Then when it gets retweeted, it still will tell us the originator because the new inbound link will include the original track id.

    Hope that makes sense?

    My issue is that the above code show the link with the track id part at the end, but how do I include the shortcode result of the originator :)

    Thanks for your help.


  7. 11

    Great article! It was very helpful, thanks :).

  8. 12

    sohail tariq

    June 29, 2012 9:37 pm

    all information is very useful.

  9. 13

    Maor Barazany

    July 5, 2012 5:14 am

    Is there a way to add support for shorcodes in custom wp_editor?
    It appears WP ignores shortcoded that placed in custom wp_editor .
    Of course, do_shortcode($content) can be used, but it’s not the best way.
    I tried to add the filter, like in widgets and comments –
    add_filter( 'the_editor_content', 'do_shortcode' );
    but it still ignores the shortcode. Any ideas?


  10. 14

    Great article, really appreciate the real-world use cases with Google maps and charts.

    There was one area that I would love to have had covered: the placeholder that WordPress generates for the gallery shortcode. Where to get further documentation on the placeholder and how to create placeholders for your own custom shortcodes.

    But great article!

  11. 15

    Amazing article… People!! This author saved my life today!!

    PS.- Konstantin, i’ve read you too and let me say you: If you have a very basic knowledge of this stuff, you wont find any advantage in this guide. Maybe you wish to learn the first steps and come back again.

  12. 16

    GREAT ARTICLE. Thanks very much.

  13. 17

    Thank you for this valuable post.
    My question is related to triggering shortcode not create a shortcode.

    I use a flv mp4 player to show videos and have shortcodes for it.

    I want to put small images to a page and when click small image, related shortcode ( video) is opened.
    On the other hand, how can I activate shortcode by clicking an image or text?

    • 18


      Thanks for the guide: I’m new to wordpress and I have the same question than tosun,

      I already have a shortcode from a plugin and what i try to do is to have a button in the MCE editor, and when I click on it it will insert the shortcode tags in the post like: [shortcode] [/shortcode]

      As you said: Most users are not familiar with HTML-like syntax; and yet they have to remember the exact syntax, because even a minor syntax error could cause an undesirable result.


  14. 19

    How to add short code for Read More feature?

    I am trying to add Read more in a theme but do not know how to do it. I am an amateur.

  15. 20

    Thank you so much for this great tutorial

  16. 21

    Amel Hendrik Groos

    December 25, 2012 4:59 am


    Great short-codes review. Thank you very much. Can you help me with something else please? I once had this WordPress short-code that gave me the ability to split a WordPress page in multiple pages. I can’t find nor remember the short-code. The only thing I can remember it looked something like this: ”/- – -new_page- – -/” (only replaced by arrows). Please let me know if something comes to mind. Thank you.

  17. 22

    This article is great, but I get multiple errors with the Google Maps shortcode somethig about http and https…
    How can I fix this ?

  18. 23

    The Recent Posts shortcode works, but even when using //
    recent-posts posts=”5″
    Only one post is listed…how can I fix this?

  19. 24

    Really useful tips for me. Great article. !!!!!

  20. 25

    The tinyMCE button is not working as of march 2013, that part of the tutorial should be updated.

  21. 26

    can some body helpme…?
    i will make recent-post shortcode from custom post type, how to make it…?

  22. 27

    What about native, inbuilt wordpress shortcodes. Is there a list of these?

    Great article. Very, very comprehensive.

  23. 28

    Hi Konstantinos, I’m trying to put a shortcode that I’ve created to show the post title into a phrase located at the body message field of a Contact Form inserted like a text widget in my blog’s sidebar. It doesn’t run :(
    Perhaphs you can help me.
    If somebody knows another way to do that I’ll pleased about that!
    If you answer me by mail I send you all the technical details.
    Thanks, see you.

    • 29


      April 10, 2013 3:04 pm

      Hi Jose, in order to enable shortcodes in widgets, you have to insert this line in your functions.php

      add_filter(‘widget_text’, ‘do_shortcode’);

  24. 30

    Chaim Krause

    May 5, 2013 7:29 am

    Your article is the latest one I have checked this morning searching for an answer. Like the commenter above me, I am looking for a list of the shortcodes. My issue is that I can find the list of default shortcodes installed with WordPress, but I am unable to find an easy way to determine all of the shortcodes available to me on a particular WP installation based on the plugins that are installed. To me, an awesome plugin would be one that lists all of the shortcodes available and provides info on what plugin provides that shortcode.

  25. 31

    ashfaq ahmed

    June 6, 2013 4:40 pm


    I have used read and use Advanced Shortcode into my site i am getting only 1 post. I set
    extract( shortcode_atts( array(
    ‘posts’ => 1
    ), $atts ) )

    $args = array(
    ‘post_type’ => ‘events’,
    ‘orderby’ => ‘post_date’,
    ‘showposts’ => $posts,
    ‘post_status’ => ‘publish’
    and my shortcode is [location posts=”10″] so it should need to display 10 post but it is only display 1 post can anyone help me. I actually want that whenever i change number in the shortcode it should change number of post at front end like if i put shortcode [location posts=”5″] it show 5 posts and if i put [location posts=”20″] it show 20 post etc etc thanks

  26. 32

    Best article I’ve ever read in my entire unproductive life lol

  27. 33


    I am creating a table shortcode for twitter bootstrap. But somehow I am not sure why the and tags are not creating please help me.

    Here is the code for shortcode PHP:

    and here is the Code for javascript:


  28. 34

    Zakir Hossen Sujon

    August 31, 2013 7:57 am


    I search in Google for better explanation about shortcodes but every time I had some complain but now I’m satisfy.

    You are the boss.

  29. 35

    Thank you for your great article. We found it useful while building our plugin – Intense WordPress Plugin. It is a premium plugin recently available on

    You can find a demo here:

    Again, thank you very much!

  30. 36

    Sometimes you don’t want shortcodes to be parsed on a certain page. This code allows you to disable all of them (call it in your theme for example):

    remove_filter( 'the_content', 'do_shortcode', 11 );

    Note that this is a fragile bit of code and that it might break in the future. The third parameter is necessary, and if wp change the priority of their shortcode filter, it will break. You should unit test this after every wp update.

    Also, I feel the guide does not say enough about security. What if someone has the exec php plugin installed and they forget about it. When reading your tutorial they go cool, we can enable shortcodes in comments…

    add_filter( 'comment_text', 'do_shortcode' );


  31. 37

    This is a very great resource! I have bookmarked this particular page.

  32. 38

    Great article.
    I am trying to do something similar. I am trying to list “all” my shortcodes as dropdown in TinyMCE. I successfully added dropdown, but it’s only including builtin shortcodes but not the one I created in shortcodes.php … one exception, if I move all my shortcodes into functions.php it works perfectly.

    Using following code to call shortcodes.php into functions.php:

    if (!is_admin())
    locate_template(array(‘/shortcodes.php’), true, false);

    Any help?

  33. 39

    Slightly off topic but with some new improvements to WP 3.9 you don’t *have* to create buttons using shortcodes. There are some improvements to the TinyMCE editor which means you can add more visual elements to the editor which is what I’ve just done – you can add buttons to your editor without using shortcodes and also edit them easily, hope someone finds this useful :)

  34. 40


    I’m looking for Toggle or other name shortcode that display the result at the right not at the bottom.

    Any help?


  35. 41

    Charlotte Bell

    April 30, 2014 11:10 pm

    How do I replace my photo with a dummy image short code?

  36. 42

    This tutorial is like if you walked into an auditorium and professor threw books at you.

  37. 43

    You may also want to check out this tutorial. It seems to work better with the recent wordpress 3.9 update.

  38. 44

    Amazing tutorial bro, thanks :D

  39. 45

    Awesome article thanks for sharing as I was looking for some serious help with shortcodes and came upon this in a Google search!

  40. 46

    How can I post a organogram chart through shortcode

  41. 47

    Wow! that’s an amazing tutorial, THE COMPLETE GUIDE!

  42. 48

    I cannot get the map by using the above mentioned code. How do I get it?

  43. 49


    This is absolutely brilliant tutorial, very much appreciated.

    I have one small issue that maybe you (or any reader) might be able to help with, I have tried to add a short code button the tinyMCE but when i do, its breaking the editor, all the buttons inc the defaults disappear and i cannot edit the text areas.

    Anyone have idea where i may be going wrong?

  44. 50

    Just further to my previous comment, thought id expand on it, I have used the code above exactly as given, but just changed the ‘recent posts’ to ‘testimonials’. the code in my functions.php is as:

    add_filter(‘widget_text’, ‘do_shortcode’);

    // Testimonials Shortcode

    function testimonials_function() {
    query_posts(array(‘post_type’ => ‘testimonials’, ‘posts_per_page’ => 1, ‘orderby’=>rand));
    if (have_posts()) :
    while (have_posts()) : the_post();

    $return_string = ‘


    return $return_string;

    function register_shortcodes(){
    add_shortcode(‘testimonials’, ‘testimonials_function’);

    add_action( ‘init’, ‘register_shortcodes’);

    function register_button( $buttons ) {
    array_push( $buttons, “|”, “testimonials” );
    return $buttons;

    function add_plugin( $plugin_array ) {
    $plugin_array[‘testimonials’] = get_template_directory_uri() . ‘js/testimonials.js’;
    return $plugin_array;

    function testimonials_button() {

    if ( ! current_user_can(‘edit_posts’) && ! current_user_can(‘edit_pages’) ) {

    if ( get_user_option(‘rich_editing’) == ‘true’ ) {
    add_filter( ‘mce_external_plugins’, ‘add_plugin’ );
    add_filter( ‘mce_buttons’, ‘register_button’ );


    add_action(‘init’, ‘testimonials_button’);

    and the code in the js file is:

    // JavaScript Document
    (function() {
    tinymce.create(‘tinymce.plugins.testimonials’, {
    init : function(ed, url) {
    ed.addButton(‘testimonials’, {
    title : ‘testimonials’,
    image : url+’/testimonial-icon.png’,
    onclick : function() {
    var posts = prompt(“Number of posts”, “1”);
    var text = prompt(“List Heading”, “This is the heading text”);

    if (text != null && text != ”){
    if (posts != null && posts != ”)
    ed.execCommand(‘mceInsertContent’, false, ‘[testimonials posts=”‘+posts+'”]’+text+'[/testimonials]’);
    ed.execCommand(‘mceInsertContent’, false, ‘[testimonials]’+text+'[/testimonials]’);
    if (posts != null && posts != ”)
    ed.execCommand(‘mceInsertContent’, false, ‘[testimonials posts=”‘+posts+'”]’);
    ed.execCommand(‘mceInsertContent’, false, ‘[testimonials]’);
    createControl : function(n, cm) {
    return null;
    getInfo : function() {
    return {
    longname : “testimonials”,
    author : ‘Konstantinos Kouratoras’,
    authorurl : ‘’,
    infourl : ‘’,
    version : “1.0”
    tinymce.PluginManager.add(‘testimonials’, tinymce.plugins.testimonials);

    if someone could please point out where any why the button is breaking the WP page editor.

  45. 51

    In Content in Shortcode
    Used $return_string = ”.$content.”;
    Actually I could not understand $return_string = ”; and $return_string .= ”; deference?
    If I need $return_string = ”; how can take?

  46. 52

    Hello great tutorial, but i will not able to execute the short code in custom text field.

    The thing i need is just append current wordpress user id in the custom text field.

    Means i have a custom text field for my post, the field is a outgoing link is

    I just append the short code to the link in the custom field (i have installed shortcode plugin)

    When the current user clicking on the link (example admin), he will go to

    how can i execute this.

  47. 53

    Hi there,
    i know this is an old article, but maybe you can help me on a similar function i want to create.

    I have two div article-text and playlist-text and wanna use shortcodes [article-text] and [playlist-text] and in post page that way i can use callback function to filter the content, and only show the appropriate content.

    I already registered

    function register_shortcodes(){
    add_shortcode(‘article-text’, ‘article_text_function’);
    add_shortcode(‘playlist-text’, ‘playlist_text_function’);

    add_action( ‘init’, ‘register_shortcodes’);

    i tried callback functions but it never works.

    Thanks for the help


↑ Back to top