WPLift is supported by its audience. When you purchase through links on our site, we may earn an affiliate commission.

How to Create Custom Shortcodes in WordPress (2024)

Last Updated on February 6th, 2024

Tags: ,

Want to enhance your website’s functionality without putting much effort? Enter the world of shortcodes. A shortcode is a one-of-a-kind tag that allows users to insert predefined scripts, images, content, functions, and more into WordPress websites without having to type long snippets of HTML or CSS every time. Stay with us to learn every essential detail about the shortcodes.

In this blog, we will explain the basics of shortcodes. We’ll explore various methods to add and create WordPress shortcodes, giving you the power to take complete control over your website’s functionality. Whether you are a seasoned developer or just starting out, becoming familiar with how to use shortcodes in WordPress helps you to transform your website, and offer a better experience to the users. 

Without further ado, let’s dive into the world of shortcodes, and take complete control of your WordPress site.

What are Shortcodes?

Shortcodes are snippets of code that you can use to introduce a feature or function almost anywhere on your website. The code that each shortcode executes is determined by how it was built. Many plugins come with their own shortcodes, and WordPress comes with a few as well. 

As a result, implementing a shortcode can save time for developers, especially when adding it to several posts or pages. Rather than typing in a social media icon using HTML painstakingly, you can use a shortcode to tell WordPress to insert a social media icon whenever you insert a specific shortcode. 

If You want to include an Instagram button at the end of a blog post. Rather than manually putting this, adding a hyperlink, changing the icon’s size, and so on, you may only need to use a shortcode that has been “pre-programmed” by the theme author, such as this:

[social icon=”Twitter”]

It’s worth repeating at this point that you can’t just throw in your own shortcodes and expect them to work. They must have been added to your theme as an option. Typically, themes come with a large number of pre-built shortcodes, and the theme instructions will provide you with a list of available shortcodes from which to choose. 

Shortcodes offer an excellent way for non-developers to show a variety of content without writing the code.

What is a Shortcode API?

One of the most useful aspects of WordPress is the Shortcode API. Because of this functionality, WordPress has become the most popular and easiest-to-code Content Management System (CMS) on the planet. The Shortcode API was first introduced in WordPress 2.5 and consists of several main functions:

Article Continues Below

  • add_shortcode() – This is the primary method for registering a new shortcode. 
  • shortcode_atts() – This function is used for setting up the attributes that can be supplied to a shortcode 
  • shortcode_exists() – This function determines whether a given shortcode has been registered. 
  • has_shortcode() – This function allows you to see if the content you’ve supplied has a specific shortcode.
  • remove_shortcode() – You can use this function to unregister a shortcode. 
  • remove_all_shortcodes() – All registered shortcodes can be deregistered with this function. 
  • do_shortcode() – This function allows you to parse a text string for all shortcodes. 
  • strip_shortcodes() – This function eliminates all shortcodes from a text string that is given to it. 
  • get_shortcode_regex() – This function returns the regular expression for detecting shortcodes within post text.

Types of Custom Shortcodes

Self-Closed Shortcodes

A self-closed shortcodes are an essential aspect of WordPress that powers a significant portion of the web. It is a WordPress-specific code that enables you to achieve complex things on your website with minimal effort. 

In this type of shortcode, the content is inside the square brackets and doesn’t require a closing tag. A self-closing shortcode is something like [recent posts] or [image gallery]. The material inside the square brackets will be shown whenever you use this shortcode. 

These shortcodes stand out because of their ease of use and ability to be inserted anywhere in your post or page content.

Enclosed Shortcodes

The closing tags for enclosing shortcodes are: [shortcode]your content here[/shortcode]. When the content inside the opening and closing tags has to be changed, enclosing shortcodes are required. 

Examples of Shortcodes

Call to Action Button

A self-closing shortcode will be the first example. To do this, we’d like to create a button that can be placed anywhere in your material and links to an online store.

