How to Create Shortcodes in WordPress and Display Content from Custom Post Types

So, you want to do cool things in WordPress but have limited time (or perhaps know-how)?

No problem! Shortcodes to the rescue.

In this post, we’re going to walk through how to not only create shortcodes, but also how to use them to display content from custom post types.

Let’s get started!

///

What is a shortcode?

A shortcode is a WordPress-specific code that can do lots of nifty stuff, such as embed files or create objects that would normally require lots of complicated code.

The anatomy of a shortcode:

• formatted text tags that open and close with square brackets
• placed directly in a post or a page of your blog.
• automatically interpreted by WordPress so we can add features without having to program code

 

///

How do I get shortcodes initialized by WordPress?

When I want to get my shortcodes initialized by WordPress, I use the same little chunk of code. Every. single. time.

This code basically runs on “init,” which we can safely assume is really early in the whole process. This also makes the shortcode available site-wide.

I like to show the code visually since VSCode (Visual Studio Code) looks so much better than just plain text.*

*If you click on any of the code images, they will bring you to the Gist (a Gist is a GitHub repository) where you can copy the code, if you’d like.

—

The two parts to the add_shortcode function

The add_shortcode function has two parts:

1. The first one (“show-cows”) is what we will use in our shortcode on the website. It will look like every other simple shortcode you have seen out there in the wild: [show-cows].
2. The second part is the name of the fancy new function we are going to create. The code below shows us the super simple function that we created (see more in the video below). All this function is going to do is echo “I love cows” onto the screen wherever we have placed the shortcode.

 

—

Shortcodes need to “return” something

An important thing to keep in mind is that a shortcode needs to return something.

Very much like a filter hook, you cannot simply echo things out onto the screen. As we will see in the more complex example below, you can build up the contents of your variable (in this case “$html”) as you go through your function.

But at the end of the function, you will need to “return” whatever you have created.

—

To sum up: Three steps for simple shortcodes

So this is literally it for the simple shortcode:

1. You initialize it.
2. Add some content to your variable.
3. Return your variable.

 

Easy as pie! 🍰

///

Complex example: Custom Post Types

Let’s move on to a more complex example of using shortcodes, which is something I do on a very regular basis.

With most of the sites I build, there is a requirement for a Custom Post Type. (We have videos on how and why to create these, if you’re interested.)

In this example, we will:*

1. Gather our custom posts.
2. Extract the data we want from them.
3. Add that data to our variable.
4. “Return” our list of custom posts to the screen.

 

Essentially, we are creating our very own archive page, but without the limitations of relying on the defaults provided by WordPress or our theme.

*For lots of the nitty-gritty details of this function, I recommend watching the video. I can talk much faster than I can type!

In a nutshell, we’re doing the following:

1. Line 15 – We’re using get_posts to go and grab our “cows” custom posts.
2. Line 16 – The “-1” tells PHP to grab all of them.
3. Lines 21-24 – Then we create a foreach loop, and on lines 21-24, we gather all of our data. Lines 23-24 are ACF fields, and Lines 21-22 are standard WordPress items.
4. Line 26 – The important piece, covered in more detail in the video, is starting on line 26. We are “adding” more content to our variable by using the “.=” instead of a standard “=”. This allows us to continue adding to the contents of the variable.
5. Line 13 – So on line 13, we create a container (div).
6. Lines 21-31 – On lines 21-31, we loop through all our custom posts and add them to our variable.
7. Lines 34-36 – Then on line 34, we close our container and then return the whole shootin’ match on line 36.

 

One of the handy things about shortcodes is that once they are on the page (wherever you decide to place it on your site), you don’t really have to mess with it much at all.

• For example, if we decided to change “Special Talent:” on line 30 to “Special Skillz:”, we only have to make that change here in our functions.php file.
• The update will simply appear on the page.

 

///

Watch the training video ► How to Create Shortcodes in WordPress and Display Content from Custom Post Types

In case you’re more of a watch-er than a read-er, I put all of the stuff above into the video below!

---

Want to learn even more WordPress?

Check out our WordPress Training page!