Build Your Own Business Website header image

Community Library – Part 21 – Display the Rest of the Post Meta in the Post

Difficulty Level -

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.

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.

Community Library Website – Case Study Part 1 – Site Organization
Community Library Website – Case Study Part 2 – Create Custom Post Types
Community Library Website – Case Study Part 3 – Custom Post Type Configuration
Community Library Website – Case Study Part 4 – Custom Taxonomy Decisions – Theory
Community Library Website – Case Study Part 5 – Custom Taxonomy Decisions – Practical Application
Community Library Website – Case Study Part 6 – Incorporating Existing Data Into the Project
Community Library Website – Case Study Part 7 – Creating Hierarchical Custom Taxonomies
Community Library Website – Case Study Part 8 – Creating Non-Hierarchical Custom Taxonomies
Community Library Website – Case Study Part 9 – Creating Custom Post Meta
Community Library Website Case Study – Part 10a – Restore the Database Using BackupBuddy
Community Library Website Case Study- Part 10 – Creating Custom Post Meta – Continued
Community Library Website – Part 11 – Importing Existing Data to the Website
Community Library Website – Part 12 – Prepare Existing Data for import by the CSV Importer plugin
Community Library Website – Part 13 – Import Existing Data Using the CSV Importer Plugin
Community Library Website – Case Study Part 14 – Date in Permalink Configuration
Community Library Website – Part 15 – Importing Images
Community Library Website – Part 16b – Final Data Import
Community Library Website – Part 17 – Add Thesis Post Meta to Custom Post Type
Community Library Website – Part 18 – Add WordPress 3.0 Menus
Community Library Website – Part 19 – Add Post Meta and Taxonomy Information to the Post Display
Community Library – Part 20 – Add topics and audience to book display
Community Library – Part 21 – Display the Rest of the Post Meta in the Post
Community Library Website – Part 22, Create the Permalink Structure
Community Library – Part 23 – Remove Custom Post Meta from Post Display
Community Library Website – Part 24, Add Taxonomy and Post Meta Data to the Teaser
Community Library Website – Part 25, Add Taxonomy Data to the Teaser
Community Library Website – Part 26, Adjust the Teaser Styling Using Design Options
Community Library Website – Part 27, Styling the Teaser Using CSS
Community Library Website – Part 28 – Fine Tune the Teaser Display
Community Library Website – Part 29, Designing a Custom Catalog Page
Community Library Website – Part 30, Using a Query String in a URL
Community Library Website – Part 31, Adding Custom WordPress Menus
Community Library Website – Part 32, Add Custom Menus to the Catalog Page
Community Library Website – Part 33, Add Another Custom Menu to the Catalog Page
Community Library Website – Part 34, Troubleshooting Custom Menus
Community Library Website – Part 35, Add Styling to WordPress Menus
Community Library Website – Part 36, Add HTML Markup to WordPress Menus
Community Library Website – Part 37, Add WordPress Menus to Archive Pages
Community Library Website – Part 38, Add and Style a List of Tags
Community Library Website – Part 39, Add a Search Box to the Sidebar
Community Library Website – Part 40, Add Links to the Sidebar
Community Library Website – Part 41, Add Taxonomy Drill Down Browsing
Community Library Website – Part 42, Custom Loop to Display Custom Post Types
Community Library Website – Part 43, Simple Custom Query
Community Library Website – Part 44, Custom Taxonomy Query
Community Library Website – Part 45, Add Thesis HTML Structure to Teasers
Community Library Website – Part 46, Display Posts from the Last 60 Days
Community Library Website – Part 47, Custom Loop If Have Posts
Community Library Case Study – Part 48, Increase the Number of Posts that Display on the Custom Catalog
Community Library Website – Part 49 – Naming Conflicts in Custom Taxonomies
Community Library Website – Part 50 – Find and Replace Semi-colons in the Database
Community Library Website – Part 51 – Modify Taxonomy Names Directly in the Database
Community Library Website – Part 52 – Sort Posts by Meta Value
Community Library Website – Part 53 – Show the Term Label Only when a Term Exists
Community Library Website – Part 54 – Sort Archive Posts by Meta Value
Community Library Website – Part 55 – Add Sort Order to Custom Taxonomy

Video Transcript

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.

Pam: Yes?

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…

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 comments… add one

Leave a Comment