By definition, a shortcode is a WordPress specific code which 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 website. In this post, I will explain how to create a simple shortcode based off of 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 do 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 here: https://codex.wordpress.org/Shortcode_API .
Now we need to create our template file so 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.