In this session we introduce the BYOB Thesis Simple Post Meta Fields Box. This box allows you to insert post meta fields in the output of your page or post. Use it to add text, images, links and HTML. We show an example of custom post meta in one of our Thesis 1.85 e-store example sites. Then we show how to create the post meta fields and style them in a Thesis 2 site.
I’ve created called a new box called the BYOB simple post meta fields box. And the purpose for this box is to be able to allow you to insert post meta fields in the output of your page or post. And I’m going to show you an example of this now here in this Thesis eStore.
First, we’re going to reactivate the Thesis 1.85 theme. Activate it and then look at one of the products. So here’s one of our product pages there. And this has a bunch of post meta in it. It’s got the price. It’s got the shipping. It’s got the name of the book’s author, the number of pages, the publication date. And I don’t think this stuff is actually post meta here.
Let’s just take a quick look at the custom file editor for a second. Let’s see, so it’s get post meta post id price part id true author shipping pages publication date. Okay and then this is a function that is added. So this, the Buy Now button is a function of WP eStore. It’s not a… I’m going to spit this out. It’s a function WP eStore. It is not a post meta.
So the post meta pieces are price, shipping, author, pages, and publication date. And if we edit the post and scroll down here, down to this custom fields section, you can see it does have an author. This is the name of custom field. This is the value of the custom field. This custom field is what we mean by post meta. Post meta is all these custom fields are post meta. And what you’ll be able to do with this box is enter the name of the post meta field and it will display the result on the post.
So if we come back over here to Appearance and Themes and we are going to reactivate Thesis 2.02. And then we’re going to come over to the… well actually, if we just refresh this page, you can see none of that stuff is here anymore, right? Now it’s just the title and some meta and the content and that’s it.
So what we’re going to do is install a box. So we come over to select boxes and select upload box and choose the box file. And you’ll be able to download this from my site here soon. Simple post meta fields, add that box and then select it and say save boxes. If it’s not selected, it’s not activated essentially.
And then we come over here to skin editor and then what we’re going to do is we’ll go to a single post because that’s what that is. Just come over to our single post and we come over to our add boxes. And you see down here, there’s this BYOB Simple Post meta field box and I’m going to say author. Add the box and I think I’m going to add another one and we’re going to say price. Add the box and then… let’s just go to edit post again just to make sure we have the exact name. You have to have the exact name of this thing just right. Yeah so it is author and price.
And so we’ll start by shift dragging that up into the content area. And actually, what I really want it to be is I really want price to be… let’s see, directly below the headline so select this. I’m going to gie it a span tag and I’m going to give it an HTML class of author… well, author name. And then this is where you put the name of the post meta field. And so it was author… actually, this is price. Pardon me… isn’t it? Let’s just call that price. And I think we’ll do the same thing with author. Here, we’ll make it a p author name, author. If we save our template and we come back over and view our post, now the price is shown here and the author is shown here.
And we can easily now style that. Say, come over to CSS, go to a custom package single element style and the selector will be .price. And then our font setting, let’s make our font size 18 px and let’s make it red or orange. Paste that there, save the CSS and refresh it. Is it in the right place? I was not. I did this in the wrong skin. Over here, go to CSS, single element style. Add the package, price, price… and now our price should be big and red.
So this is a very simple way for you to add information like you know, price or author or something else of custom post meta to this.