How to Add a Shortcode in WordPress (Beginner‘s Guide)

How to Add a Shortcode in WordPress (2024 Guide)

Are you looking to add more dynamic and interactive content to your WordPress website? Shortcodes provide a quick and easy way to insert specialized content like forms, galleries, buttons, and more anywhere on your site – no coding knowledge required!

In this expert guide, we‘ll teach you everything you need to know about shortcodes in WordPress. You‘ll learn what shortcodes are, why they are useful, and multiple methods for adding them to your posts, pages, widgets, and theme files. We‘ll also show you how to create your very own custom shortcodes.

Ready to become a shortcode master? Let‘s dive in!

What are WordPress Shortcodes (And Why Use Them)?

Shortcodes are special snippets that allow you to add dynamic content or run custom code in your WordPress posts, pages, and widgets. They are enclosed in square brackets like this:

Think of them as shortcuts for embedding feature-rich content on your site, without having to write any complex code.

Shortcodes were introduced to make life easier for WordPress users. See, WordPress intentionally limits the HTML tags you can add in post/page content as a security measure against malicious code. But this makes it tricky to embed things like forms, photo galleries, and other advanced elements.

That‘s where shortcodes come to the rescue! Many WordPress plugins and themes register their own shortcodes that you can use to easily add their features anywhere on your site. When WordPress sees the shortcode, it automatically runs the associated function and displays the output in your content.

The true power of shortcodes is their flexibility. You can place them anywhere in a post or page, in any widget area, and even directly in your theme template files. This allows you to put feature-rich content practically anywhere on your WordPress site.

Sold on using shortcodes in WordPress? Great! Next we‘ll show you exactly how to add them, step-by-step.

How to Add a Shortcode in the WordPress Block Editor

The block editor (aka Gutenberg) makes it incredibly simple to add shortcodes to your WordPress posts and pages. Here‘s how to do it:

1. Open up the post or page where you want to add the shortcode in the block editor.

2. Click the "+" button to add a new block wherever you want to place the shortcode.

3. Search for and select the "Shortcode" block.

4. Paste or type the shortcode you want to use into the block. The shortcode will typically be provided by the WordPress plugin or theme that you want to pull content from.

5. Click the "Preview" button to see how the shortcode output will look on the front end.

6. If you‘re happy with how it looks, click "Publish" or "Update" to make it live on your site.

That‘s all there is to it! Feel free to use the shortcode block multiple times in a post or page to embed dynamic content in different sections.

Using Shortcodes in the Classic WordPress Editor

If your WordPress site still uses the old classic TinyMCE editor, fear not – adding shortcodes is just as easy there too. Here‘s what you need to do:

1. Edit the post or page you want to add the shortcode to and place your cursor where you want it to appear in the content.

2. Paste the shortcode you want to use (e.g.

   Name(required)

   Email(required)

   Website

   Message

   Submit

   Δ

   ). Make sure it‘s on its own line and not mixed in with other text.

3. Preview the post/page to see how the embedded content looks. Make sure it appears in the right spot!

4. If all looks good, click "Publish" or "Update" to make it live.

Pro tip – you can switch between the "Visual" and "Code" views in the classic editor to see exactly where your shortcodes are placed in the HTML.

Placing a Shortcode in a Widget Area

Want to put a shortcode in your sidebar, footer, or another widget area? The process is very similar to adding one in the post/page editors:

1. Go to Appearance > Widgets in your WordPress dashboard.

2. Find the widget area where you want to add the shortcode (e.g. "Sidebar") and click the "+" button.

3. Search for and add the "Shortcode" widget block.

4. Paste your shortcode into the shortcode field.

5. Click "Update" to save the widget and publish the shortcode output on your site.

6. Visit your site‘s front end and you should see the shortcode content displayed in the widget area you selected.

Feel free to add multiple shortcode widgets and arrange them however you‘d like. It‘s an easy way to put dynamic content in your theme‘s widget areas.

Adding Shortcodes Directly in WordPress Theme Files

For more advanced users who are comfortable editing theme files, you can place shortcodes directly into your WordPress theme‘s template files. This is useful for putting complex elements like forms or listings in your theme‘s header, footer, or other areas.

To add a shortcode to a theme file:

1. Connect to your WordPress site using FTP/SFTP or open the file manager in your hosting control panel.

2. Navigate to the /wp-content/themes/ folder and open the folder for your current active theme.

3. Locate the template file where you want to add the shortcode (e.g. header.php, footer.php, page.php etc).

4. Download a copy of the file to your computer and open it in a text editor.

