You are here: Home / Blog / Web Design Tutorials: Create a WordPress shortcode plugin

Web Design Tutorials: Create a WordPress shortcode plugin

One of the more useful features of the WordPress post editor is the ability to use shortcodes.

Introduced in WordPress 2.5, the shortcode API is a simple set of functinos for creating macro codes for use in post content which allow writers to drop content such as forms or galleries into their post/page without needing to know any of the working behind it.

This following tutorial will show you how to set up your own shortcode for use in a post.


Step 1 – The Outline

The first step for setting up our shortcode is to create a new plugin for WordPress.

Create a new PHP file in your preferred editor.

On line one of the empty file add the following code:

<?php
/**
 * Plugin Name: My Shortcode Plugin
 * Plugin URI:
 * Description: Your Description Here
 * Author: Hit Reach
 * Version: 1.0.0
 * Author URI: http://www.hitreach.co.uk insert your domain
 **/

##hook

##function
?>

This will give the basic outline for the php plugin file.

Step 2 – Setting Up The Shortcode

The next essential part is too create a new hook for your shortcode tag.

This is done though the add_shortcode() function in the WordPress Api.

The add shortcode function accepts 2 parameters:

  • The first argument is the tag, which is a sting, this tag is used between the square brackets in the post, e.g [shortcode]
  • The second argument is the function to call, this is a callable function, entered as a string, so if your function was called “parse_shortcode()”, you would enter “parse_shortcode”

For this tutorial we are going to use “sc” as the tag and “sc_parse” as the function, so, in place of the “##hook” from step one, add the following:

add_shortcode("sc","sc_parse");

Step 3 – The function

The final part for our plugin the function that is called when the shortcode is mentioned in the post.

For this shortcode we are going to output the current server data using the php data function :

date("l jS F Y")

This will format the date like: Tuesday 2nd September 2014

So, in place of “##function” in the code from step 1 we are going to add the following:

function sc_parse(){
  return date("l jS F Y");
}

Now the people with keen eyes will realise I returned the date rather than using print or echo, this is because if it is printed/echoed the output will jump to the top of the post content rather than in its correct position.

Final Step

The final step is to save your new plugin and upload it to the WordPress plugins folder, either via ftp or zipping the file and using the WordPress plugin uploader.

Once uploaded, activate your plugin then go to a new post and add your shortcode then preview to see the results.

 

How did you get on creating your plugin?

Comments

  1. Thanks for step by step description.

  2. Thanks for needed tut.

  3. Finally found good info about shortcodes, i’m new to wp and this will help me a lot, thanks for sharing this tutorial!

  4. Google long to find this. Thanks a lot!

Add Comment Register



Leave a comment

*


seven − 6 =

What Our Clients Say

James AgateJames Agate
Managing Director
Skyrocket SEO

Chris and his team are patient, responsive and have a sense of humour even when I asked them to change something that I'd insisted upon initially. Would definitely recommend to anyone looking for an awesome WordPress development and design team.

Richard SedleyRichard Sedley
Director
Seren

Hit Reach were really easy to deal with and provide exemplary service. They implemented exactly what we wanted and guided us when we were uncertain about the solution. A highly professional and cost effective solution – what's not to love.

Roger GreenRoger Green
Director
Best4tyres.com

Hit Reach got it absolutely right. They embraced the challenge and complexity of the site, and exceeded expectation with quick response times and great service.

Our Key Services
Menu