How to Create Custom Shortcode for WordPress

shotcode

Now that you understand how a shortcode works, let's find out how to add one to your theme or plugin! Of course, what your shortcode does, it will be up to you. In this example, we started a simple "Hello World!" Will use the function.

1. Write the Shortcode Function

First of all, you want to open a new file in a text editor. Next, type a function with a unique name, which will execute the code that is similar to the shortcode to trigger you:

function torque_hello_world_shortcode() {
   return 'Hello world!';
}

If we normally use this function, then it will return Hello World! As a string that can output to HTML. This function can also take custom parameters. For example, if you want someone to call it Hello Bob! Instead, you can add a name parameter. These parameters are called attributes, and they are all controlled by WordPress using the predefined single array as $ atts.

Here's an example of how to use shortcode $ ATS function to properly handle shortcode attributes in WordPress. You can learn more about how this works for your needs in the WordPress codecs:

function torque_hello_world_shortcode( $atts ) {
   $a = shortcode_atts( array(
      'name' => 'world'
   ), $atts );
   return 'Hello ' . $a['name'] . !';
}

This name defaults to the world if no other name is available. If a name is provided, then the function will give output instead. This is an example of how it will be executed with a shortcode:

[helloworld]
// Outputs "Hello world!"
 
[helloworld name="Bob"]
// Outputs "Hello Bob!"

Once you have finished, it can be used in any text-based areas on a WordPress site where the plugin or theme in which this shortcode is installed.

2. Save the file and add it to your project

Once your shortcode is ready to use, you can create a new file within your custom theme or plugin to save the function. A descriptive name will help you find this file later (for example: short-function-hello-world.php).

Now, it's time to tell about the rest of your project about this new file. If you are working with a topic, then you want to include it in the function. If you are building a plugin, you can include it in any file already loaded in the project.

Here's an example of how you would load the file into themes using get_stylesheet_directory (). Be sure to edit the path of your file to match the folder structure within your subject:

include( get_stylesheet_directory() . 'path/to/shortcode-function-hello-world.php' );

On the other hand, this is what is loading the file into a plugin, using plugin_dir_url (). Then, edit the path of your file to match the folder structure of your plugin:

Include (plugin_dir_url (__FILE__). 'Path / to / shortcode-function-hello-world.php');

At this point, your function is now available for use! All this is left actively to register the shortcode within WordPress.

3. Register Shortcode

The last step for register your new shortcode with the Shortcode API. It is done with the add_shortcode function. There are two logic for this:

  • The shortcode tags used within the text editor
  • The name of the function name the execution of the shortcode

Add this line of code below your shortcode function, and update it to match your own values:

add_shortcode ('helloworld', 'torque_hello_world_shortcode');

The first value will be within the square bracket in the text editor. The second will match the function name you wrote in the previous two steps in the file. Both should be unique so that they do not interfere with other shortcodes included by WordPress core, themes or plugins.

Once you finish, then it is left that it is left to be tested. Log in to WordPress Admin and try adding your shortcode in a post:

shotcode

that's all there is to it! Your shortcode can be as complicated or as simple as you want - whatever you decide to make using this power is up to you! For advanced situations where you want to tweak the output for different situations, it may be worth writing a unique PHP class to handle your new shortcode.

Comments