This is the twenty first in a series of live lessons on using WordPress and Thesis as a Content Management System (CMS). In this lesson we take 4 custom post meta elements and add them to our catalog item type post display. We are adding “location”, “call number”, “ISBN” and “Publication Date” to the display of our custom post type. We add some HTML to structure the layout the way we want and then we add some custom css.
Rick: Okay and so then we’re going to go on to Part 21 of this and that is to add that custom post meta. Each of these things are post meta that we’ve created – location, call number, ISBN, publication date. What we’re going to do is we’re going to use that get post meta function that we used earlier.
And so, if we come back over here and we go to custom functions… and so, we have… let’s just go ahead and copy this function and this is going to be byob and what do we want to call that? We’ll call it catalog items data. We’ll call it that and then we’ll say if is single and now we are not going to do this. We’re going to go back to our get post meta so we’ll take the post meta from this morning and we’re going to just put it right here. We’re not getting subtitle though. What is the name of that post meta? Go down here to post meta.
So we’ve got barcode, call number, ISBN, and publication year. And so, if we look at our example, we want location and call number on the left and ISBN and publication date on the right. Let’s see, let’s come back to this. So call number… actually, location. We did location as a taxonomy. So actually, my mistake… we’re going to do a little bit of both of these things. So which is first? The first one is location, call number is 2nd, okay. So we come back to our… in here… let’s… so catalog items data and then here under our topic is location. And then do we have a little statement at the beginning of it? Actually, yeah. Let’s see and then the next thing we’re going to do is get our term or I’m sorry… get our post meta. And so we come back down here and let’s see, let’s put it right here. And it’s not… well actually you know, we could do our subtitle… I mean our post meta out of this in fact. That’s what we’ll do. We’ll get post meta…actually, we have 3 bits of post meta to get. And so, this is going to be byob call number and refresh my memory again…ISBN and publication year, okay. And so then call number here is call_number and this is ISBN and this one was publication_year. Let’s just double check that. Publication year, ISBN, and call number, okay.
So we’ve got those and now what we’re going to do is we’re going to take this one out because we don’t need that. And actually, what we’re going to do is first, we’re just going to echo the call number and then we’ll just do that 3 more times and the call number and ISBN and then publication year. So okay, it’s not going to look right from an HTML standpoint but it’s fine. And let’s upload it and let’s come back over to the box now and refresh this. Oh, I didn’t hook it properly, my mistake. I get all excited about this because this hook, it’s the right hook but it’s the wrong name. And so, we want to hook this here. Save it, upload it. You can see now where I say I do that file transfer thing thousands of times or hundreds of times a day. Not only do I do it because I make mistakes but then I also do it in very small increments. So okay, so we’ve listed under topics again, non-fiction and then audience and ISBN number and publication year. Something here is some place, I think. I just don’t see it. So let’s now get the HTML the way we want it and we are going to do that by… okay so it’s not going to say list in our topics. It’s going to say… let’s see, not filed under but… let’s see… can be found in… and that’s going to give the location. And then the next thing we’re going to do is we are going to say call number and the call number’s going to show up. And then we’re going to say on top of that, we’re going to do the same thing. We’re going to close this p tag and we’ll say ISBN and then one more time, publication date. And that should give us a straight up and down list of everything. So let’s try that and see. Refresh this, okay there we go.
So now I’ve got a list: can be found in non-fiction, call number 270 ISBN and publication date. Now what we need to do is we need to style this the way we want it style. Well, actually what we need to do is take this 2 pieces and put them over here. So that is a little bit more HTML and the way this works is we’re going to call this byob catalog items data, that’s the name of that class there. And then inside that class, we are going to… oops, pardon me. We’re going to add another class, div class equals byob left and then we’re going to close out byob left after we get to here. So right there, we’re going to close the div and then we’re going to create a new div… div class equals byob right and we’re going to add another closing div. So now what this has done is it essentially has given us one big box called catalog items data. Inside that box is 2 other boxes: there’s left and there’s right. And then what we’re going to do is tell these boxes what to do. So, when we’re done with that, we’re done with the Community Library Website for the day. Okay, so we’ve just uploaded that, now we’ll come back over to our site and we refresh this. Just to make sure it all worked properly… oh, well we have to upload it first, don’t we? And then we have to… we have to save it first, upload it second, test it third. I should have a little sticky in front of me to remind me of that.
Okay, so now what we need to do is come back over to our… let’s copy that again. Come back over to this and refresh it and let’s make sure…inspect the element. You can see we’ve got our catalog items data in the left and then down below that is a right. So now, we’re going to add a little bit of css to this. So there’s our topic list and then .byob… what do we want? Catalog items data… and then .byob left and I think all we have to do is say float left. Okay and then next, we’re going to do the same thing with right. Copy byob right and we’re going to say float right. Did I… oh, those are colons, not semi colons.
Okay, so now we’ve got left and right and I think the other thing we want to do is we’re just going to add a little bit of background color to this. This isn’t the real color that we want to use but we’ll get rid of that and what we’ll say is background color: efefef. Pam says she’s lost the ability to raise her hand but she doesn’t think call number is going to work right. Well, I think it did work right, didn’t it? Let’s see, background color: efefef… okay. Float: left; There we go and then width: 100%; Okay and obviously, we can do other styling here as well, right? We can do a margin top: 20 px, so it drops it down and then we could control copy. We’re going to do another p1 here and get rid of those paragraph tags… space p. But instead of that, all we’re going to say is margin bottom: 0 px. And then maybe what we want to do is padding of 10 pixels all the way around… 10 px. So anyway, so there we’ve got down. Yes Pam, I did leave out the underscore but it was in a variable whose name I was making up myself. It looks…it didn’t look like a variable. I mean, it looked like it should be the same but it didn’t need to be the same. So I’m just going to copy this and I’ll show you what I’m talking about in a second. And we’ll just replace all that with this, save it. We’ll upload it to the site, custom css. We’ll refresh it in Chrome and now we’ve got our little thing here set up roughly the way we want.
Now what you identified was the fact that in here, I used… I created a variable called byob call number without an underscore. And the thing is that this is a variable name that I am making up right here on the spot and it’s only going to be used for this one instance right here. We created that it’s getting this post meta, this of course, does have to be right. But because… I mean, I could have called this thing Fred and called this Fred and it would work just the same. As long as they were the same variable names so let’s just prove that by uploading it and then coming back over here, testing it. See, it worked just fine. It didn’t change the outcome because it’s nothing more than a variable that I’m using to do this. So okay, I’m going to undo that though because I like my variable names to be descriptive as opposed to Fred.
Okay so Pam, I’m going to unmute you again just for a moment here… just to see if there’s anything else you’d like to ask. Okay Pam, you’re back on.
Rick: So is there… okay…
Pam: I just hope that you’ll save this code somewhere so that I don’t have to kind of make it up.
Rick: No, it’s going to go right on the forum just like the other codes so you don’t have to make it up at all.
Pam: Very helpful and it looks very nice. Thank you.
Rick: Okay and so next week, what we’ll do is we’ll add those other links and we’ll change the way the book list displays so that it can add author name and that kind of stuff. And actually, we’ll do whatever you want to do because obviously, there may be some things you want to change with this and some you know… so we’ll keep on playing with that but…