Web & Software Developer

How To Use a Shortcode in Gutenberg, The New WordPress Editor

If you’re using Gutenberg (the new WordPress editor), 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]