Existing Recipe Site We’re Updating
I taught a seminar on how to make a recipe site using the Thesis 2 theme. And in that case, we used the Types plugin to create a custom post type called Recipe and to create a custom taxonomy called Meal Types.
When we did that, we also created a couple of pieces of custom post meta and those were the title of the recipe, the ingredients for the recipe and the cooking method of the recipe. Then I demonstrated how to add these custom post meta to the recipe using one of my boxes.
Use the BYOB Post Meta Fields Extended Box to Add Schema
What we’re going to do here is to take up where I left off in that seminar and we’re going to add the additional schema ability to this using an updated tool of mine, the Post Meta Fields Extended box. You’ll find this box on the menu under Member Benefits and Thesis 2.1 Boxes.
How to Add the Box
The Post Meta Fields Extended Box for Thesis 2.1 is one of my favorite boxes of all that I’ve created. You can download it here. You install that by going Manage Boxes, uploading it and downloading it. I’m going to come over here to where I have it and that is the post-meta-fields-extended-box. As of yesterday we’re in version 2.1.3. So save that box.
What the Box Does
What this box does is allows you to take already defined custom fields or custom post meta and insert them into the template.
Edit the Recipe Template
So what we’re going to do is come over to our Skin Editor here and go to our Recipe template and note how it’s using the post page box?
Add a Recipe Post Box
We’re going to create a new post box and we’ll call it Recipe Post Box. We’re going to add the Recipe schema to it after we’ve got it set up. Say okay to that and then we’ll shift+drag it into the post box. I am going to just drag all of these things out. Actually, I’m just going to drag the Post/Page Post Box out and drop it above.
Then come down and grab my Headline Area box that used to be there. Recipe post box and Byline post box. So I’ll shift+drag Byline into Headline Area, Headline Area into Post Box, Post Box into WP Loop.
Then I’m going to shift+drag Headline into Headline Area, Author into Byline, edit and then Date and Categories. So Date will go into Byline and Categories will go into Byline, Author, Date, Categories. We’ll save that and then we’re going to add some copies of this new box.
Using BYOB Post Meta Fields Extended Box
Let’s come down here to the BYOB Post Meta Fields Extended Box and add that box. I’m going to call this one Recipe Ingredients and what I have to do here is get the slug for the post meta that I’m using. So I can come over here and look at my custom fields list and I’ve got wpcf-recipe-ingredients so that’s the field I’m going to show.
Item Property: Ingredients
The item property I’m going to use is ingredients. I don’t need to use an item type because I’ve already got that handled. I don’t need to use the item scope field because that’s already handled as well. So all I really need to do for that is specify that it is the ingredients list.
I could add a little bit of HTML before or after but what I’m going to say is “what you see is what you get content” or WYSIWYG content. It doesn’t include a date and it doesn’t include a shortcode. I’m going to say okay and save it. Shift+drag that over into my Post Box and drop that down below the content.
Let’s save the template now and view the recipe. There is my ingredients list and I probably want to come over here and add some styling and headings. Say Ingredients and make that an h2 tag and update that. Now I have a section here for Ingredients.
Item Property: Instructions
Then the next thing I could do would be to add the method. So again, in the Skin Editor I’m going to create a new Post Meta Fields Extended box and we’ll say Recipe Method. We need the name of that post meta and that’s this.
Glen asked if I’m working on a custom post type. Yes, I am working in a custom post type. It is a custom post type called Recipes which I created in an earlier seminar on how to create a recipe style website. I’m just demonstrating how you can extend schema to that.
It doesn’t have to be a custom post type in order for you to take advantage of this but it just happens that’s what we’re doing.
So there is the custom field to be displayed. Then we’ll come over to schema, “steps to make the dish” and that’s recipeInstructions. So we will add that to the property. Since this is the complete set of instructions you could add the item scope and we could use this before the custom field content to add a heading automatically.
This could be an h2 and then directions. So now we’re adding that before the contents. It’s also WYSIWYG (What You See Is What You Get) content and we are going to wrap it in a div. Shift+drag Recipe Method to Post Box and then down to Ingredients.
Actually, this needs to be a div also. So we save that and now if we reload this, we’ve got Ingredients and Directions.
Glen asked didn’t I say to always use lowercase? Actually, what I said was, always do what exactly the way it is here. So if property has only one word it’s all lowercase but if it combines two words like cookingMethod then the first letter is lowercase and the first letter of the second word is uppercase. And it is very important. It has to be exactly like this in order for it to work properly.
Review the Changes
Now if we view our site, what we have is a div with the itemprop of ingredients and then we have our h2. I didn’t set the schema for this yet, isn’t that funny? Let’s come back over here to Post Box and schema is Recipe, reload that.
So that the post that has the item scope and item type of recipe wraps both the text and the ingredients and the recipeInstructions.
And this is one method, using this tool, that you can use to extend Thesis’ ability to use schema markup or to add other schema elements to a given post or page.