WordPress Shortcodes Explained: Beginner to Advanced Guide

If you want to add dynamic content or functionality like gallery or audio to your site, use shortcodes. WordPress has several default shortcodes that you can use to add unique functionality to your site.

However, as a new user, it can be overwhelming for shortcode’s usability. Plus, WordPress only has a few default shortcodes, which means you have to create custom ones to expand your site’s capabilities.

In this guide, you will learn everything about WordPress shortcodes. From how to use shortcodes to how to create a custom one, we have covered everything. Let’s explore the details.

What are WordPress Shortcodes?

Shortcodes are small pieces of code enclosed in square brackets, such as [example_shortcode]. They work as a placeholder for complex functionality or dynamic content that you can insert into pages or posts.

For example, WordPress provides several built-in shortcodes to simplify content embedding:

• to wrap captions around content

• 

  
  
  to show image galleries
• to embed and play audio files
• to embed and play video files
• to display a collection of audio or video files
• to wrap embedded items

On the other hand, if you want more specific features, you can always create a custom shortcode. Simply create a custom function in your theme’s functions.php file, then register it using the add_shortcode() function.

Besides default and custom-created shortcodes, some plugins provide shortcodes to integrate their features into your site. For example:

• Contact Form 7: Uses [contact-form-7] to embed forms.
• WooCommerce: Shortcodes like [products] to display product listings.

Note: We have a comprehensive guide on WooCommerce shortcodes that you may find helpful.

How to Add WordPress Shortcodes (4 Easy Methods)

Now that you understand WordPress shortcodes, let’s see how to use them. We will use “[demoshortcode]” as an example to demonstrate the process.

1. How to Add Shortcodes in WordPress Posts & Pages

One of the most common use cases of shortcodes in WordPress is by inserting them into posts and pages. This allows you to add dynamic content, such as galleries or forms, without any coding.

Here is how to do it:

• Go to WordPress dashboard > Pages/Posts.
• Then choose Add New or edit an existing one.
• In the WordPress block editor, click the + button to add a new block.
• Search for the Shortcode block and click to add it.

• Paste your shortcode inside the block (e.g., [demoshortcode]).

• Click Publish or Update to save changes.

Your shortcode will now display dynamic content in the post or page.

2. How to Add Shortcodes in WordPress Widgets

Besides pages or posts, you can easily add shortcodes in widget areas like sidebars, footers, and custom widget sections. Here is how to do it:

• Navigate to WordPress dashboard > Appearance > Widgets.
• Click on the + button and search for the Shortcode widget.

• Paste your shortcode.

• Click Update to save changes.

After following the steps and saving the changes, visit your website to see the shortcode’s output in the widget area.

Note: Not every theme includes the widget areas. Depending on your currently active theme, you may not see this.

3. How to Add Shortcodes in WordPress Classic Editor

Instead of the latest block editor, if you are still using the classic editor, this section is for you. Here are the steps you need to follow to insert shortcodes into your content:

