how to add and create custom shortcode in wordpress

How to Create a Shortcode in WordPress with Example

/ Blog, WordPress, WordPress Development /

Shortcode in WordPress is key to adding dynamic codes to your page and is used to reduce the amount of code you need to write. You can’t add executable PHP codes to your post or page content directly. To insert executable code in your content you have to create or use WordPress Shortcode or a plugin sometimes with parameters and attributes. We provided a tutorial about adding PHP code to WordPress.

An effective technique to alter your posts and pages in WordPress is to learn how to develop shortcodes. Without the need for additional plugins, you can start personalizing your content by looking at how shortcodes operate and how to use them effectively.

In this post, you will learn how to create and add a shortcode or even a custom WordPress shortcode with parameters and attributes in your theme with examples, step by step.

WordPress Shortcode Content

What is Shortcode in WordPress?

WordPress monitors all content to ensure that no one inserts dangerous code into the database using posts and page content. This means that you can write basic HTML in your posts, but you cannot write PHP code in your posts directly. But what if you wanted to run some custom code inside your posts?

With the aid of WordPress shortcode, you may easily integrate components into a post or page.
They typically consist of one line of code enclosed in square brackets, as [exampleshortcode], for instance.

Shortcodes were originally made available by WordPress with the Shortcode API’s introduction.
Users may quickly add fascinating aspects to their posts and pages, such as Facebook “Like” buttons or Google Maps.

The Shortcode API is a simple set of functions to create WordPress shortcodes for use in posts and pages. WordPress introduced the shortcode in version 2.5. For instance, the following shortcode (in the body of a post or page) would add a photo gallery of images attached to that post or page. You can add shortcodes to your posts or pages with the Guttenberg editor or even the classic editor of WordPress.

[gallery id="123" size="medium"]

They are displayed inside square brackets. The greatest WordPress plugins have shortcodes of their own.
You may rapidly insert a WordPress contact form into a post or page using shortcodes, such as those provided by WP Forms and Contact Form 7. Moreover, you may add a WordPress button shortcode anywhere you want on your website by using a plugin like MaxButtons.

Such dynamic content would need writing a lot of code. Shortcodes simplify this process of adding features to a WordPress website. They add HTML and other dynamic markup languages. Into the post, page, widget, or comment

Basically, it allows developers to add their code inside a function and then register that function with WordPress as a shortcode, so users can easily use it without having any coding knowledge.

If you only create one feature on a specific post or page you don’t need to use a shortcode. But, if you will use that shortcode in many different posts or pages, you may want to use a plugin to add a shortcode.

Why You Should Think About Using WordPress Shortcodes

You might want to use WordPress shortcodes for a variety of reasons. For instance, it is simpler and faster than learning and creating lengthy HTML code. Also, they aid in keeping your information readable and clear.

Some frequently used functions can be automated using shortcodes. For instance, having a specific shortcode prepared can be a quick and useful fix if you employ a call to action (CTA) button on each and every one of your posts.

It is important to note that the Gutenberg Editor uses shortcodes to function similarly. Using the usage of blocks enables WordPress users to add a number of interactive elements.

How to Add Shortcode in WordPress With Parameters And Attributes?

You can insert shortcodes in WordPress on:

  • Posts
  • Pages
  • Widgets
  • Themes

To add a shortcode to your page or post content, you can simply add it with a shortcode block.

Edit the page you want to add the shortcode.

You need to click on the add block button to insert a shortcode block.

Find the shortcode block in the Gutenberg blocks list and add it.

Paste the shortcut of your shortcode inside the block like in the example above.

Shortcode in WordPress

If you don’t have access to the shortcode block like in the sidebar, you can add it with the WordPress build-in Text widget.

If you are still using the old classic editor in WordPress, edit the post and page where you want to add the shortcode. You can paste the shortcode anywhere inside the content editor where you want it to display.

How to Add a Shortcode in WordPress PHP Files

Sometimes you may want to use a shortcode inside a PHP file. Basically, you can add a shortcode to any WordPress theme template by simply adding the following code. Here is the adding shortcode example, programmatically.

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

Support Shortcodes in Widgets

If WordPress doesn’t support your shortcodes in widgets, add the following codes to your functions.php file.

add_filter( 'widget_text', 'shortcode_unautop' );
add_filter( 'widget_text', 'do_shortcode' );

How to Create Your Own Custom Shortcode in WordPress?

