Wordpress Shortcodes

A shortcode is a WordPress-specific code that lets you do nifty things with very little effort to your WordPress Theme. Shortcodes allows you to embed files or create objects that would normally require a lot of code in just one single line . For example , a shortcode for embedding a video might look like this :

[video1]

A well-know shortcode is the built-in gallery shortcode , you can use it to show a gallery of images taken from media uploaded to the post in your WordPress Theme . Depending on the theme this may look different on your installation , here is the Onetone theme Gallery:

Galleries , videos , and various other functionality would require a lot of code editing.Shortcodes simplify the addition of features to a WordPress site.By using shortcodes the HTML and other markup is added dynamically directly into the post or page where the user wants them to appear .

Sometimes you may need to do repetitive tasks or a specific HTML format , to do this you have to add your own shortcode . So how to create your own shortcodes .

The basic of Shortcode

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. Shortcode API supports almost all the possible combinations: a self-closing tag, open-label, a label with parameters and so on.

The usage is very simple.

Let’s take a look at the basics through a example .Let’s assume that throughout your post
the creation process is very simple and does’t need any advanced PHP knowledge .

First we should create the function :

function hello(){
return ‘hello , world!’
}

Next tie the registration function to a WordPress action:

add_shortcode(‘hw’ , ‘hello’)

Note:these codes should be added to your theme’s functions.php file or your plugin’s files.

Now we can use [hw] in your post , just have a try.
So there are three steps for you to create your own function:
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

The add_shortcode function requires 2 parameters: the first parameter is the shortcode WordPress tries to match — this is what you write between the square brackets — the second parameter is the name of the function which handles the output, which is completely up to us.

Inside our output handling function we need to return the output that we want to replace our shortcode.

Shortcode attribute

For a more advanced shortcode, we can use attributes as well , if you want to make sure that the ‘hello world’ is shown in bold , you can achieve this by creating a attribute , for example:

add_shortcode(‘hw’ , ‘hello’);
Function hello($atts){
$atts=shortcode_atts(array(‘bold’=>true),$atts);
If($atts[‘bold’]==true){
return ‘ hello world! ‘
}else{
return ‘hello world!’
}
}

We can use the code like this :[hw bold=’true’] . Now we have a attribute named ‘bold’.

The shortcode_atts() function is used to parse out all the attributes and give some of them default values .if you don’t specify what the value of “bold” is , then it is set to false . Let’s take a look at the value of the bold attribute , if the value is true , we return ‘ hello world! ‘ in a strong tag or just return it as is.

Advanced Shortcode

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){

extract(shortcode_atts(array(

‘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>’;

endwhile;

endif;

$return_string .= ‘</ul>’;

wp_reset_query();

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″]

Shortcode content

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, for example:

[hello]we are very happy , because we can create our own shortcode now![/hello]

The same way we create a function:

add_shortcode(‘pt’ , ‘post_output’);
function post_output($atts , $content=null ){
$atts=(array(‘bold’=>’true’),$atts);
return ‘’.$content.’’ ;
}

Now you use this short code in you post , the default bold is “true” . This kind of shortcode is similar to an HTML tag. We enclose the content in an opening and closing shortcode:

[pt bold=’true’]content[/pt]