How to create shortcode in WordPress | Step-by-step Method

shortcode written in brackets like [shortcode_name_here] is a shortcut way to call and run a predefined function in your site. They are exactly like a function which help perform the same task on multiple locations without writing the same code again and again. The step-by-step tutorial explains the procedure of how to create shortcode in WordPress.

What is a [shortcode]? what are shortcodes in WordPress?

[shortcode_name_here]

WordPress introduced shortcodes in version 2.5. The main reason behind implementing this functionality is to give the power to its users to execute the same code inside WordPress posts, pages, and widgets without writing the same code again and again directly on the page.

You can consider a shortcode as a reusable object which can be executed throughout the site. It also takes parameters, separated by space.

[shortcode_name parameter1="parameter1_value" parameter2="parameter2_value" ]

Step-by-step method of how to create shortcode in wordpress?

You can convert any function which returns an output into a shortcode. WordPress has built in function to create a shortcode which is called “add_shortcode“. You can read more about this function here. A shortcode function has four parts as shown below:

//Function name
function shortcode_output_function(){

  //Put your code here
  $output = "Hello";

  //Return the output to front end
  return $output;
}

//define custom function as shortcode and give it a name
//add_shortcode ( 'shortcode_name', 'function_to_call');

add_shortcode( 'user_iframe', 'shortcode_output_function' );
  1. shortcode_output_function() contains all the code to produce the output for shortcode
  2. $output holds the result which will be printed on the front-end. You can use any other name as well.
  3. return $output; sends the result to the front-end
  4. user_iframe is the name of the shortcode to be used in the backend on post, pages, widgets, etc with square brackets i.e. [user_iframe]

Where to add shortcode in wordpress

WordPress custom shortcodes can be placed in the end of your active theme’s functions.php file.


Also check how to create custom header in wordpress


Where to find functions.php in wordpress?

Go to your WordPress site’s root directory which is mostly the “public_html” and from there you can find the functions.php file at the following path:

public_html/wp-content/themes/active-theme-name/functions.php

For example you can find the functions.php in Divi or GeneratePress theme at the following paths:

public_html/wp-content/themes/Divi/functions.php
public_html/wp-content/themes/generatepress/functions.php

How to edit functions.php in wordpress?

Functions.php is the most important file of a theme and 99% of the WordPress themes have to follow the same file structure. Therefore functions.php file can be found in the same location and path in all the themes.

If there is any bad code in this file then your site’s both frontend and backend won’t work. There is only one way to fix this which is by removing the bad code from it and that is only possible if you have access to the file system. The following procedure explains how to access the functions.php file of GeneratePress theme in hostinger cPanel.

Step 1: Login to hostinger cPanel and look for File Manager.

how to create shortcode in wordpress via cPanel

Step 2: Then open the public_html folder in it.

public html folder in hostinger cpanel

Step 3: Now open the wp-content folder.

Step 4: Now open the themes folder.

themes folder in hostinger cpanel.jpeg

Step 5: Now open the active theme folder which is generatepress in my case.

active theme folder in hostinger cpanel

Step 6: Here you will see the functions.php file along with lots of other files.

functions dot php file in active theme folder hostinger cpanel

Step 7: Now there are two ways to edit a php file in most of the cPanels.

  • The first one is by selecting the file and then clicking the Edit icon or button in the top menu.
how to edit functions dot php file in wordpress
  • The second one is by selecting the file and then right-clicking on it as shown below.
functions dot php file in active theme folder hostinger cpanel

Step 8: You will see the functions.php code and you can place your code in the end of it.

Add your code here at the bottom


WordPress shortcode example in PHP

Example 1:

The following example of shortcode gets the value of the url parameter ‘certno‘ from the url and append it to the iframe’s url and sends the final <iframe> tag’s code to the browser.

function shortcode_output_function() {

  $iframeSrc = "https://www.tfdorders.com/coa/" . $_GET['certno'];
  return '<iframe id="TFDCOA" src="'.$iframeSrc.'" width="100%" height="100%"></iframe>';

}

add_shortcode( 'user_iframe', 'shortcode_output_function' );

Example 2:

The following example prints a word “Hello” on the front-end.

function shortcode_output_function() {

  $output = "Hello";
  return $output;

}

add_shortcode( 'user_iframe', 'shortcode_output_function' );

How to use shortcode in wordpress

In the above function “user_iframe” is the name of the shortcode. Therefore to use it in a page or post or in a widget you just have to wrap up that name within the square brackets as following.

[user_iframe]

Now you are fully trained about creating custom shortcode in wordpress.

Please leave a comment if you have any questions at all and don’t forget to share!! Sharing is caring!!

2 thoughts on “How to create shortcode in WordPress | Step-by-step Method”

  1. Tһis is verү interesting, You are a very skilled blоgger.
    I have joined your rss feed and look forwarɗ to seeking
    more of your wonderful post. Also, I’ve shared your web site in my socіal netwoгҝs!

    Reply

Leave a Comment