Front-end example of a custom hard-coded shortcode 

We’ll hard code how it displays, where it links, and what it says because we want this to be a static component. To accomplish this, we’ll convert the preceding shortcode into an enclosed shortcode.

function shortcode_init(){
	add_shortcode( 'ctabutton', 'ctabutton_handler' );
}
add_action('init', 'shortcode_init');

function ctabutton_handler() {
	return '<div class="button-container"><div class="shop-cta-button"><a href="' . home_url() . '/shop" class="shop-cta-button-link">Start Shopping!</a></div></div>';
}

As previously said, the first portion is simply the wrapper function to register the shortcode. The second step creates a container with a div element. It has a defined anchor text and a link to the site’s main URL with /shop attached to it. To be able to style elements, they all have CSS classes. 

Customizable Call to Action

However, what if you want to be able to customize the call to action’s content, color, and destination? To do this, we’ll change the above to an enclosed shortcode. Here’s the updated handler function (the add_shortcode( ) function remains unchanged):

Article Continues Below

function ctabutton_handler( $atts ) {
	$a = shortcode_atts( array(
	'link' => '#',
	'color' => 'red',
	'size' => 'small',
	'label' => 'Click me'
	), $atts );
	return '<div class="button-container"><div class="cta-button ' . esc_attr( $a['color'] ) . ' ' . esc_attr( $a['size'] ) . '"><a href="' . esc_url( $a['link'] ) . '" class="cta-button-link">' . esc_attr( $a['label'] ) . '</a></div></div>';
}

How to Add Shortcode in WordPress Posts and Pages?

Here is the simple step-by-step process to add shortcode in WP posts and pages.

  1. Go to the WordPress dashboard. Look out for the WordPress page or posts you want to include the shortcode.
  2.  Then, you have to click on the block button “+” to insert the Shortcode into it.

3. As soon as you include the shortcode, put the text inside the shortcode in the block settings.

How to Add Shortcode in WordPress Sidebar Widgets?

Follow the steps given below to include a shortcode in WP sidebar widgets.

  1. First, you need to visit the Appearance -> Widgets page and include a ‘shortcode’ widget in the sidebar.
  2. Here, you need to include the shortcode in the text area of the widget.
  3. Lastly, click “Update” to save the latest widget settings.

How to Add Shortcode in Old WordPress Classic Editor?

If you leverage the old WordPress classic editor, here is the streamlined process to add a shortcode in WP pages and posts.

  1. First and foremost, you should select the page or post you want to edit in the classic editor and then choose “Classic Editor
  2. Now, you have got two options. You can create a new page or upgrade the existing one in which you want to include the shortcode.
  3. Decide the section where you want to include the shortcode and just enter it.
  4. Save the pages you have done in the particular post or page and preview it to ensure everything works as required.

How to Add Shortcode in WordPress Theme Files?

Apart from integrating the Shortcode in WordPress pages, posts, and widgets, adding it to WordPress theme files is possible.

Here is the streamlined process to add Shortcode in the WordPress theme files.

  1. Backup your files and utilize the staging site, which is sufficient to damage the development site.

For instance, if you intend to include the Shortcode in the 404 pages (Pages that don’t exist)

  1. Visit the WordPress dashboard -> Appearance -> Theme File Editor.
  1. Go to the file section where you want to include the shortcode—for instance, 404.php for all the 404 error pages on your store.
  1. Include the shortcode within the chosen file.

For instance 

<?php echo do_shortcode(“[wpforms id=”8″]”); ?>
  1. Save all of your changes and preview the result.
  2. Here is how the page will appear when someone tries to access it.

How to Create Custom Shortcodes

Know the basics

For Registering a shortcode:

Article Continues Below

add_shortcode( ‘someshortcode’, ‘someshortcode_handler’ );

  • someshortcode — Between the brackets, there will be a tag. Lowercase letters, digits, and underscores should be used. 
  • someshortcode_handler — If the shortcode exists, this method will be used.

