Build Your Own Business Website header image

Community Library – Part 20 – Add topics and audience to book display

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 twentieth in a series of live lessons on using WordPress and Thesis as a Content Management System (CMS). In this lesson we take 2 pieces of custom taxonomy data and add it to our catalog item type post display. We are adding both “topics” and “audience” to the display of our custom post type. We also do some styling to make it look the way we want.

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

So now what we’re going to do is we’re going to start with Part 20 of the Community Library Website case study and this is going to be an extension of what we’ve started this morning. And if you recall or if you weren’t here, what we did was we looked at this layout for our book post types and we wanted the book and a big title and a subtitle and the name and then the content and then a couple of links and then some more stuff. And what we accomplished this morning is getting these 2 things in. Now what we’re going to do is we are going to… in this part, we’re going to add these 2 groups of taxonomies. Remember that topics is a taxonomy and audience is a taxonomy and we are going to use a very similar code to what we used earlier today and that is the get terms function in WordPress.

So if we come over here real quick and we look at this get terms functions, the get terms function… the only perimeter that we’re really going to include here is the name of the term. And so… and then we’re going to let it spit out all of the values for that term and as you may recall, those values when it get spits out, they actually turn into a link. So this doesn’t just tell you what the terms are. This tells you what or this creates links to those terms so that you can click on those things and go to a page that has all the rest of the posts that have that same term. So for example, if we look at our code that’s what we did right here… was the terms and then post id author and so, the post id was the name of the… actually you know, I’ve conflated 2 pieces of code here because what I really showed you was get terms but the code we’re using actually is the terms and that’s what creates the link. And so, it’s really this type of function, not the one I just described.

Okay well, so anyway, we’re going to create a function though that adds this information to after the post and so, let’s just go ahead and just going to copy this… and paste it down below there and then this function adds… it’s going to add the topic tags and the audience taxonomy. Okay and so byob and instead of catalog item heading, we’re going to call it topics, author… yeah, topics, author terms. And again, we start off with a global post because we are outside of the page loop or outside of the main loop. And so we don’t have access to the terms outside of that loop so we have to make global post or we have to make posts… we have to get this instance of global post… of the variable post. And then if it’s single and we aren’t going to use this part of it at all… that’s the get post meta thing. So if it’s single, we are going to… we’re going to start off… we’ll just delete that and delete this for the time being. We’re going to get the terms post id and then that… the first term was topics and then we’re going to do it one more time. And this one is audience and if we have any question about that, what we need to do is double check it real quickly. So we’re on our Community Library Case Study site, let’s open it up. Let’s see and let’s come down and look at our taxonomies. We’re going to manage taxonomies and we have topics and audience as 2 terms and exactly like that. So that’s fine. So topics and audience… and then rather than hooking after the headline, we’re going to hook it… pardon me, we are going to hook this function – byob topics author terms – and we’re going to put that there and then we’re going to put Thesis hook after post is what we’re going to use. Thesis hook after post… and now, this should list these 2 terms.

Now we’re going to come back and some HTML to this too but before we do that, let’s just test it. That’s part of my philosophy of doing this stuff is to test very small increments of the project as I’m working my way through it. So let’s see… files, save manager, and we’re looking at library. Okay, wp content, themes, Thesis_18, custom functions php and we’ll upload that. Always overwrite… come back over to our site, take a look at it. So let’s see, now if we go to books and we just look at one of our books to the picture, it says… it gives the value of adult but it doesn’t have the topic to it. So let’s see whether or not that’s the way this is. Edit catalog item… does it have any topics associated with it? It does not. Oh no, it’s got church history. So, church history should be showing up there so I must have done something wrong here. Oh, I spelled it wrong. Topics… so have no fear Pam, I make those same mistakes myself all day long.

So let’s go back and take a look at it. Let’s view the catalog item, okay… church history and adult and they’re stuck side by side here. If we select church history, there’s only one book that has church history listed as a topic right now. And if we look at adult, there’s going to be tons of them, right? There are a whole bunch of things listed under adult. So that little system works but now what we really want to do is change the way that looks and so, the first thing…we’re going to put an echo statement back in here again. We’re going to echo and we’re going to start off with a div class equals… yeah, let’s just call it topics for the moment…byob topic list.

Okay and so that’s our introductory div and then under topics, we should actually…next to that, I think we should put that in a p tag here and beside that, say for topics, let’s see… let’s just say listed under topics colon space. And then what’s going to happen is it’s going to take these topics and it’s going to put them in there and then what we’re going to do is we’ll echo a closing p tag and then an opening p tag. And then, let’s see… let’s just call it audience for a moment. You know, once we’ve come up with a better term, we’ll put it in there. Audience and colon space and semi-colon… wrap that up. And then we get this term in here and then we put our final echo statement and this going to be the closing p tag and the closing div tag and the closing semi colon… and let’s get rid of some of those extra spaces. And so, now what happens is if it’s a single post then what’s going to happen is we’re going to put a div class byob topics list and then we’ll have the term listed under topics and then the terms there. And then we’ll have a new paragraph and it’ll say audience colon and then we’ll put the audience term in there and then it’ll echo and close this stuff up.

So let’s… okay now so Pam is suggesting maybe we say that it’s not filed under topics. You know, we certainly could. We could add a bit of complexity to this and you can have an if statement that says if the term’s post id topics then… but if we do that, if we decide to do that, let’s do that as a permutation of this later. Right now, let’s keep it simple and see what happens. So we saved it, we’ll upload that back to our website, we’ll come to our page and let’s refresh it. Okay, so there we go. We’ve got a list of our topics, church history, audience is adult and then… okay so that’s the first part of what we’re trying for. Obviously, we have to do the CSS that makes this stuff look nice but what we’re working on right now is just a hard functionality of it.

And then what we’re… I mean, that’s pretty much it for this… well just actually, let’s go ahead and play with that for just a second. Let’s get this URL, come over to Firefox, paste it and then let’s turn on CSS, edit CSS… and let’s see. Let’s get this in Firebug too. Inspect the element, okay.

So here we are, div class byob topic list and so, if we go to custom CSS and we say .byob topic list and then we could say… actually, we may as well… yeah, let’s just do that. Let’s say p topic list and then let’s say font weight: bold; font weight bold p byob topic list. Oh no, that’s right. It’s not that, my mistake. You would only do it that way if the class was assigned to p. What’s really happening is we have our class and then we have a p tag inside that class so it’s p like this. And now we have font weight bold and then the other thing we want to do is just get rid of this bottom margin. So margin bottom: 0 px. See if that works… yeah, that works just fine. And so now, that what it would look like you know, in order for it to look like this. We just bold it up and get rid of the margin and it sits in there nicely.

Okay and I’m going to add this to the custom CSS file while we’re at this. And let’s see, let’s open up the custom CSS…okay, tutorial site library WordPress content themes thesis_18 custom css and we’ll just add that to our library… I mean, to our custom css…

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 comments… add one

Leave a Comment