WordPress Shortcodes – A Complete Guide For Beginners

Looking to make your WordPress posts and pages more interactive and visually appealing? WordPress Shortcodes are here to make your life easier. These handy snippets of code allow you to add various functionalities and design elements without the need for advanced coding skills.

In this blog post, I’ll cover everything you need to know about WordPress shortcodes. First, we’ll start by exploring the default WordPress shortcodes and how to add them. Next, we’ll delve into how to use shortcodes in various parts of your website, including posts, pages, widgets, and even theme files.

Also, I’ll guide you through creating your own custom shortcode in WordPress, allowing you to customize your website’s design and functionality to your exact needs. Finally, we’ll compare shortcodes to Gutenberg blocks, another popular way of adding custom elements to your website.

So, let’s delve in!

WordPress Shortcodes: An Overview

WordPress shortcodes are a powerful and versatile feature that lets you add dynamic content and functionality to your website without needing any coding skills. Shortcodes are essentially small code snippets that you can insert into your posts, pages, widgets, or theme files to display a specific function or content.

Using shortcodes greatly enhances the user experience by providing easy-to-use features such as buttons, forms, galleries, and much more. Additionally, they can also improve your website’s SEO by making your content more interactive and engaging for your visitors.

Streamline Your Development-Workflow With a Featured-Pack Solution

Join 11,000+ satisfied web developers & experience seamless web hosting with Cloudways—no more management hassles.

WordPress Shortcodes: Pros & Cons

Now that you’ve an idea of WordPress shortcodes, let’s quickly go through their pros and cons before diving into the how-to part.

Pros of WordPress Shortcodes

• Time-saving: They help you add complex functionality without manual coding.
• Customizable: Shortcodes can be customized to fit specific needs.
• User-friendly: They are easy to use and can be added to any WordPress post or page without requiring advanced coding skills.
• Compatibility: They are compatible with a wide range of plugins and themes. So, in most of the cases, you are free to choose any WordPress theme or plugin.

Cons of WordPress Shortcodes

• Dependency: Over-reliance on shortcodes can cause issues if the plugin or theme is not updated.
• Compatibility issues: Some shortcodes may not be compatible with all WordPress themes and plugins.
• Learning curve: A basic understanding of how to use and customize shortcodes is necessary.
• Security: Shortcodes must be properly sanitized and validated to avoid security vulnerabilities.

WordPress shortcodes provide a convenient solution for enhancing your site’s functionality and design.

However, it is important to use them judiciously to avoid dependency issues, compatibility problems, and potential security vulnerabilities.

Let’s learn more about the default WordPress shortcodes in the next heading.

The Default WordPress Shortcodes

WordPress includes six default built-in shortcodes that make it easy to add functionality to your pages and posts:

• [audio]: Add audio files to your pages or posts.
• [caption]: Add a caption to an image or video.
• [embed]: Set the width and height of an embedded item.
• [gallery]: Create a photo gallery using images.
• [video]: Add videos to your pages or posts.
• [playlist]: Display audio or video files in a post.

List of Some Useful Shortcodes With Functions (Table)

Below is a list of some useful shortcodes in WordPress along with their functions:

