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 6 – Ex. #4 – Make the Loop Shortcode Configurable

Difficulty Level -

Filed Under Topics - , , ,

Listed Under Lesson Subjects - ,

Applies to -

What you’re going to have to do in this situation is write a function for each one of these things you want to do for your Thesis theme website. If you want to do one for Apples and one for Bananas then you have to write another function for Bananas and create another shortcode. That’s actually not a very good practice, it gives you a lot more opportunity for error plus it gives a lot of extra code to maintain.

Shortcode Attributes

The codes are going to be identical, if you wanted one for Apples and one for Bananas except for the query variables. That’s what we’re going to do next. We’re going to take this and make this so that it’s flexible, so that you can change the query variables and use exactly the same shortcode for any number of list that you might want to use. We’ll copy this, paste it below, change the name to byob_flexible_thumbnail_grid_list. We’re going to use a feature of shortcodes called “attributes”.

Shortcodes can automatically take attributes and the automatic name of the variable that contains those attributes is $atts. Since this is going to rely on attributes that need to be passed to this function, we’re going to say, $atts. We’re going to pass the attributes to this function through this shortcode and what we need to do is extract those attributes.

Define the Attributes

The way we extract those attributes is with this function called extract and it is (shortcode_atts). What (shortcode_atts) does is it sets a default value for each attribute in the case no value has been defined. If a value has been defined, then it uses the defined value. This is really where you define the attributes. If we come over here to (shortcode_atts) and define the attributes and since this is going to have more than one attribute, we’re going to put that in an array.

The first element of that array, we’re going to give it a name of ‘category’. Again, this is a variable name so it doesn’t really matter what it is but we’re going to call it ‘category’. In the case the ‘category’ is not defined, we’re going to leave it blank. Then we’ll take the next part of our array and this one we’re going to call ‘show’.

In the case that ‘show’ is blank, we’re going to show 2 posts. We have (shortcode_atts) array is ‘category’, if there’s no category that can be blank, if there’s no ‘show’, it’s going to be 2. After that array, we’ll enter the variable name $atts. Actually, we might have made this clearer by simply saying $attributes = array then this.

It might have been easier to read the code, so $attributes = array then $atts here and we just put the variable name in here, $attributes. So the $attributes = array, the ‘category’ is going to be blank if there’s nothing and the post to show is going to be 2 if there’s nothing. If there is something in $atts, that is if there’s a value of ‘category’ or the value of ‘show’ inside of $atts, then it’s going to use that instead.

Define the Name of Variables

Instead of hard coding this, we’re going to put the name of those variables. We defined the name of those variables here, ‘category’ and ‘show’ so that’s what we’re going to put here, ‘category’ and instead of 6, it’s going to be ‘show’. Now, we’ve taken all the hard coding of these values out. We’re going to create a shortcode that has the attributes for ‘category’ and the attributes for ‘show’.

If there’s no definition for ‘category’ then it’ll stay blank, if there’s no definition for ‘show’ then the default will be 2. We’re extracting those values either out of $atts and we are placing them in these variables. We’re using those variables for our query arguments. If we save that and upload it, I feel like I’m being confusing in my description here but once you see it in action, I think you’ll understand what’s going on here.

Now, what we’re going to do is add our attributes so we type in category because that’s the name of this attribute, category=’cherries’ show=’6′. This should be byobftgl because it’s flexible_thumbnail_category_grid, update here, come back over and refresh this. Now, we have our 6 Cherries and if we come back over like this and paste another one and say ‘bananas’, show=’4′, hit update, refresh. See, I didn’t have to write a new code, all I had to do is change the attributes here.

Create Function to Define Attributes

In fact, I could come along here and give Bananas an h3 tag and update. Now, I’ve got a thing in the middle and I can have all kinds of content in here. I can do the next one here. If we leave out the category but we add ‘show’, it’s showing the latest 4 posts. If we add back in a new category called ‘oranges’ and show=’2′ and update, there it is.

What’s happening here is that this function that we created is defining two attributes, ‘category’ and ‘show’ and it’s looking for those in this $atts. This $atts is the automatic collection of attributes that get listed inside of the shortcode. It takes those, it assigns a value to those and that default value should be kicking in here.

In the absence of the $atts, the default value should act. If there is a definition in $atts, then that definition takes precedence and places those values as variables. We can place those variables then in our argument and it just changes up the query and asks if it starts at zero. No, it doesn’t start at zero in this case, this is a number of iterations that will start at 1 although you’re right to note that all array related elements start with zero as their first element.

Use Shortcodes Inside of a Text Widget

The last thing that I wanted to do is to make these shortcodes work inside of a text widget. We’ll come over here and do this in a text widget as well. We’re going to take this Oranges out of this, update it, come back over to Appearance and Widgets, then we’re going to take a text widget and paste the shortcode in the text widget, hit save, refresh. You can see all it’s doing is displaying the shortcode. That’s because shortcodes by default only work inside of content and we want the shortcode to work inside of the text widget.

What we need to do is add a filter to this. I’m actually going to place this up at the top of my functions file because this is a sort of big general thing. It’s add_filter(‘widget_text’) so it’s going to filter widget text then to that filter, it’s adding this command ‘do_shortcode’. Now, any shortcodes it finds inside of a text widget, it will execute. If we hit save to that document, upload it, come back over and refresh it. Now, you can see we have images showing up here.

You can do exactly the same thing with any shortcode. Any shortcode can now be executed inside of the text widget like my shortcode content widgets. You can use my shortcode content widgets to add loops of things in the middle of content or you can use the straight shortcode in the middle of a content if that works better for you. Once you can start using the shortcode inside of a text widget, really, the world is your oyster because you can put these loops anywhere.

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