Adding Shortcodes in Gutenberg

WordPress shortcodes allow users to execute code inside WordPress posts, pages, and widgets without writing any code directly. Gutenberg, the WordPress block editor introduced in WordPress 5.0, offers a dedicated block for shortcodes.

In this tutorial, we’ll guide you through the steps to add a shortcode in the Gutenberg block editor – let’s get started.

Prerequisites:

1. A WordPress site with the Gutenberg editor enabled.
2. An existing shortcode you want to add. If you don’t have one, there are numerous plugins available in the WordPress repository that provide various functionalities through shortcodes.

Step-by-Step Guide:

Step 1: Login to Your WordPress Dashboard

Begin by accessing your WordPress site’s backend. Enter your credentials to login to your WordPress dashboard.

Step 2: Navigate to the Post or Page Editor

• Click on ‘Posts’ or ‘Pages’ in the left-hand side menu of the dashboard.
• Choose the post or page where you want to add the shortcode. Alternatively, you can create a new post or page by clicking on the ‘Add New’ button.

Step 3: Open the Gutenberg Editor

Once inside the post or page, you’ll see the Gutenberg block editor. If you’ve used the Classic Editor previously, make sure you’re now in the Gutenberg interface.

Step 4: Adding a Shortcode

1. Click on the ‘+’ button, typically located in the top-left corner or in the body of the editor, to add a new block.
2. In the search bar that appears, type “shortcode”. The WordPress shortcode block should appear in the dropdown menu.
3. Click on the ‘Shortcode’ block to add it to your post or page.

Step 5: Enter Your Shortcode

Once the shortcode block is added, you’ll see an input field where you can enter your shortcode. For example, if your shortcode looks like [my_shortcode], simply paste or type it into this field.

Step 6: Preview or Publish

• After adding a shortcode, it’s always a good practice to preview your post or page to ensure the shortcode renders correctly. Click on the ‘Preview’ button to see a live preview.
• If everything looks good, click on the ‘Publish’ or ‘Update’ button to save your changes and make the post or page live.

Tips:

1. Some shortcodes may have attributes or parameters. Make sure to include them correctly when adding the shortcode.
2. If the shortcode isn’t rendering properly in the Gutenberg editor, it may still work correctly on the live site. Always check the live preview or the actual page.
3. If the shortcode doesn’t work at all, ensure that the plugin or theme providing the shortcode is active and compatible with your WordPress version.

Copyright ByRivers Tech LLC/ WP-Tutoring.Com All Rights Reserved.