By definition, a shortcode is a WordPress-specific code that allows you to simply embed files or create objects that normally require extensive back-end code. The code can be embedded with just one line of code, making it an easy way to display complex information.
Shortcodes are an excellent way for developers to create components and allow their end-users to easily display them on their websites. In this post, I will explain how to create a simple shortcode based on a real-world example I recently created.
How to Create a Simple Shortcode
Step 1: Determine if creating a shortcode is the best approach
Recently, I was tasked with creating a call to action. I’ve created multiple call-to-actions for our blogs and usually, they are statically placed in the footer, sidebar, or are simple images. Knowing this new CTA would require extensive code due to the placement and positioning per blog post, I decided to create a shortcode. Doing so would allow the person creating the blog post to easily drop in one line of code to bring in the call to action.
Step 2: Setting up file and directory structure
It’s very important to keep your file and directory structure neat and organized. Everyone has their own specific way to keep doing this, but here’s how I like to do it.
Navigate to your theme folder: ‘/wp-content/themes/mytheme”. From here I created a new folder named “shortcodes”. Inside this folder is where I like to keep the template files for my shortcodes.
To create the shortcode, we will also need to add code to our functions.php file. My personal preference is not to overload the functions.php file but to create a subfolder named library that contains multiple sub-functions.php files. From the functions.php file, I call on the sub-files using ‘require_once ( ‘library/my-sub-file.php’ );. Therefore I created a sub-file in my library folder named shortcodes.php.
The shortcodes.php file is where I will write the function for the shortcode. The template file for the shortcode will be within the shortcodes folder, named something relative to the project.
Step 3: Time to code
Let’s first start by creating the function inside of our shortcodes.php function file.
Our code will look like this:
The function defines where the template file is: ‘shortcodes/test-cta’. This will point to our template file ‘/shortcodes/test-cta.php’. The function also declares what our shortcode name will be, which will be: [test-cta].
You can read more about creating more complex shortcode functions using the shortcodes API within the WordPress Codex.
Now we need to create our template file so that when the end-user drops in the code [test-cta], it has something to pull in. We navigate to our test-cta.php file and since this is essentially just a template file, we can use HTML and PHP inside of it. For this specific example, let’s say we are creating the call-to-action to be a blog sign-up form. Your code may look something like this:
Now every time the shortcode [test-cta] is dropped into a blog post, it will pull in everything from your test-cta.php file.
This was just a very basic example. You can get really creative and complex with shortcodes to be used for multiple reasons. I’ve seen them used to pull in videos, create easy-to-use grid systems, sliders, and many more.
