How to Create Shortcode for Plugin in WordPress

Shortcodes in WordPress help users easily add new features to their websites without coding.

They are very useful for users who do not have coding knowledge.

If you want to be a professional WordPress developer, you should know how to create a shortcode for plugins or themes.

In this post, we will quickly and easily share the simplest way to create a shortcode in a WordPress custom plugin.

This is a good place to start for new WordPress developers who want to quickly learn how shortcodes work ‘behind the scenes’.

If you are completely new to shortcodes and want to see an example, check out – how to use WordPress shortcodes in pages or posts.

Enough of the intro let us find out how you can create a shortcode in WordPress plugin.

Creating a Shortcode in WordPress Plugin

The first step is to create the plugin folder inside the wp-content/plugins folder.

After creating the plugin folder open it and create a file with the main plugin file and add the plugin header code:

<?php
/**
 * Plugin Name: Simple Shortcode Example
 * Plugin URI:  https://example.com/plugin-name
 * Description: Description of the plugin.
 * Version:     1.0.0
 * Author:      Your Name
 * Author URI:  https://example.com
 * Text Domain: plugin-name
 * License:     GPL-2.0+
 * License URI: http://www.gnu.org/licenses/gpl-2.0.txt
 */

Make sure you replace this code with your own values and save the code then visit your plugin page from the dashboard to see if the plugin is visible.

 

Up to this point, we have just created an empty shell for the plugin and now we can begin adding the code that will create the shortcode.

You can begin by activating the plugin to see if it works well.

Creating a Shortcode in Custom WordPress Plugin

Creating a shortcode in the WordPress plugin is a simple process that involves the use of the add_shortcode() function that takes two parameters; the shortcode tag and the shortcode callback function.

The shortcode tag is the name of the shortcode that you will use when publishing while the shortcode function is the feature we need to implement with the shortcode.

The following is an example of the add_shortcode hook in use:

add_shortcode( ‘the_shortcode_tag’ , ‘shortcode_callback_function’);

To make it easier to understand how all this works; let us use an example of a shortcode that prints a contact form on a page or post just like the Contact Form 7 plugin does.

Example: How to Create a Shortcode in WordPress Plugin

For our example, the tag will be ‘njengah_contact_form ‘and the callback function will be ‘render_njengah_contact_form’.

Shortcode Action Hook

For this example the add_shortcode hook code will be as follows:

add_shortcode( ‘njengah_contact_form, ‘render_njengah_contact_form’);

Shortcode Callback Function

The shortcode callback function will have the form markup and it will be as follows:

function render_njengah_contact_form(){ ?>
<form>
  First name:<br>
  <input type="text" name="firstname" value="Joe ">
  <br>
  Last name:<br>
  <input type="text" name="lastname" value="Njenga">
  <br><br>
  <input type="submit" value="Send">
</form>

<?php}

This is a basic form that will be added to the post or pages using the shortcode [njengah_contact_form].

Now add the complete code to your main plugin file and save then we now test this shortcode to see if it is working. The combined code should be as follows:

add_shortcode('njengah_contact_form' , 'render_njengah_contact_form');

function render_njengah_contact_form(){ ?>
<form>
First name:<br>
<input type="text" name="firstname" value="Joe ">
<br>
Last name:<br>
<input type="text" name="lastname" value="Njenga">
<br>
<input type="submit" value="Send">
</form>
<?php

}

After adding the code, save and activate the plugin. Open a page and add the shortcode as shown below then publish the page and visit the front to see if the form is displayed.

Conclusion

This tutorial should help guide you in creating your first shortcode in the WordPress plugin. If you have successfully followed all these steps, you should see the contact form displayed by the shortcode as shown below:

I hope you find this simple shortcode tutorial useful and you have finally created your first WordPress shortcode.

Similar Articles