5. Paste the following code snippet where you want the shortcode output to appear:

<?php echo do_shortcode("[my-shortcode]"); ?>

Replace [my-shortcode] with the actual shortcode you want to use.

6. Save the edited file and upload it back to your theme folder, overwriting the original.

7. Visit your WordPress site and you should see the shortcode content displayed in the theme file you edited.

Be very careful when editing theme files directly as one mistake could bring down your whole site. Make sure to always keep a backup of the original file in case you need to restore it.

Create Your Own Custom Shortcodes

In addition to using shortcodes provided by plugins and themes, you can harness the power of shortcodes by creating your very own! This does require some basic PHP knowledge, but we‘ll walk you through a simple example.

Let‘s say you want to create a shortcode that displays an advertising banner in your posts. Here‘s a code snippet you can use:

function my_ad_shortcode() {
return ‘

‘;
}
add_shortcode(‘advertisement‘, ‘my_ad_shortcode‘);

Here‘s what this code does:

1. We define a new function called my_ad_shortcode() that returns the HTML code for our advertisement banner.

2. We use the built-in add_shortcode() function to register our function with WordPress and specify the shortcode tag as ‘advertisement‘. This tells WordPress to find and replace any instances of [advertisement] with the output of our function.

To use this code, you can either:

A) Paste it into your active theme‘s functions.php file
B) Create a small plugin with this code and install it on your site
C) Use a plugin like Code Snippets or WPCode to add the PHP snippet

Then, you can add the [advertisement] shortcode anywhere in your content to display the ad banner! You‘re free to modify the HTML/CSS in the shortcode function to customize how it looks.

The process is similar for any custom shortcode – write a PHP function that outputs what you want, then register it with add_shortcode(). The possibilities are endless!

Shortcodes vs Gutenberg Blocks – What‘s the Difference?

If you‘re familiar with WordPress 5.0+, you may be wondering how shortcodes differ from the new Gutenberg block system. While they share some similarities in dynamically embedding content, there are a few key differences:

Blocks provide a visual, user-friendly interface for adding all types of content to posts/pages. Instead of pasting a text shortcode, you add a dedicated block for things like forms, galleries, and other elements. Many blocks have settings you can configure in the editor sidebar.

Shortcodes are more multi-purpose in that you can add them in widgets, theme files, and other areas beyond just the post/page editor. They also tend to be quicker to implement.

There‘s a Shortcode block in Gutenberg that lets you embed shortcodes in your content. In this way, blocks and shortcodes can work together.

Some older plugins and themes may only provide shortcodes for their features, while newer ones often register their own custom blocks instead.

Neither one is inherently "better", they are just two different approaches to adding dynamic content in WordPress. Both have their place, and you‘ll likely find yourself using a combination of shortcodes and blocks.

Frequently Asked Questions About WordPress Shortcodes

Still have questions about using shortcodes? Here are answers to some common queries:

Are shortcodes safe to use?
Generally speaking, yes. Shortcodes provided by reputable plugins and themes are safe to use on your site. However, be cautious of adding shortcodes from unknown sources as they could potentially contain malicious code. Only use shortcodes from plugins/themes you trust.

What if a shortcode doesn‘t work?
First, double check that you‘ve spelled the shortcode correctly and included the proper square brackets. If it still doesn‘t work, the plugin or theme that provides the shortcode may not be active on your site. Try re-activating the plugin or switching to the theme that registered the shortcode.

How can I style the shortcode content?
Some shortcodes have parameters you can add to control the appearance (e.g. ), but for more control you‘ll need to add custom CSS. Use your browser‘s developer tools to inspect the shortcode HTML output and then target those classes/IDs in your stylesheet. You can also add inline styles to the shortcode output in your custom shortcode function.

Can I use shortcodes inside localized content?
Yes! You can place shortcodes inside text controlled by plugins like WPML, TranslatePress, and Polylang. The shortcode will still be processed even within the translated version of the content.

Unleash the Power of WordPress Shortcodes

Shortcodes are an incredibly versatile tool to have in your WordPress arsenal. With them, you can quickly add all sorts of dynamic content to your site without writing lengthy code.

Use them in your posts, pages, widgets, or directly in your theme files – the choice is yours! And if you can‘t find a shortcode that does what you need, you can flex your coding muscles and create your own.

Paired with the Gutenberg block editor, shortcodes give you ultimate flexibility to create rich, engaging WordPress content. Experiment with different shortcodes and see what you can create.

Now that you know how to use shortcodes in WordPress, put them to work on your site! Your visitors will appreciate the interactive elements they enable. Happy shortcode-ing!