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: Saturday 29th November 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

*


+ nine = 17

Our Key Services
Menu