Using WordPress’ Shortcode System
Today I’m going to show you how to write your own shortcode plugin for WordPress. The shortcode system can be extremely powerful & for developers they are great for allowing clients to insert complicated pieces of HTML into posts without worrying about it being overly complicated.
Now as usual you need to start your plugin with the following:
|
1 2 3 4 5 6 7 8 |
/* Plugin Name: Plugin Name Plugin URI: Plugin URL, can be your website URL. Description: Type what the plugin is used for here. Author: Your name Version: Version number, like 1.0 Author URI: Your Website's address */ |
You only really need the name and it is good practice to keep the version number. I would always advice keeping all of them though as it’s always good to get into the practice of having them all for when you make the next awesome premium plugin.
Ok, so now we can tell WordPress about our new shortcode. To do this we use one simple line:
|
1 |
add_shortcode('tagname', 'function_name'); |
tagname is the name of the tag used, so in this case it would be [tagname] and function_name is the name of the function that is called when the tag is used.
Now we need to tell WordPress what to do when it finds our shortcode. The shortcode I am going make as an example is somewhat pointless, but it is easy to understand and yet still shows some of the useful things shortcodes can do.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
add_shortcode('link', 'link_shortcode'); //define the new shortcode //$attr are the attributes you define in the tag, $c is the text between the tags function link_shortcode($attr, $c = NULL) { //extract the attributes from the array and replace the defaults with the ones defined in the tag, if any extract(shortcode_atts(array( 'title' => '', 'url' => '#', 'lightbox' => '', ), $attr)); //if there isn't any text between the tags we can't continue if($c == NULL) return false; //Start the hyperlink $output = '<a href="'.$url.'" title="'.$title.'" '; //if the user wants the lightbox (lightbox wasn't empty) add in the rel attribute if(!empty($lightbox)) $output .= 'rel="lightbox['.$lightbox.']"'; //finish the hyperlink $output .= '>'.$c.'</a>'; //return the output back to WordPress return $output; } |
There you go, a fairly simple shortcode that will generate a hyperlink where ever the [link] shortcode is used. Its usage would be something like this:
|
1 |
I can haz [link title="Cheese Burger" url="http://en.wikipedia.com/Lolcats"]cheez burger[/link] |
That will make a standard hyperlink. You may have noticed in the code that I added a lightbox attribute, that allows you to define a gallery for the lightbox script.
I hope this little tutorial helps you with how to start working with the WordPress shortcode system. The shortcode I wrote here is not particularly useful but it does give a basic idea of how to make shortcodes. Everything else extends from this point on. For instance a shortcode can also be written without a closing tag and so does not have to depend on the content inside the tags, such as the WordPress Gallery shortcode.
As always, if you have any questions please feel free to ask them in the comments.
3 Comments
Fabiën Tesselaar
Hey,
Looks like an old post, but after a few hours of searching through useless google posts this one actually helped!
Anyway I’ll be making some shortcodes now, bye.
Paul Robinson
Glad it helped you. 😉