Build Your Own Business Website header image

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Lesson 14 – Part 4 – Ex. #2 – Create a Shortcode for the List

Difficulty Level -

Filed Under Topics - , , , , ,

Listed Under Lesson Subjects -

Applies to -

For the first couple of years I programmed in the Thesis theme, this is how I did it. I did an add_action, I hooked it to a Thesis hook and went on my way. But it would be way better rather than having to add this way after the content if I was able to create a shortcode to place this inside the content similar to what I showed you with my Seminars page.

What we’re going to do here is comment out this add_action, copy this function and I want to show how to create a shortcode out of this to use. Instead of simple_teaser_list, it’ll be shortcode_teaser_list. Now we don’t have to check to see if it’s the right page anymore because it’s only going to show up when we put the shortcode in. However, we need to understand how shortcodes work.

Understanding How Shortcodes Work

A shortcode is a means of executing a function inside of the post content. By executing a function, I mean executing a PHP function or a WordPress function. Because you can’t just enter PHP code into your content and have it do anything, the shortcode stands in for that and you can create a function, write all the logic then define a shortcode that runs through that.

Now, a shortcode needs to return some content. It can’t just process but it actually has to return something. If we created a shortcode for this, it wouldn’t work as it sits here because we haven’t defined content to be returned.

Defining Content

The way we define content is by creating a variable. I will call it fish sticks although I usually call it content. Doesn’t matter what you call it, it’s just a variable, $fish_sticks = thesis_teaser. Actually, we want a concatenation, not just an equal but we want to keep on adding information, not replacing that information. So $fish_sticks .= thesis_teaser and each time we get a new teaser, it’s going to be added to fish_sticks as it goes to the loop, fish_sticks gets longer and longer.

Once we have our fish_sticks defined, we need to return fish_sticks so we use the PHP action, return $fish_sticks. Now, we have put the data in a context that the shortcode can work. The shortcode needs something to be returned in order for it to work so we’re going to put the teasers into a variable called $fish_sticks and we’re going to return the variable.

Add Shortcode Function

Now, what we have to do is create the shortcode. Creating a shortcode relies on the add_shortcode function, that’s this function right here and it gets the tag name and the function name. The tag name is the characters that you’re going to use when you call the shortcode and the function is the function name that’s actually being called. We go ahead and copy this, come back over here and paste that.

Now, in the place of tag, I’m going to say, byob_shortcode_teaser_list so, byobstl. In the place of function, I’m going to place the name of this function. This is what I’m going to be entering as my shortcode in the content and when that happens, this is the function that’s going to be called when it sees that shortcode and this function relates to this function. This is very much like an add_action or an add_filter and what we’re doing is when it sees this shortcode, it’ll execute this function. We’re going to save that, upload it and look at the result.

Obviously there is no result because I detached the other function by commenting out its add_action and I haven’t placed the shortcode in here yet. The shortcode in this case then is, [byobstl]. It’s an opening square bracket, the shortcode and the closing square bracket, that’s what makes up the shortcode in this case. If we hit update and view the page, now we have all 6 posts being displayed here and they’re all Apple posts.

Notice something I didn’t warn you that I was doing was I’ve created a bit of custom.css so that these things stack one wide. That custom.css in this case looks just like this, it was .custom.carosel .format_text .teaser and I said float:none; width:100%; and reduce the font size. That makes it look nice for the purpose of this lesson. That’s actually not what it looked like before that.

HTML Output

Once this HTML is output on the page, then you can style it as you see fit. Those are exercises 1 and 2. We can come along with this and we can put that shortcode on as many pages as we want and it will keep on generating this list exactly as it is.

Now, you may not have noticed but something funny happened here. That funny thing is that the actual content part of the content ended up at the bottom. You can see the content here, this demonstrates putting a secondary loop of a single category on a static page. I’ve got my shortcode but the way it displays is it puts all the shortcode content first and puts that content last.

The reason for that is as a problem that various WordPress functions have. A whole bunch of WordPress functions are designed to immediately write information to the content or they’re designed to immediately output their information. That happens because shortcodes are processed before the rest of the content and because these functions tell the shortcode to print it right away in advance of all of the rest of the content.

Output Control Using PHP Function

What we have to do is stop PHP from outputting these things that would automatically be output and store it in a buffer until we’ve gathered all of our information and place all that buffered information into a variable then return that information. We’re using the PHP function, it’s really an output control and we’re going to use ob_start. That’s going to turn on output buffering which essentially means that captures all of the output and stores it in a buffer until you stop capturing it.

Place Teaser Into the Output Buffer

We’re going to come up here before the while loop, we’re going to stop the output and start placing it in a buffer. We’re going to say, ob_start and once we get through the loop at the end of our while statement, we want to capture all of the information in ob_start. We don’t need to put the teaser in this variable because the teaser will go into the output buffer so we’re going to take that away. Now, it’s just going to process the Thesis teasers.

I will put variable equal to the buffer and it’s ob_get_contents. This PHP function gets the content of the buffer that we started here and places it in the variable $fish_sticks so $fish_sticks now equals the value of this buffer then we’re going to stop the buffer. We’re going to say, ob_end, that stops the buffer then clean which just cleans this out.

So we rev up our buffer, we put the content of our loop inside of this buffer, we put the content of the buffer inside of this variable then we killed the buffer and cleaned it up. Now, we’re going to come back and return the value of this variable. That’s going to arrange all of these the way we want it to be arranged. We upload that, we come back and look at our thing here and refresh it.

We start up at the top and here it is, this demonstrates putting a secondary loop of a single category on a static page. Hit update, refresh that, get all the way down here and here’s some closing content. This is outputting its information in the middle of the content wherever we may happen to wish it to be. Imagine you can start seeing how this can be used in a magazine style site now because you can begin to inside the content, insert as many of these loops as you want.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one