What is a Shortcode?

When using WordPress and specifically when using certain plugins, you may have come across a WordPress Shortcode. You place a shortcode which looks like [this] anywhere in a Page or a Post in your WordPress website and it displays some functionality.

[I-Am-A-Shortcode]

A Good example is the contact form 7 plugin if you have ever used this. You create a contact form then the plugin provides you with a shortcode. It will display the contact form wherever you place the shortcode.

How To Create Your Own Shortcode

Creating a WordPress Shortcode can be done by creating your very own simple WordPress plugin. Today I am going to show you just how simple it can be. Easily extend your website by implementing your own WordPress Shortcode and adding it to your website.

We will do this in a few simple steps, so grab a coffee, sit back and lets get to work! Because we are about to code your first WordPress shortcode plugin.

Step 1 – Create the WordPress Plugin

You will need FTP (file transfer protocol) access to your website files on your server. Alternatively you can do this on a localhost website you have using Amp/Wamp which I won’t go into in this tutorial, but I will in a future lesson.

So assuming you have access to your WordPress Website files, lets continue:

  1. Locate your Plugins directory. This can be found in the WP-Content Folder like so: wp-content/plugins
  2. Create a new folder inside the plugins folder. Make sure you name the folder the name of your plugin like so: wp-content/plugins/myshortcodeplugin
  3. Now we have to create the main plugin file which is a PHP File. Inside your new plugin folder that you have just created, make a new file and name it the same as your plugin like so: wp-content/plugins/myshortcodeplugin/myshortcodeplugin.php
  4. Now open up your new plugin PHP file in a text editor. If you are doing this on a live server, you may have to download your plugin php file to your computer first. Once you have your new plugin PHP File, open it up in your favourite text editor.
  5. Now we are going to add the code that will tell WordPress that this is a Plugin and should be treated so. Add the following code to your plugin PHP File:
/*
Plugin Name: MY Shortcode Plugin
Plugin URI: http://yourwebsite.url
Description: Description of your new Plugin Functionality goes here
Version: 1.0.0
Author: Your Name goes here
Author URI: http://yourwebsite.url
License: GPL2
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: myshortcodeplugin
*/
// todo: your new plugin code goes here...

Now if you look in your WordPress Admin and in the Plugins page you should see your new plugin listed there with all the other plugins. You can Activate it but it won’t do much yet. This is Because we need to add out WordPress Shortcode function. So lets move on and make your awesome new plugin do something!

Step 2 – Add Shortcode Function

The first thing we do is create the function that will be called when the page loads. We will get our function to return some HTML code wherever we have placed our WordPress shortcode on the page. The shortcode will be replaced automatically by our HTML in our function.

To create the function add this below the todo comment in your new plugin PHP file myshortcodeplugin.php.

function my_shortcode_function() {
return "Say Hello To My Little Friend";
}

This won’t do anything on it’s own, what we have to do now is register the Shortcode and tell that to call this new function we have just created. To do that we call a special WordPress function called, Add Shortcode. So underneath your new function, add the following code:

add_shortcode('my_shortcode', 'my_shortcode_function');

As you will see we have put the first parameter of this function to be ‘my_shortcode

This is declaring what our WordPress shortcode will be when we add it to a page or a post, so because we have wrote ‘my_shortcode‘ this means when we want to call this function from our page or post we would have to add [my_shortcode] to return the HTML we have added in the function.

The second parameter of this add_shortcode function is the function we want to call. Here we use our earlier created function ‘my_shortcode_function‘. This will result in our shortcode function using our custom function when it is called.

Step 3 – Activate Plugin

Save your PHP File and upload it back to your server back into the plugin’s folder. then in your WordPress Admin under the Plugins section, find your plugin and hit Activate.

Your plugin is now active and ready for implementation in any post or page.

Step 4 – Add The Shortcode

Now to render the HTML code in our function which is Say Hello To My Little Friend we have to add our shortcode to a Page or Post in our site.

Simply Add [my_shortcode]  to a page or post on your website, hit save and view the page/post from the front end and you will see the function has been called and it has returned the HTML:

Say Hello To My Little Friend

Awesome work! You have created your first Shortcode Plugin! Well Done!

Step 5 – What Next?

This is a basic example of how to return some HTML Code and print it out on the screen.

You can also extend the functionality by using the many WordPress built in functions. Simply using your shortcode function to call other functions to do certain things.

If you are feeling brave you can also write your own custom PHP functions. Get your functions returning custom data to the screen. I would love to see what you come up with so get in touch and show me what you can do!

If you enjoyed this Tutorial, please comment below your thoughts. Feel free to share the post so others can benefit too.

Thanks for reading.

Complete Code

/*
Plugin Name: MY Shortcode Plugin
Plugin URI: http://yourwebsite.url
Description: Description of your new Plugin Functionality goes here
Version: 1.0.0
Author: Your Name goes here
Author URI: http://yourwebsite.url
License: GPL2
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: myshortcodeplugin
*/
// todo: your new plugin code goes here...

function my_shortcode_function() {
return "Say Hello To My Little Friend";
}

// register: register your shortcode function [my_shortcode]
add_shortcode('my_shortcode', 'my_shortcode_function');

 

Brian Revie

Brian Revie

A UK Based Web Developer who solves problems for the Business Community

Leave a Reply