Shortcode in WordPress are text macros which are used in content area of a Page or Post and May be Widgets. Shortcodes are created by using a collections of functions. You will learn about shortcode and How to create a custom shortcode as you proceed.
What is a Shortcode?
Shortcode are text macros or shorthand tags, which can be used in post or pages to display some codes or some custom texts.
syntax :
|
0
1
2
|
[myshortcode]
|
Shortcode can be of two types: Self closing and enclosing. Shortcodes can have attributes too.
Self closing: [myshortcode]
Enclosing: [myshortcode] Some text [/myshortcode]
With Attributes: [myshortcode att1="name" att2="phone"]
Build in Shortcodes in WordPress :
There are some build in Shortcodes which are using to display gallery, audio. video etc.
Creating a custom Shortcode
There are two component of a simple shortcode a shortcode tag and a callback function as shown below.
a. Create a simple self-closing Shortcode.
|
0
1
2
3
4
5
6
|
//[myshortcode]
function myshortcode_func( $atts ){
return “My First Shortcode!”;
}
add_shortcode( ‘myshortcode’, ‘myshortcode_func’ );
|
Here myshortcode is shortcode tag and myshortcode_func() is callback function. This code block may either be included in active theme functions.php file or as a standalone plugin.
b. Create a self-enclosing Shortcode with attributes.
|
0
1
2
3
4
5
6
7
8
9
10
11
|
//[myshortcode]
function myshortcode_func( $atts ) {
$var = shortcode_atts( array(
‘f_name’ => ‘Gyan’,
‘l_name’ => ‘Giri’,
), $atts );
return “Full Name: {$var[‘f_name’]} {$var[‘f_name’]}”;
}
add_shortcode( ‘myshortcode’, ‘myshortcode_func’ );
|
Here myshortcode is shortcode tag and myshortcode_func() is callback function. This Shortcode support attributes to display full name. This code block may either be included in active theme functions.php file or as a standalone plugin.
If no attributes will be used, the shortcode will display default values set in f_name and l_name.
[myshortcode] will output: Full Name: Gyan Giri .
[myshortcode f_name="Sanjay" l_name="Kumar"] will output: Full Name: Sanjay Kumar.
c. Create a enclosing Shortcode.
|
0
1
2
3
4
5
6
|
// [myshortcode] Any Text [/myshortcode]
function myshortcode_func( $atts, $content = null ) {
return ‘<span class=”title”>’ . $content . ‘</span>’;
}
add_shortcode( ‘myshortcode’, ‘myshortcode_func’ );
|
Here myshortcode is shortcode tag and myshortcode_func() is callback function. This code block may either be included in active theme functions.php file or as a standalone plugin.
This Shortcode will wrap a span will class title to any content enclosed within the Shortcode.
Output:
[myshortcode] Hello John [/myshortcode] will output the text with span wrapped in text.
|
0
1
2
|
<span class=“title”> Hello John</span>
|
d. Create a enclosing Shortcode with attributes.
A enclosing shortcode can also have attributes.
|
0
1
2
3
4
5
6
7
8
9
10
|
// [myshortcode classname=”title” ] Any Text [/myshortcode]
function myshortcode_func( $atts, $content = null ) {
$a = shortcode_atts( array(
‘classname’ => ‘title’,
), $atts );
return ‘<span class=”‘.esc_attr($a[‘classname’]).‘”>’ . $content . ‘</span>’;
}
add_shortcode( ‘myshortcode’, ‘myshortcode_func’ );
|
Here myshortcode is shortcode tag and myshortcode_func() is callback function. This code block may either be included in active theme functions.php file or as a standalone plugin.
This enclosing shortcode will have option to modify class name as well as display text too.
Output:
[myshortcode classname="heading" ] Post title [/myshortcode] will output.
|
0
1
2
|
<span class=“heading”> Post title </span>
|
Troubleshooting:
Add following code to functions.php or plugin file you are developing to enable the shortcode to Text Widgets.
|
0
1
2
3
|
add_filter( ‘widget_text’, ‘shortcode_unautop’ );
add_filter( ‘widget_text’, ‘do_shortcode’ );
|
shortcode are a great functionality, When used wisely It will do Wonders.
