How to add shortcodes with Gutenberg editor?

The all new Gutenberg editor makes it easy to add shortcodes. Explore its functionalities to simplify your job!
It’s easy to add shortcodes with Gutenberg

WordPress has made Gutenberg its default editor to replace the classic editor Tiny MCE. Wondering what this weird name is? Tiny MCE is the previous name of the Classic editor when it was a plugin. Later WordPress made it a default editor and it acquired the name ‘Classic Editor’ in these many years. Now WordPress has replaced Gutenberg editor as the default one and left classic editor as a plugin. It is absolutely simple to add shortcodes or any other content on your site page.

Those who are acquainted with the old editor and are not in a mood to get adapted to the new one can use the old version as a plugin. Now we have this amazing editor whose functionality is all about blocks. Move the blocks and pick the apt ones to add content to your site in the easiest possible way. You can add headings, texts, images, gallery, videos, audiotapes, buttons, and their ‘Call to actions’, insert tables and so on. This drag and drop tool emphasizes ease of using in managing a page on WordPress sites.

What are shortcodes?

We will learn how to add shortcodes to the WordPress page on Gutenberg editor! Before diving deep into this, lets first understand what these codes are! As the name says, they are specific codes that enable you to do big things with little effort. In a way, it is a short cut in the coding business. For some frequently done activities, developers write shortcodes to facilitate users with ease. Users don’t have to use weird codes for repetitively done things and by installing shortcodes, those things are done with very little effort.

Plugins:

It is very easy to add shortcodes to your WordPress site’s pages for adding functionalities to it. Let’s take the example of a whatsapp plugin CLICK TO CHAT plugin. The plugin is used to contact the site visitors through WhatsApp. If this plugin is installed, a WhatsApp icon appears on your site. You can place the icon wherever you want it to be on your site on any number of pages.

If the user clicks on the icon, he/she can chat with your site’s representatives for business queries or support.  Chat, group chat and share are the available options. Also, the plugin enables the user to change the style of the icon that appears on the site. There are some pre-defined styles and you have codes for each of them. You can change the icon of the plugin whenever you want with the help of a shortcode. Programmers create these tiny codes when they install the plugin. We will demonstrate it to you with pictures.

How to add shortcodes?

Plus–>ShortCodes–>Write the shortcode in the box–>Save or Update–>Click on view post to view it on the page.

Since there is no mess up of content it is pretty easy to understand how to add shortcodes
Adding Shortcodes

Click on plus! Then click on Shortcodes!

Your plugin may offer few shortcodes. select the required one to add shortcode.
Select to add a shortcode

WordPress Gutenberg editor makes it easy to add shortcodes to WordPress pages. Hope this article explains the process in an easy-to-understand pattern. We have quoted the example of CLICK TO CHAT plugin. You can try this or any other shortcode. Not to forget that WordPress platforms have some default shortcodes also apart from plugin shortcodes. Use any shortcode for any plugin or the default ones on your WordPress site. Do share the pictures with us and the output functionality also.

Leave a Comment

Your email address will not be published. Required fields are marked *