This video is part of our old WP eStore Course Go to our Updated WP eStore Course for current videos.
Welcome back to Part 2 of Lesson 5 of the Build Your Own E-Commerce Website Tutorial Series.
What are Shortcodes?
In this part of the lesson we’re going to discuss WP eStore shortcodes. So what are shortcodes? Shortcodes are a method of adding functionality to either the content or the sidebar area of a page or post. You will probably have seen examples of this already in other plugins such as Contact Form 7 where the way you insert a Contact Form is by inserting its shortcode. WP eStore makes very wide use of shortcodes for displaying information in different ways.
We can see an example of this if we go over to the demonstration site that I created for this lesson and that’s www.thesisestore.com. If you take a look at this you can see where in our WP eStore Catalog we’ve got all four product categories showing up here like this.
If we log in and go to that Product page, which is WP eStore Style Catalog, and we hit Edit, you can see that this is the shortcode, wp_eStore_list_categories_fancy. That right there is the shortcode and that’s all I’ve inserted in that page in order to make that display.
If we come back and look at this page again, these four items are there exclusively because of that shortcode. So that’s what we’re going to learn about here in today’s lesson.
Cheat Sheet of the WP eStore Shortcodes
Before we get started I’ve made a cheat sheet of the WordPress eStore shortcodes. But if you come back over to this Lesson 5 page you’ll see that under Lesson Resources I have the Download WP eStore Shortcodes ‘Cheat Sheet’. If you click on that you’ll get a PDF file that is my listing and categorization of all of the shortcodes that are available at the moment.
At their site you’ll see that they have two cheat sheets but in my opinion they’re not very well organized and it’s not clear what’s what. So I’ve taken their two cheat sheets and combined them into this one and organized them in a way that I thought was appropriate.
I have also made an Excel version of this and if you look down below the video that you’re watching here you’ll see a link to the Excel version of this. So if you don’t want to use the PDF you can certainly use the Excel version. This is a PDF file and its text is selectable so you can cut and paste the text out of here which was my intention.
What is a shortcode? Well a shortcode is specific to WordPress and it’s a means of inserting PHP functionality inside of text areas in WordPress and it was developed for plugin owners to be able to do exactly what we’re doing here which is being able to put some of their functionality inside of a page.
Anatomy of WP eStore Shortcode
Shortcode starts off with three things. It has an opening bracket, a closing bracket and a function call. In this case the function call is wp_estore_list_categories. But a shortcode can also include attributes. An attribute is separated from the function call by a space. In this case this the shortcode that displays a category with a stylish thumbnail image based on the category number. Here you’ve got the wp_estore_category_fancy and then it’s got the attribute.
If you put up here in this one nothing would happen because this particular function call is not designed to accept attributes. But this particular function call is designed to accept attributes and in fact you can see down here that there are some that have multiple attributes. For example, this is one where you want to have a customized button for a specific individual product. Here you can use this shortcode, you can use the product ID and then there’s another space and you can use the button attribute for that one.
What’s important to know is that generally speaking attributes are separated by spaces. You’ve got opening brace or bracket, the function call, a space, an attribute, a space and then you have a closing bracket. There’s an older style of this as well and we’ll see some of that older style here in some of the older shortcodes. Rather than having a space the shortcode ends with a colon and then immediately has the attribute and another colon and then a descriptor that says that this is the end of the shortcode. This is an older method of doing shortcodes but obviously the developer of WP eStore decided to maintain backward compatibility. Even though he’s using the newer versions elsewhere he has some of them that still have the old style of syntax. So you’re going to have to be mindful of the old syntax and the new syntax.
Fortunately you don’t actually have to remember any of this and you can just go ahead and cut – I mean this is what I do – I just cut and paste out of a file like this and then just edit the editable area. You’ll be doing the same thing.
WP eStore Shortcode Categories
The WP eStore shortcodes are divided up into five different categories. The first category is about how to display categories; the second is how to display products; the third is about how to display a shopping cart; the fourth one is how to display download buttons and finally, the last part has some miscellaneous information.
We probably won’t be going through the usage of these miscellaneous ones but once you have the hang of all the rest of it this should become pretty self explanatory. Rather than describing each of them now we’re going to take these each piece by piece in the subsequent parts of Lesson 5.