How to add and create wordpress shortcode

Table of Contents

  • Overview of WordPress Shortcodes
  • Types of WordPress Shortcodes
  • Six Default WordPress Shortcodes
  • Create the Custom WordPress shortcode
  • Add the shortcode in the Editor or Files

Overview of WordPress Shortcodes

A shortcode is a unique WordPress tag that you may add to a post, page, or widget to show dynamic material or carry out a particular task. Square brackets, like [shortcode], are used to enclose shortcodes. When WordPress comes across a shortcode in the content, it replaces it with the output produced by the relevant PHP function or code.

You may put anything with a shortcode, from basic text to sophisticated features like gallery display, video embedding, and custom query execution. They give you a quick and easy way to incorporate dynamic material into your WordPress posts and pages without having to manually code HTML or PHP.

Types of WordPress Shortcodes:

There are two types of WordPress Shortcodes:

1. Self-enclosed exp: [user_detail], [subscribe link=”www.youtube.com/xyz”]

2. Enclosed exp: [subscribe link=”www.youtube.com/xyz”]Youtube[/subscribe]

Six Default WordPress Shortcodes

1. [gallery] – shows a gallery of pictures that are linked to a page or post.
2. [audio] – Embeds an audio file to a page or post.
3. [video] – Embeds a video file to a page or post.
4. [caption] – Adds a caption to an image or video.
5. [embed] – Embeds media from various sources like social media.
6. [playlist] – Creates a playlist of audio or video files.

Example:

1. [gallery] = [gallery], [gallery id=”32″]
2. [audio] = [audio src=”#”]
3. [video] = [video src=”#”]
4. [caption] = [caption id=”123″ align=”aligncenter” width=”300″]This is the caption text[/caption]
5. [embed] = [embed width=”500″ height=”400″]https://www.youtube.com/watch?v=your-video-id[/embed]
6. [playlist] = [playlist ids=”123,456,789″]

Note: Do not directly Create a shortcode in the theme file. Use a code snippet plugin or create a child theme and create a shortcode in child theme functions.php otherwise, if you create a shortcode in your main theme file your code is removed after updating the theme.

Two ways to Create a shortcode, through the plugin and custom code.

Now I create through the custom code. If you create through the plugin check this: How to add and create WordPress shortcode with the plugin.

Create the Custom WordPress shortcode

<?php

 add_action('init', 'user_detail_shortcode');

 function user_detail_shortcode(){
   add_shortcode('user_detail', 'user_detail_func');
 }
 
 function user_detail_func($atts){
   $atts = shortcode_atts([
      'name' => 'jaun',
      'age' => '19'
   ], $atts, 'user_detail');

   $data = "<div><p>My name is ".$atts['name']." and age is ".$atts['age']." years.</p></div>";

   return $data;
 }

?>

init hook Fires after WordPress has finished loading

Create WordPress Shortcode In Code Snippet plugin

Create WordPress Shortcode In Theme functions.php file

Add the shortcode in the Editor or Files

OR HTML widget can also be used

OR Add a shortcode in the file where you want to show.

<?php echo do_shortcode("[user_detail name='Basit' age='22']"); ?>

1 thought on “How to add and create wordpress shortcode”

Leave a Comment

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