For handler function:

function someshortcode_handler( $atts, $content, $tag ){ }

  • $atts — A collection of qualities. If you don’t specify one, it will be treated as an empty string. 
  • $content — The following content is contained (when using an enclosed shortcode). Return the value rather than echoing it. 
  • $tag — The shortcode’s tag value (someshortcode in the preceding example) (someshortcode in the above example). It is useful if more than one shortcode uses the same callback function. 

Where Should Your Functions Be Located? 

Shortcode scripts can be included in functions.php, plugins, or theme files. You can call the add shortcode() method directly in the latter instance, but in all other cases, you need to wrap it in another function like this:

function shortcode_init(){
	add_shortcode( 'someshortcode', 'someshortcode_handler' );
}
add_action('init', 'shortcode_init');

This ensures that the function is only called once WordPress has finished loading. Now that we’ve covered the theory, here are some examples.

  1. Create the function that WordPress will call when it encounters a shortcode. 
  2. Set a unique name for the shortcode when registering it. 
  3. Connect your registration form to a WordPress action.

Creating a Custom Shortcode in WordPress

Preparation and testing are the two most important stages of the shortcode creation process. 

So, you must back up your website before doing anything else. Optionally, you can create a child theme, allowing you to revert to an earlier website version if things don’t go as planned. 

Afterward, you’ll have to create a new theme file on the website’s server with FileZilla or a similar File Transfer Protocol. Here’s how: 

  • Open the FTP you’re using, and go to the wp-content folder.
  • Double-click on the Themes folder and access your current theme’s folder. The folder should have the same name as the theme you’re using. 
  • Open the folder that holds your current theme’s files, right-click, and select the Create a New File option.
  • Name the file and make sure its extension is .php.
  • Right-click on the file you just created and choose the View/Edit option. 
  • The default text editor will pop up on the screen. Insert the <?php?> code into the file so that WordPress can interpret it as a PHP file.
  • Check the Finish Editing and Delete local file box before saving the file.

Open the funtions.php file in the same folder after you’re done editing the custom shortcode file and insert the code below:

Include (‘shortcode file name.php’);

This concludes the preparation stage, so you can start writing your custom shortcode when ready. 

We’d like to remind you that caption, audio, embed, video, gallery, and playlist shortcodes are available in WordPress by default, so there’s no need to create custom versions. 

The exact code you’ll have to write will depend on the function you want the shortcode to have. So, you can use the CTA or Action Button code we provided earlier. 

The vital thing to note is that the file you’re creating must contain an action hooked to a function, a fallback function, and a tag. 

You should test the new shortcode in WordPress when it is done. Open the block editor and type the shortcode’s tag into the post.

The editor will display the shortcode allowing you to see how it looks on a page. Optionally, you can add handling parameters to the shortcode.php file if you want to expand its functionalities. 

Doing so can be useful if you want the shortcode to contain social media links or other elements. You must test each parameter in the file to ensure it works properly. 

Moreover, adding an enclosing shortcode to the php file will enable you to manipulate the content between the opening and closing tags. Once again, you must test if the custom shortcode is working properly on the website after adding the enclosing shortcode to its file.

How to Create Shortcode in WordPress Using Plugins

There are a vast number of WordPress plugins available online that let you create shortcodes. We will look at some of the most popular ones. 

1. Shortcoder 

 create shortcode WordPress using Shortcoder

The Shortcoder plugin allows you to build custom HTML, JavaScript, and other snippet shortcodes. With the help of this plugin, you can now use shortcodes in pages & posts, and snippets will be replaced.

Pros

  • Create and use “custom shortcodes” in WordPress with ease. 
  • As shortcode content, you can use any type of HTML. 
  • Insert Shortcode with custom parameters.
  • Add WordPress parameters to the shortcode.

