How to Create Custom Shortcodes in WordPress (2023)

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.

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 that will allow you to revert to an earlier version of the website if things don’t go as planned. 

Article Continues Below

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, 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 when ready you can start writing your custom shortcode. 

I’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 their 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 I provided earlier. 

The important 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 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 you include in the file to ensure it’s working 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 WordPress Using Plugins

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.

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. 

6. Select fast insert next to the one you want to use by clicking the shortcode symbol in the editing toolbar.
7. View the page after you’ve published your edits!

Get Shortcoder

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

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

4. Give your custom code snippet a name. (essentially anything that will aid in the discovery of the code) 
5. Your code snippet should be copied and pasted into the box. 
6. Modify the code to meet your specific needs.

7. 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. 
8. By assigning tags to your code snippets, you can organize them by function and topic. 
9. “Save Changes” and “Activate” are two options.

Get Code Snippets

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.

Frequently Asked Questions about Custom Shortcodes in WordPress

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 such shortcodes manually, 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. I recommend using the Shortcodes Ultimate plugin to create a unique style. 

You’ll also need the Inspector tool to find out the shortcode’s CSS class. After you determine 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 you’ll have 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.

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!