Learn How To Create Shortcodes in WordPress Plugin With Examples

The Most Popular WordPress Themes

For the beginners, creating shortcode is sometimes not easy. But, WordPress makes it pretty simple to create your own shortcode by using WordPress shortcode function.

There are two popular shortcode plugins.

Therefore, in this tutorial, I am going to explain you how easily you can create your own shortcode using 3 simple examples. You will learn how to create a WordPress shortcode plugin.

Example 1 - I am going to create a WordPress plugin to display form on any page or post of the website.

Example 2 - I am going to create a WordPress plugin to display text on any page or post of the website.

Example 3 - I am going to create a WordPress plugin that helps to share pages or posts on Twitter.

Watch Video Here

Note: I have created a shortcode folder under the plugin folder of my WordPress where I have created a file named shortcode.php.

WordPress ShortCode Example 1 - Display Form On Pages/Posts

You can create shortcode to display form on any page or post of the website. The below code includes-

  • Plugin details
  • form_creation() to create a form which includes form fields.
  • add_shortcode() function which contain shortcode name test and calling of form_creation() function as parameters.

[php]
<?php
/*
* Plugin Name: WordPress ShortCode
* Description: Create your WordPress shortcode.
* Version: 1.0
* Author: InkThemes
* Author URI: https://www.inkthemes.com
*/

// Example 1 : WP Shortcode to display form on any page or post.
function form_creation(){
?>
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname"><br>
Message: <textarea name="message"> Enter text here...</textarea>
</form>]
<?php
}
add_shortcode('test', 'form_creation');
?>[/php]

Output

You need to place WordPress shortcode within square brackets in order to represent it on any page or post of the website. As you can see in the below image, code word test enclosed within square brackets.


Apply shortcode


This is how the form page appears on the front end.


Form appears by shortcode


WordPress Shortcode Example 2 - Display Text On Pages/Posts

You can create shortcode to display text on any page or post of the website. The below code includes-

  • Plugin details
  • wp_first_shortcode() contain the text that you want to display in front end.
  • add_shortcode() function contain shortcode name first and calling of wp_first_shortcode() function as parameters.

[php]

<?php
/*
* Plugin Name: WordPress ShortCode
* Description: Create your WordPress shortcode.
* Version: 1.0
* Author: InkThemes
* Author URI: https://www.inkthemes.com
*/

// Example 2 : WP Shortcode to display text on page or post.
function wp_first_shortcode(){
echo "Hello, This is your another shortcode!";
}
add_shortcode('first', 'wp_first_shortcode');

?>

[/php]

Output

You can insert a shortcode with code word first enclosed with square brackets.


Develop shortcode


This is how the text display in the post on front end.


Text shortcode


WordPress Shortcode Example 3 - Share Pages/Posts On Twitter

You can create shortcode to share your pages or posts on Twitter. The below code includes-

  • Plugin details
  • ink_wp_shortcode() get the particular post or page that you want to share on Twitter.
  • add_shortcode() function contain shortcode name twitter and calling of ink_wp_shortcode() function as parameters.

[php]

<?php
/*
* Plugin Name: WordPress ShortCode
* Description: Create your WordPress shortcode.
* Version: 1.0
* Author: InkThemes
* Author URI: https://www.inkthemes.com
*/

// Example 3 : WP Shortcode to share post or page on Twitter.
function ink_wp_shortcode($atts, $content=null)
{
$post_url = get_permalink($post->ID);
$post_title = get_the_title($post->ID);
$tweet = '<a style="color:blue; font-size: 20px;" href="http://twitter.com/home/?status=Read' . $post_title . 'at' . $post_url . '">
<b>Share on Twitter </b></a>';
return $tweet;
}
add_shortcode('twitter', 'ink_wp_shortcode');
?>

[/php]

Output

You can see in the below image, shortcode twitter is placed at the end of the post.


Twitter shortcode


You can directly share the pages or posts on Twitter by click on the text Share on Twitter.


Output of twitter shortcode


Conclusion

I hope this tutorial is helpful to you and make you understand the concept that you need to use while creating a WordPress shortcode for your own purpose. You can create as many as shortcode you want and use it wherever you want.

Moreover, you can also watch the video tutorial for this post, just check it out.

Please do share your thoughts about the post and how much you find it useful to you.

You might also be interested in:

8 Replies to “Learn How To Create Shortcodes in WordPress Plugin With Examples”

  1. Hi,

    Great tut, clear, simple and straight to the point.

    Although is worth mentioning that when inserting some custom text, is better to store the string in a variable and then use return instead of echo. This because if you use the shortcode anywhere inside the post content, the text will always be rendered before the content. Thus using return, the text will be inserted exactly where the shortcode is placed.

    function wp_first_shortcode(){
    $my_string = “Hello, This is your another shortcode!”;
    return $my_string
    }
    add_shortcode(‘first’, ‘wp_first_shortcode’);

  2. Hello Malika ! this wa sreally eductive for a person trying to cretae his/her first shortcode for wordpress.I was really helpful and would love to get similar videos on topics which we come across everday while working as a developer.I started as a junior wordpress developer and will look forward for ur help ….Thanks a lot.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.