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.

   

2. A box will appear:

   

3. Now, you can do either one of these two:

   • Where it says “Search for a block,” type sho to find the Shortcode icon.

     

   • 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:

   

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

   

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:

   

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