WordPress Shortcode by Example

Photo by Joshua Reddekopp
Photo by Joshua Reddekopp on Unsplash

Introduction

WordPress is one of the most popular content management systems, making it an excellent platform for creating websites and blogs. One powerful feature of WordPress is the ability to use shortcodes. Shortcodes allow you to easily add dynamic content or functionality to your website without writing complex code. In this article, we will explore what shortcodes are, how to create them, and provide practical examples of using shortcodes in WordPress.

What is a Shortcode?

In WordPress, shortcode is a powerful feature that allows you to add dynamic content or functionality to your website. When WordPress encounters a shortcode in a post or page, it replaces it with the corresponding output. For example, you can create a shortcode to display a contact form or to embed a YouTube video.

Creating a Simple Shortcode

To create a shortcode in WordPress, you need to define a function that generates the output for the shortcode. Let’s start with a basic example. Suppose you want to create a shortcode that displays a welcome message. Open your theme’s functions.php file (Appearance > Theme File Editor > Theme Functions) and add the following code: 

function welcome_message_shortcode()
{
  return "Welcome to my website!";
}

add_shortcode( 'welcome', 'welcome_message_shortcode' );

In this example, we create a function called welcome_message_shortcode() that returns the desired welcome message. Then, we use the add_shortcode() function to register our shortcode. The first argument of add_shortcode() is the shortcode tag (in this case, ‘welcome’) and the second argument is the name of the function that generates the shortcode’s output.

Using Shortcodes in WordPress

Once you have defined a shortcode, you can easily use it in your posts, pages, or even in your theme files. To use the welcome shortcode from the previous example, simply insert [welcome] into your content. When WordPress encounters the shortcode, it will replace it with the output from the welcome_message_shortcode() function. 
[welcome]

Shortcode Attributes/Parameters

Shortcodes can also accept attributes/parameters, which allow you to customize the output of the shortcode. Let’s extend our previous example to include an attribute that allows the user to specify their name. Update the welcome_message_shortcode() function as follows: 

function welcome_message_shortcode( $atts = [] )
{
  $name = isset( $atts['name'] ) ? $atts['name'] : 'Guest';

  return "Welcome, $name!";
}

Here, we modify the function to retrieve the name attribute from the $atts array. If the attribute is not provided, we default to ‘Guest’. Now, you can use the welcome shortcode with the name attribute. 

[welcome name="John"]

Enclosing Shortcodes

Enclosing content with a shortcode allows manipulations on the enclosed content.

function welcome_message_shortcode( $atts = [], $content = null )
{
  return $content;
}

[welcome]Welcome Friend![/welcome]

Specifying Defaults Using Function “shortcode_atts()”

function welcome_message_shortcode( $atts = [] )
{
  // Set default attribute values
  $defaults = [
      'greeting' => 'Welcome',
      'name' => 'Guest',
  ];

  // Merge user-defined attributes with default values
  $attributes = shortcode_atts( $defaults, $atts );

  // Use the attribute values in your shortcode output
  $output = "
{$attributes['greeting']}, {$attributes['name']}!
";

  return $output;
}

In this example, we define values for the attributes using an associative array $defaults. We then use the shortcode_atts() function to merge the user-defined attributes with the default values. This ensures that if a specific attribute is not provided by the user, it will fallback to the default value specified in the $defaults array.

Finally, we use the attribute values in the shortcode output, generating an HTML paragraph (<p>) with the specified greeting and name.

Tip: Attribute does not support camelCase variable, variable will be converted to lower case. For example: [shortcode myName='...'] becomes $atts['myname'].

Conclusion

WordPress shortcodes provide a convenient way to add dynamic content and functionality to your website. By creating and using shortcodes, you can save time and effort by reusing code snippets and generating dynamic output with ease.

Remember to always test your shortcodes and handle any potential errors or edge cases. With a little practice, you’ll be able to leverage the power of shortcodes to enhance your WordPress website.

Share: