Web & Software Developer

How To Use a Shortcode in WordPress 5.0 and higher, The New WordPress Editor (Gutenberg)

If you’re using WordPress 5.0 or higher with the new WordPress editor, also known as Gutenberg, and you will use shortcodes a little differently than before. Instead of just pasting or typing the shortcode, the new Gutenberg WordPress editor requires 5 steps. (Yes, this seems very backwards.)

  1. First, click on the “plus” icon to add a block.

    Add Shortcode in Gutenberg Editor - Step 1

  2. A box will appear:

    Add Shortcode in Gutenberg Editor - Step 2

  3. Now, you can do either one of these two:
    • Where it says “Search for a block,” type sho to find the Shortcode icon.

      Add Shortcode in WordPress Gutenberg Editor - Step 3

    • Or, you can click on Blocks, then scroll down to the very bottom to find the Shortcode icon.

  4. Click on the shortcode icon. Then, the shortcode block will appear:

    Add Shortcode block in WordPress Gutenberg Editor - Step 4

  5. Paste or type a shortcode into the shortcode block. In this example, I typed the [birthreport] shortcode:

    Add Shortcode block in WordPress Gutenberg Editor - Step 5

Alternative Shortcut in Gutenberg Editor

When you’re creating or editing a page or post, you will see a few shortcut icons on the right side of the editor. Sometimes, the Shortcode icon will be one of these icons. In this case, you can add a shortcode much quicker.

  1. First, click on the Shortcode icon shortcut:

    Shortcode Shortcut in Gutenberg WordPress Editor

  2. Then, the shortcode block will appear and you can paste or type a shortcode just like in step 5 above.

By

Questions and Comments are Welcome

Your email address will not be published. All comments will be moderated.

Please wrap code in "code" bracket tags like this:

[code]

YOUR CODE HERE 

[/code]