WordPress Shortcodes: The Complete Guide

WordPress shortcodes are a versatile feature that allows you to do fun things with little effort. You can do about anything with them. Embedding graphical features or designing complicated web templates is as simple as adding a single line of code with shortcodes.

Shortcodes remove the need for lengthy scripts. And if you have little or no programming experience, you can easily incorporate dynamic content with their assistance.

They’re very common with WordPress developers because they greatly aid in the automation of content and design development. Shortcodes are what Macros are to data analysts and Keyboard Shortcuts are to professional graphic designers.

This guide will teach you everything you need to know about shortcodes. You’ll learn how to use the Shortcode API by making your own shortcodes. Finally, we’ll talk about the future of shortcodes and how they work into WordPress’ latest Block editor.

What are Shortcodes?

Shortcodes are typically used with square brackets tags [] to describe how they are used. Each shortcode serves a specific purpose on a website. It may be as basic as formatting the content or as complicated as specifying the overall layout of the website.

Shortcodes may be used to embed sliders, shapes, or price tables, for example. They can also be used to make reusable page templates.

There are primarily two types of shortcodes in WordPress:

• Self-closing Shortcodes: These don’t need a closing tag.

• Enclosing Shortcodes: These include a closing tag. In general, enclosing shortcodes control the content between the opening and closing tags.

Default WordPress Shortcodes

WordPress has six default shortcodes:

• audio – Insert audio files into your website. It provides basic replay functions such as Play and Pause.
• caption – can be used to wrap captions around your content. It’s most commonly used to add image captions, but it can be used on any HTML feature.
• embed – Increase the functionality of the default oEmbed feature. This shortcode allows you to change the properties of your embeds, such as their maximum dimensions.
• gallery – Add a quick image gallery to your website. You may use attributes to specify which photographs are used and to configure the appearance of the gallery.
• playlist – With this self-contained shortcode, you can display a series of audio or video files. With its style attribute, you can give it a cool ‘black’ mode.
• video – Use a basic video player to embed a video file and play it again. This shortcode allows you to insert videos in the following formats: mp4, webm, m4v, webm, ogv, wmv, flv.

How to Create a Custom Shortcode

Now that we’ve discussed the fundamentals, let’s build a custom shortcode. We’ll begin with the simplest shortcode possible and work our way up to more complex ones. Enjoy the brief achievements as you progress toward shortcode mastery.

1: Shortcode for the current date [pe_get_current_date_shortcode]

Let’s make a [current_date] shortcode that displays the current date on your website. If you’re adding content to your website that needs to be updated every date, this shortcode can come in handy.

I don’t suggest adding the code to your theme’s functions.php file. However, it is useful for testing and learning. Let’s now register the shortcode and its handler function. To do so, apply the following code to your plugin file:

<?php

add_shortcode( 'pe_get_current_date_shortcode', 'pe_get_current_date' );
/**
 * Return the current date.
 *
 * @return false|string
 */
function pe_get_current_date() {
    return date('Y-m-d');
}

Save the plugin file. It’s now time to see if the shortcode works as anticipated.

2. Shortcode for a CTA Button [pe_cta_button_shortcode]

Let’s make a CTA Button shortcode that can be customized. I want users to be able to adjust the size and color of the CTA Button using the shortcode attributes.

The shortcode allows users to change the size and color of the button. We already set their default values in the handler feature, but we need to add the stylesheet to the list of available tools by registering and enqueuing it. All of the classes specified in the shortcode should be present in this stylesheet.

These classes can also be set in your theme’s global stylesheet, but it’s best to load them separately. This means that even though you modify or refresh the WordPress theme, these classes can continue to load alongside the shortcode.

<?php

/** Enqueuing the Stylesheet for the CTA Button Shortcode */

function pe_cta_enqueue_scripts() {
     global $post;

     if( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'pe_cta_button_shortcode') ) {
     wp_register_style( 'pe-cta-stylesheet',  plugin_dir_url( __FILE__ ) . 'css/pe-cta-style.css' );
         wp_enqueue_style( 'pe-cta-stylesheet' );
     }
  
}
add_action( 'wp_enqueue_scripts', 'pe_cta_enqueue_scripts');

<?php

/**
 * [pe_cta_button_shortcode] returns the HTML code for a CTA Button.
 * @return string Button HTML Code
*/

add_shortcode( 'pe_cta_button_shortcode', 'pe_cta_button' );
/**
 * Create a CTA Button Shortcode.
 *
 * @param $atts
 *
 * @return string
 */