Having a complete backup of your WordPress website is a smart idea.

To create your own custom WordPress shortcode, the theme files for your website can be accessed using an FTP client like FileZilla. Once you’re logged in, go to “wp-content > themes” and look for the theme folder for the current theme.

To create your custom Shortcode in WordPress, open the functions.php file and add your custom function to it.

function hs_custom_shortcode(){
    return '<p>Hello World!</p>';
}
add_shortcode( 'hs_shortcode', 'hs_custom_shortcode' );

As you see there is a function that prints “Hello World!”. You can create your shortcode by add_shortcode action.

The first argument is the name of the shortcode to use everywhere and the second argument is the function name.

Shortcode names should be all lowercase and use all letters, but numbers and underscores should work fine too.

The Shortcode callback function can have three parameters. You can choose to use any number of them including none of them.

  • $atts – an associative array of attributes, or an empty string if no attributes are given
  • $content – the enclosed content (if the shortcode is used in its enclosing form)
  • $tag – the shortcode tag, useful for shared callback functions

Any string returned (not echoed) by the shortcode handler will be inserted into the post body in place of the shortcode itself.

The shortcode tag “($tag)” and matching function “($func)” hooks are assigned when you create a WordPress shortcode using the add shortcode function, and they are executed each time the shortcut is used.

If the WordPress shortcode tag is [subscribe], the hook’s subscribe link will cause the visitor to be directed to the specified URL.

On your WordPress website, you may now test your initial code as a self-closing shortcode.
You can easily enter the [hs_shortcode] tag into the post using the WordPress Block Editor.

Example of Create WordPress Shortcode With Parameters and Attributes

In the previous example, we created a shortcode that doesn’t accept the parameters. If you need to pass a parameter to your WordPress shortcode function, you have to change your code to the one below to create it with parameters and attributes.

function hs_custom_shortcode($atts){
    $a=shortcode_atts(array(
        'first_name' => '',
        'last_name' => '',
    ), $atts);
    return '<p>Welcome '.$a['first_name'].' '.$a['last_name'].'</p>';
}
add_shortcode( 'hs_shortcode', 'hs_custom_shortcode' );

In this custom WordPress shortcode, the function accepts two parameters and displays them. Both attributes are optional.

On the page, you can change your brackets like below.

[hs_shortcode first_name="John" last_name="Doe"]

Don’t use camelCase or UPPER-CASE for your $atts attribute names.

Enclosing Shortcode

The formatting of the enclosing shortcode will resemble that of a self-closing example. It will, however, have an extra parameter for the function.

The examples above show self-closing shortcodes. If a shortcode macro is used to enclose content, its handler function will receive a second parameter containing that content.

You must first include $content = null to designate this function as an enclosed shortcode. The WordPress do_shortcode can then be added to search for shortcodes in the content.

function hs_custom_shortcode($atts, $content = null)
{
    $a = shortcode_atts(array(
        'first_name' => '',
        'last_name' => '',
    ), $atts);
    return '<p>Welcome ' . $a['first_name'] . ' ' . $a['last_name'] . ' | '.$content.'</p>';
}
add_shortcode('hs_shortcode', 'hs_custom_shortcode');

And on your page edit:

[hs_shortcode first_name="John" last_name="Doe"]Honar Systems[/hs_shortcode]

When content is enclosed, the complete shortcode macro including its content will be replaced with the function output. It is the responsibility of the handler function to provide any necessary escaping or encoding of the raw content string and include it in the output.

Nested Shortcodes

If you want to add a shortcode inside the shortcode like the following code

[caption]Caption: [myshortcode][/caption]

You have to change your first shortcode’s function.

function caption_shortcode( $atts, $content = null ) {
	return '<span class="caption">' . do_shortcode($content) . '</span>';
}

The second shortcode was added by the do_shortcode action.

Remove Shortcode

To remove a shortcode, you can do it simply like the below code:

remove_shortcode('hs_shortcode');

Predefined Shortcodes in WordPress

  • audio
  • caption
  • embed
  • gallery
  • playlist
  • video

Final Words

Adding extra functionality to your WordPress website is a lot simpler with shortcodes. You can create and add your custom shortcode function in your plugin, functions.php file, custom widget, and almost everywhere in WordPress even with parameters and attributes. It is better to add a plugin because if you change your theme, your shortcode won’t work because you left it in your functions.php file.

Related Posts

Shopping Cart