Cons

  •  For empty parameters, the default value is missing functionality.

Price

  • Free

Create Shortcode in WordPress Using Shortcoder

  1. Go to Settings from the left-hand menu, and then Shortcoder.
  2. Click Create a new shortcode. 
  3. Give your shortcode a name, and then fill in the blanks in the editor with your text.
  4. You’ve just built your first shortcode by clicking Create shortcode at the bottom. 
  5. To add your shortcode, go to the editor of the page or post where you want it to appear. 
Create Shortcode WordPress Using Shortcoder
  1. Select fast insert next to the one you want to use by clicking the shortcode symbol in the editing toolbar.
  2. View the page after you’ve published your edits!

Get Shortcoder

2. Code Snippets

 create shortcode WordPress using Code Snippets

Code Snippets performs an excellent job of displaying code snippets. One of the plugin’s noteworthy features is that not only are the shown lines of code formatted to be easy to read and copy, but it also includes a custom field for a code description so you can keep track of which snippets do what. 

Any necessary additions or edits can be performed quickly and easily without seeking the relevant post or page. This also allows you to reuse the same snippets in multiple places while only maintaining a single instance.

Pros

  • Simple, easy-to-use interface
  • Provides a GUI interface for adding snippets
  • Snippets can be activated and deactivated, just like plugins.

Cons

  •  None found.

Price

  • Free

Create Shortcode in WordPress Using Code Snippets

  1. Install and activate the Code Snippets plugin.
  2. In your WordPress admin bar, it will add a new menu item called “Snippet.” When you select this option, a list of all custom code snippets on your site will appear. A few demo snippets will be available. 
  3. To add your first custom code snippet, click “Add New.”
 create shortcode WordPress using Code Snippets

This will lead you to the screen where you may “Add New Snippet.” 

  1. Give your custom code snippet a name. (essentially anything that will aid in the discovery of the code) 
  2. Your code snippet should be copied and pasted into the box. 
  3. Modify the code to meet your specific needs.
 create shortcode WordPress using Code Snippets
 create shortcode WordPress using Code Snippets
  1. Just below the code box is a text space where you may write a description of your code. Include any other information that will aid in your understanding of the code. 
  2. By assigning tags to your code snippets, you can organize them by function and topic. 
  3. “Save Changes” and “Activate” are two options.

Get Code Snippets

3. Shortcode Ultimate

 create shortcode WordPress using Shortcode Ultimate

It adds dozens of shortcodes to your WordPress site, allowing you to add all kinds of content and design to your posts and pages quickly and easily. 

Within your WordPress dashboard, the plugin includes a complete list of shortcodes as well as a few examples. There’s also a comprehensive knowledge base with 107 articles and tutorials to assist with problems.

Like any other free plugin, you can download the Shortcode Ultimate plugin from the WordPress plugin repository via the admin panel. You can alternatively get it from the developer’s website and upload the plugin zip file to the server via the admin dashboard or FTP.

Pros

  • Thanks to the plugin Column option, your site can now have responsive column layouts. 
  • It has a Tooltip that lets you add immediate tooltips to any text on your site without needing a plugin.
  • The Original CSS files are simple to alter in order to tailor the style of each element.

Cons

  • Some shortcodes may require CSS customization to operate with a theme.

Price

  • Free with Paid add-ons

Create Shortcode in WordPress Using Shortcode Ultimate

  1. From the Suggested Plugins notification, activate the Shortcodes Ultimate plugin. 
  2. To create or update a page or a post, go to the page or post you’re working on. 
  3. Click on the Insert Shortcode button in the visual editor panel 
  4. Choose the shortcode that you would like to use in your content. Ensure that all the content is inside the shortcode you select. 
  5. Review your shortcode and edit any unique settings that you would like 
  6. Click Publish or Update

Get Shortcode Ultimate

Using Custom Shortcodes in WordPress Posts and Pages

