How To Use a Shortcode In The WordPress Block Editor

Creating a WordPress block editor shortcode.

The WordPress block editor lets you create rich content without having to know how to code. However, rich content is also static, but you can add dynamic elements to it using shortcodes. You can add shortcodes to the editor to introduce new functionality and dynamic content. In this article, we will show you how to use a shortcode in the WordPress block editor. We will also give you some tips on using shortcodes in your content.

For the examples below, we will use the Contact Form 7 plugin, which uses shortcode functionality to embed contact forms on page content.

How To Create a Shortcode Block

To create a shortcode block, just follow these steps:

  1. Log into your WordPress dashboard
  2. Edit a post, page, or create new content
  3. Use the + sign to create a new block
    Plus sign to create block in Gutenberg
  4. Select Shortcode as the block

Now you have a shortcode block. From here, you can paste your shortcode content right into the box, and save your post or page.

A shortcode block

When you reload the page content, the shortcode will render as expected.

Create Shortcode Via Paste

Creating a shortcode block can be even easier. If you have your shortcode already copied to your clipboard, you can also paste it into a blank space in your post or page. This will automatically create the shortcode block.

Where to paste shortcode content

WordPress will detect that you have just pasted a shortcode. For example, to use the contact form shortcode as an example, as soon as you paste the code the form will appear automatically:

Shortcode appears after pasting

Learn More About Creating Shortcode

If you were wondering how you can create your own shortcode, then your best possible resource is the actual documentation from WordPress. The Shortcode API breaks down and shows you how to write your own shortcode.

There are also pages that you can use to generate your own shortcode that is created by third parties. These include:


Those are two simple ways to create a shortcode block in your WordPress block editor. Do you use shortcodes in your workflow? If so, what are some of the most useful applications you’ve found for them? If you have any comments or questions feel free to drop them below.

Learn more about using the features of the WordPress visual editor by going to our tutorials on WordPress Blocks.

Looking for more guides? We have over 400 WordPress How To Articles to help you!

CM
Christopher Maiorana Content Writer II

Christopher Maiorana joined the InMotion community team in 2015 and regularly dispenses tips and tricks in the Support Center, Community Q&A, and the InMotion Hosting Blog.

More Articles by Christopher

Comments

It looks like this article doesn't have any comments yet - you can be the first. If you have any comments or questions, start the conversation!

Was this article helpful? Let us know!