Beginner’s Guide to WordPress Shortcodes

Beginner’s Guide to WordPress Shortcodes

Going since version 2.5, WordPress shortcodes are a very useful feature. They allow people with little coding skills to publish dynamic content using macros.

When a shortcode is added to a WordPress page or post, the code gets replaced with different content. The macro in the square brackets is replaced with content from a PHP function.

Examples of Shortcode

Shortcodes are easy to use – after all they have been designed to be. Let’s say you wanted to show some recent posts on your latest post. You can add:

[recent-posts]

If you want to show the last five post, you can set a parameter:

[recent-posts posts="5"]

Simple Shortcode

So how is this done? There’s nothing to it really, it doesn’t require any great breadth of programming skill. Simply put, you need to:

  1. Create the function – this is what WordPress does when it finds shortcode in a post.
  2. Give the shortcode a name.
  3. Tie the shortcode to a WordPress action.

Remember, all code created in this tutorial goes into functions.php.

The Callback Function

The shortcode is replaced by another piece of code, the callback function. Here, we have created a function which brings recent posts back 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>’;

endwhile;

endif;

wp_reset_query();

return $return_string;

}

This queries the database to bring the latest post and give us a string with a link to that post.

Register the Shortcode

We need to tell WordPress that this shortcode is a function:

function register_shortcodes(){

add_shortcode(‘recent-posts’, ‘recent_posts_function’);

}

If the shortcode of [recent-posts] is found within the content of a post, then the function attached to it is called up. This name has to be original or it will cause conflict.

Add into WordPress

In order for our function to work, it needs to be tied into WordPress’s initialisation action:

add_action( 'init', 'register_shortcodes');

Testing, Testing

The proof is in the pudding, so to test the function, you need to create a new post and add the shortcode to it. Put:

[recent-posts]

…into the content, publish it and view it in the browser. It should bring up a link to the most recent posts on your blog. Voila!

Advanced Shortcode

To get to more advanced shortcode, such as showing a certain number of recent posts, we need to add an extra option to the code.

Two functions are used. The first is the shortcode_atts() function that is built into WordPress. The second is the extract() PHP function which extracts shortcode attributes.

We need to extend the callback function, adding a number of attributes which allow us to extend the parameter to include the number of posts. Then we add the number to query the database into returning the number of posts we want to include.

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;

}

This allows you to show a number of posts, with one being the default if an option isn’t chosen, or more if specified.

[recent-posts posts="5"]

This would show five of your latest posts.

WordPress has some more Shortcodes for you to explore.

 

 

 

 

 

 

 

 

 

 

Author Owen Radford

More posts by Owen Radford