WordPress shortcodes might feel like a relic from history, but Gutenberg block’s latest technology makes utilizing shortcodes easier than ever. Read on to quickly learn how to use the WordPress Classic editor’s shortcodes by making use of the Gutenberg shortcode block.
What are WordPress shortcodes?
Shortcodes were built to take out the manual management of particular features on your website. For instance, if you wanted to display the most recent posts added to your website, it would be a lot of work to add, revise, and update your data regularly to ensure accuracy. That’s where shortcodes come in—they can do this for you.
Shortcodes are a small piece of code, indicated by [brackets], that can can manage specific functions without your input. WordPress shortcodes can be used on pages, posts, and other content types.
In essence, shortcodes are a shortcut to displaying dynamic, changing content on your webpage. And as soon as you learn how to use a Gutenberg shortcode block, you’ll realize you’ve uncovered a shortcut to a shortcut!
4 Steps to Use the Shortcode Gutenberg Block
1. Find the shortcode for the plugin function.
You will want to have the shortcode for the dynamic content on hand and ready to go. In this video, I crosscheck a Ninja Forms article to confirm that their shortcode is [ninja_forms id=1]. You will want to have the relevant information handy for your target content!
2. Search “Shortcode” when adding a new block to Gutenberg.
Surprise, surprise, there is a dedicated Gutenberg block for shortcodes! It can be found by manually searching “shortcode” when adding a new block.
3. Paste the shortcode into the box.
All it takes is a quick Command / Ctrl + V and voila. Be sure to copy and paste all elements of the shortcode, including the brackets (they’re essential). Save your draft and select preview to see if it is firing correctly.
4. Pro tip: You can do this in a Gutenberg paragraph block, too.
If you prefer to insert your WordPress shortcode directly into a Gutenberg paragraph block, go for it! So long as you maintain all of the elements, your shortcode should still fire correctly, with or without the dedicated Gutenberg shortcode block.
Video Transcript
This is going to be a quick summary about what we call shortcodes in WordPress, plus how you can use shortcodes in the Gutenberg AKA Block editing. First, I need to give a quick history if you’re new to all of this.
Before we had this cool block editor where I could do a nice thing like click here and be like, oh I want this cool Ninja Form in, then select the form I’ve already got to put it in there, we used to have to use this kind of antiquated technology called a shortcode.
The way a shortcode worked is that I put square brackets into the text of my post somewhere, I’ve approximated it here with this p tag, and then I might have to pass on some other parameters to that short code. What would happen in the background is that I would have a plugin that would had registered this “David’s coffee price” shortcode and it would, say, calculate the cost of coffee today on Amazon, and pull that data back and show it in this article. This happens rather than me, as the editor of this site, having to manually maintain this data daily by typing it in every day.
A WordPress shortcode could manage the whole thing.
That history out of the way, like I mentioned, today, you’d expect that there might be a shortcode already that I write and there is plenty of reasons that that is the best thing to do is to create a whole new block. If you’re a developer, making a new block is the right thing, but if you’re not, you might still need to use the shortcode for a bunch of reasons.
And, surprise surprise, there is a Gutenberg shortcode block in WordPress!
What I would do is put in there something like, “David’s Coffee Price,” and since this is a made up-shortcode that I’m using, so we won’t see this work here, but this is the basic concept that’s going on when I talk about this. So, I’m going to quickly write, “Coffee Price Calculator.” I’m going to quickly save this post and then we can see how it behaves. And we’ll see that because there isn’t a shortcode here, neither in my content nor down here, did it fix it, so let’s use something else.
We do have a Ninja Form on this site, and Ninja Forms supports this as well. Ninja Forms shortcode looks like this: [ninja_underscore id=1].
So that’s exactly how you’d write it in a classic shortcode. We can change it up here so we can test: Can we put a shortcode manually in a paragraph like we used to in the old days, when the whole of the article was effectively a Gutenberg paragraph?
So if I save both of those, we can see which of either of these replace the content. And what we discover here is that we got three contact forms, so that tells us two important lessons:
- The Ninja Form shortcode injector works fine. Great!
- I can also tell that I can both put a shortcode inside of a paragraph block and WordPress takes care of that for me, or I can use the special shortcode block and that works. I know all of this to be true because when I go and look at my post in the preview I see three different iterations of my contact form.
Contact forms were one of the canonical cases where someone new to learning WordPress in the bad old days had to understand what a shortcode was, we’ve now rounded that away and saw that Ninjaforms contains that block—but if you’re a developer yourself or someone a developer has handed you a plugin they made sometime in the past and say “There’s a shortcode in here.” That is what this means.
Square brackets added to a paragraph block, a shortcode block, or ideally, using the new Gutenberg shortcode block that they have built-in their plugin. That is how shortcodes in Gutenberg work. Cheers!
Keep reading the article at WPShout. The article was originally written by David Hayes on 2020-04-30 12:11:17.
The article was hand-picked and curated for you by the Editorial Team of WP Archives.