How To Create Shortcode In Wordpress

10 December 2022, 19:29
Wordpress

Hello Guys,
I hope you all are well. Today we will learn about WordPress shortcodes. Shortcodes are a very important part of WordPress. ShortCodes help us to create a tiny code for your content.
I will create 3 shortcodes in our example.
Let's start.

What is shortcode

Shortcodes were introduced in WordPress version 2.5. They have been introduced for creating macros to be used in a post's content.

Creating a self-closing shortcode

Self Closing tags are mostly used shortcodes. Let's create a simple youtube video iframe with a self-closing shortcode.
For this, We will code in the functions.php file which is located in the /wp-content/themes/your-theme/. If functions.php is missing there then create a file yourself.
You can just copy and post this code in the functions.php file.

function iframe_shortcode() {
    return

    "<iframe width='560' height='315' src='https://www.youtube.com/embed/h55GHGgOBXY' title='YouTube video player' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>";
}
add_shortcode('youtube-iframe', 'iframe_shortcode');

Usage:

[youtube-iframe]

You can use this in your post from the admin panel.

Output :

self-closing shortcode with parameters

Now, We will create a self-closing shortcode with the parameters. If we need a dynamic iframe then we need to pass the dynamic values from the shortcode. I will use URL as the dynamic value. So we can create the dynamic youtube value from the iframe.
Write the below code in your functions.php file.

function iframe_param_shortcode($attrs) {

    extract(shortcode_atts(array(
        'url' => 'https://www.youtube.com/embed/h55GHGgOBXY'
    ), $attrs));
    return "<iframe width='560' height='315' src='" . $url."' title='YouTube video player' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>";
}
add_shortcode('youtube-iframe-with-param', 'iframe_param_shortcode');

In this function, we need to pass the URL attr in the shortcode. If we don't pass the URL attribute then it will use the default URL provided in the function.
Usages:

[youtube-iframe-with-param url="https://www.youtube.com/embed/D2B55TQ0mFE"]

Output :

An enclosing shortcode

The enclosing shortcode allows you to embed content within your shortcode, just like GallaryShortCode if you’ve ever used that. For this, We need to write the below code in the function.php

function enclosing_iframe_shortcode($attrs, $content = null ) {
    extract(shortcode_atts(array(
        'url' => 'https://www.youtube.com/embed/h55GHGgOBXY'
    ), $attrs));

    if ($content != null) {
        $heading = "<h1>" . $content . "</h1>";
    } else {
       $heading = ''; 
    }

    return "$heading" . " <iframe width='560' height='315' src='" . $url."' title='YouTube video player' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>";
}
add_shortcode('enclosing-youtube-iframe', 'enclosing_iframe_shortcode');

Enclosing functions are used as the HTML closing tags. we need to close the shortcode to use the content. You can also use the attribute in enclosing shortcode.
Usage:

[enclosing-youtube-iframe] Welcome to TemplateBench [/enclosing-youtube-iframe]

Output:

Conclusion

After this tutorial, I hope you all know what is shortcode and how to create a shortcode in WordPress. You can create any type of shortcode with the help of this tutorial.
If This post is helpful to you. Please share this post with your team and friends.

Thanks

Tagged in : wordpress shortcuts shortcode