Function	Practical Usage
[audio]	[audio src=”#”]
[caption]	[caption width=“450“]< img src=”#”/> Image [/caption]
[embed]	[embed width=”450″ height=”320″]
[gallery]	[gallery id=”32″]
[video]	[video src=”#”]
[playlist]	[playlist type =”video”]
[wpforms]	[wpforms id=”10″]
[soliloquy]	[soliloquy id=”578″]

How to Add WordPress Shortcodes (5 Easy Methods)

Adding WordPress shortcodes is easy and can be done using five different methods. These methods include adding shortcodes to posts or pages directly, using the text widget, creating a shortcode plugin, adding shortcodes to your theme’s functions.php file, and using a shortcode builder plugin.

How to Add Shortcodes in WordPress Posts & Pages

Here’s how you can easily add shortcodes in WordPress posts & pages:

• Go to your post/page editor and search for “Shortcode.”

• If you are using Gutenberg, search for shortcode in the block section and add it to your page or post.

• Paste the shortcode in the respective field where you want to display it.
• I’ve added the WP Forms Shortcode to add the contact form.

• Preview your post or page to check if the shortcode is working.

• You can follow similar steps for any page builder. For example, in Elementor, search for Shortcode in the Element section and drag & drop it to your desired fold.

How to Add Shortcodes in WordPress Widgets

Here are the steps to add a WordPress shortcode in a widget:

• Go to your WordPress Dashboard and navigate to Appearance > Widgets.
• Click the “+” icon to browse all available widget options and search for the Shortcode widget.

• Add your shortcode to the field and Update your widget section. For this tutorial purpose, I’m adding the WP Forms shortcode.

• Preview your site to ensure that the shortcode is displaying properly in the widget area.

How to Add Shortcodes in WordPress Classic Editor

The WordPress Classic Edtior is still widely used for post and page editing in WordPress. And adding a shortcode in the Classic Editor is quite easy and can be done by following the easy steps below:

• Open the WordPress Classic Editor by navigating to the post/page you want to edit and selecting “Classic Editor” from the editing options.
• Create a new post/page or edit an existing one where you want to add the shortcode.
• Locate the area where you want to add the shortcode simply type it there.

• Save the changes you made to the post/page and then preview it to see if the shortcode is working properly.

How to Add Shortcodes in WordPress Theme Files

Here are the steps to add shortcodes in WordPress theme files:

For example, I want to add a Shortcode for all 404 pages (when someone tries to access not exist pages).

• Go to WordPress Dashboard > Appearance > Theme File Editor.

• Select the files section where you want to add the shortcode. For example, 404.php for all 404 error pages.
• Paste the shortcode within the selected file. For example:

<?php echo do_shortcode("[wpforms id="8"]"); ?>

• Save the changes and preview the output result.
• Here’s the output result you will get when someone tries to access non-existing pages.

How to Create Your Own Custom Shortcode in WordPress

Creating a custom shortcode in WordPress can seem like a daunting task, as it typically involves creating a new plugin. However, with proper preparation and care, the process can be streamlined and relatively painless.

I’d recommend to create a backup or work in a staging site to easily revert to a previous version if something goes wrong during the shortcode creation process.

Elevate Your WordPress Dev-Game with Cloudways Hosting

Don’t settle for lackluster WordPress hosting, holding back your development workflow. Upgrade to Cloudways and enjoy lightning-fast speeds, free staging, and deploy web apps with ease.

Create a Custom Plugin

Here are the steps to create a custom shortcode in WordPress:

• Create a custom plugin for your shortcode by accessing your server/site via FTP Client like FileZilla.
• Navigate to wp-content Folder > plugins > and create a new directory.
• Name the directory after your plugin, for example: subscribe-shortcode.

• Open your plugin folder and create a new PHP file with a name of your choice, such as my-shortcode.php.

• Click view/edit the PHP file and open the local file.
• Paste the plugin header code and save it by pressing “ctrl+s”. The code should look like the following:

<?php

/*

 * Plugin Name:       Subscribe Shosrtcode

 * Plugin URI:        https://cloudways.com/en/

 * Description:       This plugin is for a testing purpose.

 * Version:           1.0.0

 * Requires at least: 5.3

 * Requires PHP:      7.4

 * Author:            Farhan Ayub

 * Author URI:        https://profiles.wordpress.org/farhanayub/

 * License:           GPL v2 or later

 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html

 * Update URI:        https://cloudways.com/en/

 * Text Domain:       my-basics-plugin

 * Domain Path:       /languages

 */

?>

• When you save the changes, a “File has changed” popup will appear on your FileZilla tool.
• Select “Finish editing and delete local file” and click Yes.

• Once the file has been updated, go to your WordPress Dashboard > Installed Plugin and Activate your new plugin.
• The plugin details should display the header fields, such as version, author name, etc.

Create a Custom WordPress Shortcode

You can also create a custom WordPress shortcode after activating your plugin. In this section, I will create a shortcode that allows users to subscribe the Cloudways YouTube Channel.

Here are the steps to create a custom WordPress shortcode:

• Open your PHP file (in this case: my-shortcode.php) and paste the following code:

add_shortcode( 'subscribe', 'cloudways_link' );

function cloudways_link(){

    return 'Subscribe Cloudways <a href="https://www.youtube.com/@Cloudways/featured?sub_confirmation=1">YouTube Channel</a>';

    }

add_action('init', 'cloudways_link');

• Let’s use the custom shortcode in your post. Since we set our shortcode’s name as “subscribe”, call it out with brackets like this: [subscribe].

• Update the changes and check the shortcode’s output.

• If the output appears on the post, that means the custom WordPress shortcode is working.

Shortcodes vs. Gutenberg Blocks

Shortcodes and Gutenberg blocks are both used in WordPress to enhance your site’s functionality. This section will compare both to highlight the key differences.

Shortcodes:

• Allows inserting dynamic content into WordPress pages and posts
• Created using square brackets with a keyword or function inside
• Requires basic coding knowledge
• Can be added to any page or post in the WordPress editor
• Can be reused on multiple pages or posts

Gutenberg Blocks:

• Allows creating dynamic content with drag-and-drop interface
• Offer more options and easy to use than shortcodes
• Can create complex layouts with ease
• Can be extended with custom blocks or plugins
• Require less technical knowledge than shortcodes

Shortcodes may require basic coding knowledge and offer limited visual customization. On the other hand, Gutenberg Blocks provide a more user-friendly approach with extended options for creating dynamic content.

To add a shortcode using Gutenberg blocks, simply select the “Shortcode” option and fill in the shortcode name in the designated field. This can be done easily without any coding knowledge, making it a convenient option for users who prefer a more visual approach to content creation.

Summary

WordPress shortcodes are a powerful tool that allows you to create dynamic content easily and quickly. Whether you’re a beginner or an experienced user, there are multiple ways to add them to your WordPress site. I have covered 5 easy methods in this blog. With Cloudways’ managed WordPress hosting you can easily create and manage shortcodes for your WordPress website.

While they may have some limitations, the benefits outweigh the drawbacks, especially when combined with the ease of use of Gutenberg blocks.

So, whether you’re looking to display a simple button or complex content, shortcodes are a fantastic way to enhance your WordPress site.

Give them a try and see how they can take your content to the next level!

FAQs

Q. Does WordPress have built-in shortcodes?

Yes, WordPress comes with 6 built-in shortcodes listed below:

• [audio]
• [caption]
• [embed]
• [gallery]
• [video]
• [playlist]

Q. Where are my shortcodes in WordPress?

You can find a WordPress plugin’s shortcodes by checking the plugin’s documentation in the WordPress dashboard.

Q. How to use default shortcodes in WordPress?

You can use the default shortcodes in WordPress in three ways: through Gutenberg block, Classic editor, or by code.

Q. What is the use of shortcodes in WordPress?

The purpose of shortcodes in WordPress is to add dynamic content and functions to your pages and posts.

×

Thankyou for Subscribing Us!