function pe_cta_button( $atts ) {
	$a = shortcode_atts( array(
		'link' => '#',
		'id' => 'pe_cta_button',
		'color' => 'blue',
		'size' => '',
		'label' => 'Button',
		'target' => '_self'
	), $atts );

	return '<p><a href="' . esc_url( $a['link'] ) . '" id="' . esc_attr( $a['id'] ) . '" class="button ' . esc_attr( $a['color'] ) . ' ' . esc_attr( $a['size'] ) . '" target="' . esc_attr($a['target']) . '">' . esc_attr( $a['label'] ) . '</a></p>';
}

Since the final output is a button element, HTML attributes such as href, id, class, target, and label can be used to easily customize it. Since the id and class attributes are also standard CSS selectors, you can use them to style the button.

3: Shortcode Using $content

Let’s finish with an enclosing shortcode called [boxed] that displays any content between its tags in a box with vibrant names. Begin by registering the shortcode and specifying its handler function.

<?php

/** Enqueuing the Stylesheet for two shortcode */

function pe_cta_enqueue_scripts() {
     global $post;
  
     $has_shortcode = has_shortcode( $post->post_content, 'pe_cta_button_shortcode' ) || has_shortcode( $post->post_content, 'boxed' );
     if( is_a( $post, 'WP_Post' ) && $has_shortcode ) {
     wp_register_style( 'pe-cta-stylesheet',  plugin_dir_url( __FILE__ ) . 'css/pe-cta-style.css' );
         wp_enqueue_style( 'pe-cta-stylesheett' );
     }
}
add_action( 'wp_enqueue_scripts', 'pe_cta_enqueue_scripts');

/**
 * [boxed] returns the HTML code for a content box with colored titles.
 * @return string HTML code for boxed content
 */

add_shortcode( 'boxed', 'pe_content_boxed' );
/**
 * Shortcode Using $content
 *
 * @param $atts
 * @param null $content
 * @param string $tag
 *
 * @return string
 */
function pe_content_boxed( $atts, $content = null, $tag = '' ) {
    $a = shortcode_atts( array(
      'title' => 'Title',
      'title_color' => 'white',
      'color' => 'blue',
    ), $atts );

    return '<div class="pe-content-boxed" style="border:2px solid ' . esc_attr( $a['color'] ) . ';">' . '<div class="pe-boxed-title" style="background-color:' . esc_attr( $a['color'] ) . ';"><h3 style="color:' . esc_attr( $a['title_color'] ) . ';">' . esc_attr( $a['title'] ) . '</h3></div>' . '<div class="pe-boxed-content"><p>' . esc_attr( $content ) . '</p></div>' . '</div>';
}

Pros vs Cons

Pros:

• Shortcodes make it easier to apply complex functionality to WordPress pages.
• With a single line of javascript, you can add almost everything.
• Shortcodes help to simplify the production process.
• They remove the need to write complicated scripts each time you choose to add a new function.
• Shortcodes are easier to use than HTML code or PHP files.
• Shortcodes may be used inside plugins. And if you edit WordPress or change/update your theme, the shortcodes will remain valid and function as before.
• Shortcodes are easier to use through various WordPress websites as they are packaged within plugins.
• Getting all of your unique shortcodes ready to go is a lifesaver if you’re a developer who manages several pages.
• Since shortcodes allow attributes, users can change how the same shortcode behaves by simply changing its attribute choices.

Cons:

• Shortcodes are not intuitive to use for the end-user, particularly when several are on a website. They are well suited for developers in such situations.
• It’s difficult to say what a shortcode does just by looking at it. For this cause, the WordPress core team has appropriately dubbed them “mystery meat embed codes.”
• If you change your theme, the shortcodes that come with it will no longer fit.
• In terms of syntax, shortcodes are unclear. Some of them, for example, endorse optional closure, allowing you to use them as either self-closing or enclosing, or even both if they’re nesting. You can imagine how quickly it can get really complicated.

Gutenberg Blocks and Shortcodes

Shortcodes became less desirable with the introduction of Gutenberg. Users will now add blocks directly from the editor interface rather than dealing with shortcode markups, regardless of how basic they are.

In conclusion

Using shortcodes, you can easily add complicated features to any page on the WordPress site. They provide consumers with easy-to-type tags that can be used without having to think about tinkering with complicated codes.