Here is the step-by-step process to create a WordPress custom shortcode for posts and pages.

  1. Log in to the WordPress Dashboard with your login details.
  2. In the navigation menu, click “Post”
  3. Click the post you want to edit.
  4. Click “Text”.
  5. Insert shortcode.
  6. Click “Update” to save your changes.

Using Custom Shortcodes in WordPress Widgets

Shortcodes can also be used in WordPress sidebar widgets. Here are the steps on how to add shortcodes to your WordPress Widgets.

  1. Use your login details to access the WordPress Dashboard. 
  2. Click “Pages” in the navigation menu. 
  3. Select the Page you’d want to change. 
  4. Add a shortcode by clicking “Text.” 
  5. To save your changes, click “Update.” 
  6. You can now insert shortcuts as well as content into a text widget.

Using Custom Shortcodes in WordPress Themes

Shortcodes are used to add formatting to posts, pages, and widgets in WordPress. However, you may need to employ a shortcode within a WordPress theme file on occasion. 

It’s simple to do with WordPress, but you’ll need to change your WordPress theme files. See our article on how to copy and paste code in WordPress if you haven’t done it before. 

Simply paste the following code into any WordPress theme template to create a shortcode.

<?php echo do_shortcode("[your_shortcode]"); ?>

WordPress will now look for the shortcode and display its output in your theme template.

Final Words

Shortcodes are beneficial for a variety of purposes and across your entire website. If you’re using a theme or plugin that lacks some features you’d want, generating shortcodes might help you fill in the gaps. 

Shortcodes allow you to introduce a previously inaccessible or missing feature to your website and significantly improve its usefulness. Follow the simple steps above to add shortcodes to WordPress pages, posts, themes, and widgets. Moreover, you must have understood how to create shortcode in WordPress manually and include them in your site.

Lastly, it’s time for you to integrate the shortcode in your WordPress site, theme, or widget using your preferred method.

Frequently Asked Questions

How Do I Create a Shortcode for a Custom Form in WordPress?

Installing a plugin is the quickest way to create a shortcode for a custom form. However, you can also create a WordPress custom shortcode, but this might be hard to do if you don’t feel comfortable writing code. 

The process is similar regardless of the method you choose. You must create a custom shortcode file, specify its function, define its layout, and ensure you can manipulate its content. 

Moreover, the shortcode must contain the ID, Title, User Name, and other parameters you want your form to have. You must test the custom form and resolve all potential issues you might encounter.

How Do I Create a Shortcode Plugin in WordPress?

Building a shortcode plugin is much more difficult than finding an existing one that lets you create custom shortcodes. 

Also, you’ll have to back up the website, choose a suitable testing environment, and know which functionalities the new shortcode should have before you start altering the theme’s files. 

Once you have everything you need in one place, you should create the shortcode file and add code to it. Don’t get discouraged if the shortcode doesn’t work as intended at first. Keep testing it instead until you get the results you’re hoping for.

How Do I Style Shortcodes in WordPress?

There’s more than one way to define a shortcode’s style. We recommend using the Shortcodes Ultimate plugin to create a unique style. 

You’ll also need the Inspector tool to determine the shortcode’s CSS class. After deciding on the CSS class, you can use the plugin’s Custom CSS field to create a custom style. 

Using variables will enable you to add links to background images or fonts. Moreover, the style you create will have priority over the shortcode’s initial style, so you can easily preview all changes you make.

Does WordPress Have a Shortcode Template?

There are six default shortcodes in WordPress you can use without plugins. Hence, creating a playlist or a gallery with a shortcode doesn’t require external tools. 

However, the customization features at your disposal will be limited, so changing the gallery’s layout or introducing new playback features for the video shortcode can be difficult. 

Installing Elementor Pro will allow you to get a shortcode for each template layout you make with this page builder.

A team of WordPress experts that love to test out new WordPress related software, WordPress plugins and WordPress themes.