Using Wordpress’ Shortcode System

Posted 1 month, 3 weeks ago at 12:04 pm. 1 comment

Ok, I want to show you all how to write your own shortcode plugins for Wordpress. Why? Well because I believe it is one of the most impressive & powerful new features of Wordpress. So I am going to show you how to make a basic fully working shortcode plugin.

Now as I have said in a previous post you need to start a plugin with this:

/*
Plugin Name: Plugin Name
Plugin URI: your plugins url
Description: Description of plugin
Author: Your name
Version: Version number, just make one up
Author URI: you web url
*/

You only really need the name and possibly version number but it’s always good to put the rest of the stuff in.

Ok, so now we can add in our own shortcode. To do this we use one simple line:

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 defines what the tag should do.

So let’s make our first function. The shortcode I am going make as an example is almost completely pointless, but it is easy to understand yet still shows some of the complex things shortcodes can do.

add_shortcode('link', 'link_shortcode'); //define the new shortcode
 
function link_shortcode($attr, $c = NULL) { //$attr is the attributes you define in the tag
                                                           //$c is the text between the tags
    extract(shortcode_atts(array(               //extract the attributes from the array and replace
		'title' => '',                             //the defaults with the ones defined in the tag if any
		'url' => '#',
		'lightbox' => '',
	     ), $attr));
 
    if($c == NULL)                                    //if there isn't any text between the tags we can't continue
        return false;
 
    $output = '<a href="'.$url.'" title="'.$title.'" '; //Start the a
    if(!empty($lightbox))                                //if lightbox isn't empty write the lightbox rel
        $output .= 'rel="lightbox['.$lightbox.']"';
    $output .= '>'.$c.'</a>';                           //finish the a href.
 
    return $output; //return the output.
}

There you go that is a simple shortcode that will generate hyperlinks in place of [link] tags. Its usage would be something like this:

I can has [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 I added a lightbox section, that allows you to define a gallery for a lightbox link. You would just wrap the [link lightbox="galleryname"] tag around an image instead, with the url and title included too.

I hope this little tutorial helps you with how to start working with the Wordpress shortcode system. The shortcode I wrote here is kinda useless but it gives the basic idea of how to make shortcode. Everything else extends from this point on. For instance 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.

Anyway, if you have any questions please feel free to ask them and for a more complex implementation of the Wordpress shortcode try this.