How to Create WordPress Shortcodes: InDepth Tutorial

How to Create WordPress Shortcodes: In-Depth Tutorial | WPShout

This article is an in-depth WordPress shortcode tutorial. We cover what shortcodes are, when to use them, and how to register your own, with full-code custom shortcode examples.

WordPress shortcodes are a very handy tool to do one thing: get custom PHP code to display anywhere on your site.

Once you understand WordPress shortcodes, they’re an extremely handy and easy-to-use tool to do one thing: get custom PHP code of any kind to display anywhere on your site, from your post content to your sidebars to your headers and footers. Even with Gutenberg, the WordPress block editor, solidly established in WordPress core, shortcodes remain one of my favorite programmable tools in WordPress—even though Gutenberg is designed explicitly to make shortcodes obsolete.

So before we dive into the code,  let’s examine why WordPress shortcodes continue to be useful, even in a Gutenberg era.

Gutenblocks vs. Shortcodes: Comparison and Tradeoffs

If there’s one thing Gutenberg is designed to kill, it’s shortcodes.

Our WordPress shortcode examples need to grapple with one fact: if there’s one thing Gutenberg is designed to kill, it’s the use of WordPress shortcodes in content creation.

It’s not hard to see why. Quick, what does the following code, in your post editing screen, look like on the front end of your site?

How to Create WordPress Shortcodes: In-Depth Tutorial | WPShout 1

No idea. (That’s an actual shortcode here on WPShout, by the way.) The Gutenberg team use the disgusting but accurate term “mystery meat” for the exact kind of user experience that shortcodes give.

If “mystery meat” is the problem, Gutenberg’s live-previewing Blocks are the cure:

gutenberg vs shortcodes live table example

[…]

 



This article was written by Fred Meyer and originally published on WPShout.

Disclosure: Some of the links in this post are "affiliate links." This means if you click on the link and purchase the product, We may receive an affiliate commission.

Leave a Comment

You have to agree to the comment policy.

Show Your ❤️ Love! Like Us
Scroll to Top