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 (2021)

Last Updated on August 12th, 2021

Published on September 4th, 2017

Tags: ,

Share This Article

If you give WordPress shortcodes a chance, they can accomplish amazing things. A shortcode is a one-of-a-kind tag that allows users to insert pre-defined scripts, images, content, functions, and more into WordPress websites without having to type long snippets of HTML or CSS every time. This is a compelling incentive to learn to create shortcode WordPress.

Shortcodes are designed to make your life easier, but in order to install and create it on your WordPress site, you must first learn how to do so in order to design and add new functions to your site. Let’s look at various ways to add and create WordPress shortcodes so you can have complete control over your website.

What are Shortcodes?

Shortcodes are snippets of code that can be used 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 having to painstakingly type in a social media icon using HTML, you can instead use a shortcode to tell WordPress to insert a social media icon whenever you insert a certain 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 are a wonderful way for non-developers to show a variety of content without having to write code, as well as a time-saving tool for developers.

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:

  • 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

Article Continues Below

Self-Closed Shortcodes

It is content contained in square brackets. A self-closing shortcode is something like [recent posts] or [image gallery]. When you use this shortcode on a page, the material inside the square brackets will be shown. It’s comparable to the img /> tag. The img /> tag in HTML is blank; we use the src property to give a URL, and the tag shows an image. There is no requirement for a closing tag. A self-closing shortcode, on the other hand, can receive characteristics but does not require a closing tag.

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):

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>';
}

Shortcodes vs Blocks

In general, if you like shortcodes, you’ll enjoy WordPress editor blocks. You can achieve the same result with blocks but in a more user-friendly manner. 

Shortcodes became less desirable as blocks were introduced. Instead of dealing with shortcode markups, users may now add blocks directly from the editing interface, no matter how simple they are. Because Gutenberg blocks are more novice-friendly than shortcodes, several popular WordPress plugins are moving to them.

Article Continues Below

The issue with shortcodes is that they provide a poor user experience for those without technical skills. They are, however, one of the most useful tools for developers, both throughout the development process and in production sites, because they allow you to get your code on the page with the utmost ease.

Advantages of Shortcodes

  1. Shortcodes can hold nearly anything, allowing you to include a wide range of items on your pages. 
  2. Because they’re easier to include on a page than code snippets, they’re more user-friendly. 
  3. You can utilize your shortcodes on different WordPress sites by installing them as plugins. 
  4. You can make them so that users have control over the attributes and material they see.
  5. You don’t need to copy and paste the same lines of code every time you want to do something. 
  6. If you want to change what a shortcode produces, you simply need to change the code once (at source). 
  7. Rather than using a plugin, you can accomplish a number of pretty easy tasks with a shortcode.

Disadvantages of Shortcodes

  1. It’s impossible to know what a shortcode performs simply by looking at it. 
  2. Having a lot of shortcodes on a page can make it look a little cluttered. Furthermore, you must frequently enter them manually and cannot select them from the UI like other elements. 
  3. They can cause your site to slow down because each shortcode sends an extra request to your server. If you use too many, your loading time will be slowed.

How to Create Custom Shortcodes

Know the basics

For Registering a shortcode:

add_shortcode( ‘someshortcode’, ‘someshortcode_handler’ );

  • someshortcode — Between the brackets, there will be a tag. Lower-case 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). 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, a plugin, or a theme file. 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, let’s look at some example situations.

  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.

How to Create Shortcode WordPress Using Plugins

Shortcoder 

create shortcode WordPress using Shortcoder

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

Article Continues Below

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 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. 
  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

Code Snippets

create shortcode WordPress using Code Snippets

Code Snippets performs a good 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 having to seek for 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 can be activated and deactivated, just like plugins.

Cons

  •  None found.

Price

  • Free

Create Shortcode 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
  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

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.

The Shortcode Ultimate plugin, like any other free plugin, may be downloaded from the WordPress plugins 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

  • Your site can now have responsive column layouts thanks t the plugin Column option. 
  • It has a Tooltip that enables you to add immediate tooltips to any text on your site without the need for 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 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\sMake sure that all the content is inside of the shortcode that 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 Post 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.

Wrapping Up!

Shortcodes can be used 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 can be used to introduce a previously inaccessible or missing feature to your website, as well as significantly improve its usefulness. Save time and effort by using the information above to easily develop your own WordPress shortcodes now that you know how to use and add them.

We hope this post has helped you learn how to create and add shortcodes to your WordPress site!

Stay informed on WordPress

Every Friday you’ll receive news, tutorials, reviews, and great deals from the WordPress space.

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