{"id":10610,"date":"2015-07-05T11:00:31","date_gmt":"2015-07-05T16:00:31","guid":{"rendered":"https:\/\/getflywheel.com\/?p=10610"},"modified":"2024-10-02T14:17:30","modified_gmt":"2024-10-02T19:17:30","slug":"create-custom-shortcode-in-wordpress","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/create-custom-shortcode-in-wordpress\/","title":{"rendered":"How to Create your own Custom Shortcode in WordPress"},"content":{"rendered":"\n
Sometimes, no matter how cool your theme or how incredible the visual editing plugin you are using is, there is a feature you want that they just don\u2019t have. And the easiest way to add some really cool functionality into your site is with a shortcode.<\/p>\n\n\n\n
Today we’re going to walk you through an easy way to add shortcodes to your site. It doesn\u2019t involve editing your theme or functions.php file. Why? Because that just isn\u2019t portable enough. What if you write your shortcode and it\u2019s amazing, and you want to use it on other sites? Or sell it to make millions of dollars?<\/p>\n\n\n\n
The easy way to create portable code for use in WordPress is by creating your very own plugin. So today, you are going to learn how to write your own plugin that lets you create your own custom shortcode in WordPress.<\/p>\n\n\n\n
Here’s the code you’ll need:<\/p>\n\n\n\n
<?php\n\n\/*\n\n* Plugin Name: Your Plugin Name Here\n\n* Description: Tell Us What Your Shortcode Does\n\n* Version: 1.0\n\n* Author: Your Name\n\n* Author URI: Your URL<\/code><\/pre>\n\n\n\n
That was easy, right? Let\u2019s break it down.<\/p>\n\n\n\n
That first block that is all commented out is what WordPress uses to display shortcode information.<\/p>\n\n\n\n
Obviously, you are going to want to change all of those variables, except maybe starting at version 1.0. Then, there is the shortcode addition itself. This happens in two steps.<\/p>\n\n\n\n
Step 1: Create your function<\/strong><\/p>\n\n\n\n
function any_name_here(){\n\n\/\/ All your cool code here\n\n}<\/code><\/pre>\n\n\n\n
You\u2019ll want to pick a name for it. If this is going to be a \u2018single shortcode\u2019 plugin, maybe you want to name it the same as the plugin file. But, you could add hundreds of shortcodes to one plugin if you wanted, in which case you\u2019d just want to name it intuitively. What you name it really doesn\u2019t matter as it will only be referenced internally by the next bit.<\/p>\n\n\n\n
Step 2: Allow the function to be executed<\/strong><\/p>\n\n\n\n
That line says to execute the function we just wrote any_name_here<\/code> when we use the shortcode that looks like this [the_shortcode_text]<\/code>.<\/p>\n\n\n\n
Or, if we go back to the original full plugin code above, if you put [my_shortcode]<\/code> into a page like this:<\/p>\n\n\n\n<\/figure>\n\n\n\n
and you then view the page, you\u2019ll see the plugin in action:<\/p>\n\n\n\n<\/figure>\n\n\n\n
And this plugin actually<\/em> works. To install it, it should be in a folder. Create a folder called my_shortcode<\/code> and then save the following code into a file called my_shortcode.php<\/code>. Put the folder into a zip archive and upload it to a WordPress site using the default \u2018Add a Plugin\u2019 upload feature. Here’s what you’ll see:<\/p>\n\n\n\n<\/figure>\n\n\n\n
Beyond that, your imagination is the limit!<\/p>\n\n\n\n
![\"Screenshot](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2015\/06\/shortcode2.jpg\")
<\/figure>\n\n\n\n![\"screenshot](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2015\/06\/shortcode3.jpg\")
<\/figure>\n\n\n\n![\"Screenshot](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2015\/06\/shortcode1.jpg\")
<\/figure>\n\n\n\n