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.
In the example, I am creating Shortcodes in the WordPress theme.
Contents
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]
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("https://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]
Output
It will generate the 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 wants to use it on any other theme without copy-pasting the same code from one to another.
Steps –
- Create a new
custom_shortcode.php
filewp-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 themefunctions.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. Using in PHP file
To call shortcode in a PHP file using do_shortcode()
function.
do_shortcode('[shortcode-name]');
Pass the shortcode name in the do_shortcode()
function within []
.
Example –
do_shortcode('[sharepost]');
6. Conclusion
It is not necessary to define shortcodes in the theme functions.php
file. You can create a new PHP file and add your shortcodes and use it.
You can also follow the above steps for plugin shortcodes creation.
With shortcode, you can do simple or complex operations like – database manipulation, process data.
I recommend you to create a separate file in wp-content
if you change the theme on a regular basis.