• Go to Posts or Pages in your WordPress dashboard.
• Click Add New or edit an existing post/page.
• In the content area, simply type or paste your shortcode (e.g., [demoshortcode].

• Click Publish or Update to save your changes.

Once you publish or update your page or post, now you can view the results of the shortcode on your live website.

4. How to Add Shortcodes in WordPress Theme Files

Adding shortcodes to theme files lets you apply dynamic content across your site automatically. It also allows shortcodes in the areas where the editor doesn’t work. Here is how to add shortcode in theme files:

Caution: Back up your site and use a child theme to prevent losing changes during updates.

• Go to Appearance > Theme File Editor in your WordPress dashboard.
• Select the theme file where you want to add the shortcode (e.g., page.php).
• Insert the following PHP code where you want the shortcode to appear:

<?php echo do_shortcode(‘[demoshortcode]’); ?>

• Click Update File to save changes. (In the code’s “[demoshortcode]” part, replace it with your actual shortcode.)

After saving the changes, visit your site to see the shortcode output in your selected theme area.

Note: By following the same approach, you can easily add default, custom, or plugin-generated shortcodes to your theme files.

If you are using a Divi website, you can easily add shortcodes by using modules. For an in-depth guide, you can follow our Divi Shortcode Guide.

How to Create Your Own Custom Shortcode in WordPress

A custom shortcode can be useful when you want to add unique features or content not available in default shortcodes or plugins. But before adding, you have to create a custom shortcode in the first place.

If you have basic knowledge of PHP, you can create a custom shortcode in many different ways. You can add the code directly to your theme’s functions.php / code injector file or even build a custom plugin

We will be using functions.php file’s approach to show you the process:

Step 1: Open the functions.php File

• Log in to your WordPress Dashboard.
• Go to Appearance > Theme File Editor.
• On the right side, find and click on functions.php.

Step 2: Create a Simple Custom Shortcode

Let’s create a simple shortcode that displays a custom greeting. Add the following code at the bottom of your functions.php file:

function custom_message_shortcode() {    return “Hello! This is a custom shortcode message.”;}add_shortcode(‘custom_message’, ‘custom_message_shortcode’);

Explanation of the above code:

• custom_message_shortcode(): Defines what the shortcode will display.
• add_shortcode(‘custom_message’, ‘custom_message_shortcode’);: Registers the [custom_message] shortcode in WordPress.

Step 3: Save and Upload Your functions.php File

Click “Update File” to save your changes.

Step 4: Use Your Custom Shortcode

Now that we have created the shortcode, let’s use it on your site.

• Open any post or page in WordPress.
• Add the following shortcode inside the content editor:

[custom_message]

• Click Publish/Update and preview the page.

Now you should see the message: “Hello! This is a custom shortcode message.” displayed on your page/post.

Step 5: Create a Custom Shortcode with Parameters

Shortcodes can also accept parameters (also called attributes). By adding parameters, you can allow users to customize the output without modifying the shortcode’s code.

This will be useful when you want to create a flexible shortcode that displays different content based on user input. Here is how to do it:

• Go to Appearance > Theme File Editor, and click on functions.php.
• Add the following code to the end of functions.php file:

function custom_message_shortcode($atts) {    $attributes = shortcode_atts(        array(‘text’ => ‘Hello, this is a default message!’),        $atts    );    return $attributes[‘text’];}add_shortcode(‘custom_message’, ‘custom_message_shortcode’);

Explanation of the code:

• This function defines a shortcode [custom_message] that displays a default message.
• The text attribute allows users to customize the message.
• If you don’t provide any attribute, it shows “Hello, this is a default message!”
• Now simply click “Update File” to save your changes. To display the default message, add “[custom_message]“ anywhere in your content.

However, if you want to display a custom message, you can use the text attribute like this:

[custom_message text=”Welcome to my website!”]

When you use this shortcode on your post or page, it will display the message “Welcome to my website!” instead of the default text.

Step 6: Create a Shortcode That Outputs HTML

Sometimes you may need to create a shortcode that lets you add interactive elements like buttons. And the best part is that you can easily generate HTML output directly within your shortcode function.

Here is how to do it:

• Add the following code to functions.php file’s end:

function custom_button_shortcode($atts) {    $attributes = shortcode_atts(        array(            ‘text’ => ‘Click Me’,            ‘url’ => ‘#’        ),        $atts    );    return ‘<a href=”‘ . esc_url($attributes[‘url’]) . ‘” class=”custom-button”>’ . esc_html($attributes[‘text’]) . ‘</a>’;}add_shortcode(‘custom_button’, ‘custom_button_shortcode’);

Explanation of the Code:

• The function custom_button_shortcode() creates a shortcode [custom_button].
• It accepts two attributes:
  • text: The button label (default: “Click Me”).
  • url: The button’s link (default: #).
• esc_url() ensures the URL is safe, and esc_html() prevents unwanted HTML injection.
• The function returns an <a> button with a CSS class (custom-button) for styling.
• Click the Update File in the Theme File Editor to apply the changes.

After saving the changes, you can use “[custom_button]” to display a button labeled “Click Me“. On the other hand, to create a button with a custom label and link, use:

[custom_button text=”Get Started” url=”https://example.com”]  

This will display a button labeled “Get Started” that links to https://example.com.

WordPress Shortcodes: Pros & Cons

Wp shortcodes make it easy to add dynamic content, but they have limitations. Here is a quick look at their pros and cons.

Pros of WordPress Shortcode

• Ease of Use: Shortcodes simplify adding complex functionality without requiring coding knowledge.
• Dynamic Content: They allow you to insert dynamic content that updates automatically.
• Reusability: Shortcodes can be used multiple times across different posts and pages.
• Custom Functionality: Developers can create custom shortcodes to implement unique features.

Cons of WordPress Shortcode

• Code Dependency: While easy to use, creating custom shortcodes requires PHP knowledge.
• Theme Dependency: Shortcodes can become unusable if the theme or plugin that defines them is deactivated or changed.
• Limited Customization: Shortcodes follow preset functions, restricting deep customization.

Shortcodes vs. Gutenberg Blocks

Here are shortcode and block’s key differences:

Features	Shortcodes	Gutenberg Blocks
Interface	Code-based	Visual, drag-and-drop
User Experience	Requires remembering shortcode tags	Intuitive, user-friendly
Visual Representation	No live preview in editor	Real-time visual preview
Ease of Use	Less user-friendly, requires more technical knowledge	Easier to use, especially for non-technical users
Customization	Primarily functionality-focused. Custom functionality requires PHP	Visual and functional customization within the editor
Content Creation	Adding functionality	Creating content and layout

Which One Should You Use?

• Go for shortcodes if you are using the Classic Editor or need to insert dynamic content in non-editable areas.
• Choose Gutenberg blocks for a modern, user-friendly, and future-proof experience.

Closing Thoughts

By now, you might have a great understanding of WordPress shortcodes.

You have learned what they are, how they work, and how to use them. For your convenience, we have also covered how to create custom shortcodes as well.

To provide you with a better understanding, we have included the pros and cons of WordPress shortcodes.

If you still have questions about WordPress shortcodes, feel free to leave a comment. Our expert team is always ready to help.