How to Create custom Shortcode in WordPress

In WordPress, Shortcode is special tags which specified within the [] brackets and use on the page, post, and widget.

The code is replaced with some other content when previewing the page.

It can also take parameters.

Shortcode is flexible and allows you to place it wherever you want.

In this tutorial, I will show how you can simply create Shortcode with or without parameters and use in WordPress.

How to Create custom Shortcode in WordPress


Contents

  1. Create Shortcode
  2. Add Shortcode
  3. Add Parameters
  4. With Separate File
  5. Conclusion

 

1. Create Shortcode

  • Open your currently active theme functions.php file.
  • Create a new function messageText_shortcode where process the data and return response. I am returning a simple text response.
  • Now call add_shortcode hook where pass the name of the shortcode and above-created function.

NOTE – The passed shortcode-name is use to access the Shortcode in the page,post, and widget.

Syntax –

add_shortcode('shortcode-name','function');

Completed Code

function messageText_shortcode(){
   return "Welcome to makitweb.com";
}

add_shortcode('messageText', 'messageText_shortcode');

 

2. Add Shortcode

  • Open a page or a post where you want to use the shortcode.
  • Pass the name of shortcode within [] bracket.

Syntax –

[ shortcode-name ]
  • Use the above-created shortCode.
[messageText]

How to Create custom ShortCode in WordPress

Output

It will generate the following output –

Welcome to makitweb.com

 

3. Add Parameters

Define function

  • Open active theme functions.php file.
  • Create a new function sharePost_shortcode which takes a single parameter.
  • Extract the $atts Array to read values.
  • Directly access the value by the Array key name $share.
  • If the parameter is not defined [sharePost] then the default value is been used.
function sharePost_shortcode($atts){
  extract(shortcode_atts(array(
    'share' => 0
  ), $atts));

  $title = "How to Create custom Shortcode in WordPress";
  $link = urlencode("http://makitweb.com/how-to-create-custom-shortcode-in-wordpress/");

  $twitterURL = 'https://twitter.com/intent/tweet?text='.$title.'&url='.$link.'&via=yssyogesh_singh';
  $facebookURL = 'https://www.facebook.com/sharer/sharer.php?u='.$link;

  $message = "I hope you find this tutorial helpful.";

  if($share){
    $message .= "<br>Share it on <a href='".$twitterURL."' target='_blank'>Twitter</a>, <a href='".$facebookURL."' target='_blank'>Facebook</a>";
  }
  return $message;
}

add_shortcode('sharePost', 'sharePost_shortcode');

Add ShortCode

  • Pass the parameters with the shortcode-name in []. Split the parameters by space if they are more than one.

Syntax – 

[ shortcode-name parameter1=value1 paramter2=value2 ... ]
  • Use the shortcode where pass the share=1.
[sharePost share=1]

How to Create custom ShortCode in WordPress

Output

It will generate following output when previewing it.

I hope you find this tutorial helpful.
Share it on Twitter, Facebook

 

4. With Separate File

Create a new .php file in the wp-content directory and include in the theme functions.php file to avoid the created shortcode data from remove on the theme upgrade or you want to use it on any other theme without copy-pasting the same code from one to another.

Steps –

  • Create a new custom_shortcode.php file wp-content/ directory.
  • Add functions and hook with add_shortcode.
<?php

function messageText_shortcode(){
  return "Welcome to makitweb.com";
}
add_shortcode('messageText', 'messageText_shortcode');
  • Include the wp-content/custom_shortcode.php file in the active theme functions.php file.
include WP_CONTENT_DIR."/custom_shortcode.php";
  • Open a page or post where you want to add and use [] to define.
[messageText]

 

5. Conclusion

By using above specified ways you can create your own shortcode.

You can do simple or complex operation within shortcode like – database manipulation, process data.

I recommend you to create a separate file in wp-content if you change the theme on regular basis or upgrade it.

If you find this tutorial helpful then don’t forget to share.

Related Post

Spread the love
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Be First to Comment

Leave a Reply

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