Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Adding taxonomy info to the custom post type template

From: Create an Online Portfolio with WordPress

Video: Adding taxonomy info to the custom post type template

Looking at the output from your custom single post type template, you see that there are some vital parts missing, namely the taxonomies. If you look at the regular post templates by going Home, you'll see that the categories are listed. But in our custom post template for the recipes, no categories are listed because the categories aren't there and we're not calling the custom taxonomies. To make the custom taxonomies show up, we need to add them manually to our template. This operation requires a special WordPress function, one that's a bit wonky.

Adding taxonomy info to the custom post type template

Looking at the output from your custom single post type template, you see that there are some vital parts missing, namely the taxonomies. If you look at the regular post templates by going Home, you'll see that the categories are listed. But in our custom post template for the recipes, no categories are listed because the categories aren't there and we're not calling the custom taxonomies. To make the custom taxonomies show up, we need to add them manually to our template. This operation requires a special WordPress function, one that's a bit wonky.

So you need to be extra careful about getting the code exactly right. So let's take a look at this content-recipes file that we created. First of all, we can take out the comments I put in, just to make sure we're using the right file, because we know we're using the right file. Secondly, let's take a look at what this file does. At the very beginning, it displays a header that has the title of the post and then it has this if statement. It says if ('post' == get_post_ type), so this is kind of backwards.

It's actually saying, if the get_post_ type, so the current post type is post, then display the div class entry-meta, and then the posted_on information. If you go back and open a single post, you'll see that at the very top it says Posted on August 27, 2011. That's the posted on information it's talking about. And you'll also see that in our single recipe template it's not displayed. That's because we have this conditional statement. If the post type is post, then display this.

Otherwise, don't display it. So what we want to do is take the if statement out, so that it always displays a date. I'll save that and test it, so I'll just reload the page. And now that it displays the date, we can replace the date with the custom taxonomy information. So first, we'll comment out the date, so that we have it for later if we need it. And then underneath here, we'll put the custom taxonomy information. But how do we do that? Well, if we go to the code snippets, you'll find the complete code batch for this.

You'll see I also changed the div class ever so slightly to say entry-meta-custom. And you'll see why in a bit. But let's first just copy these divs that list Meal type, Servings, Difficulty, and Ingredients. So I'll just highlight this code, copy it, and paste it in. And then I'll explain what's going on here. And what we're displaying here is the text "Meal type" and then we're asking WordPress get the term list. The term list is the list of terms under a specific taxonomy.

Terms are the different items under a taxonomy. So if we have the taxonomy Meal type and something is listed under dinner and appetizer, then those two things, dinner and appetizer, would be terms and those would be listed. In the function, we have to provide the current post ID, which is this $post->ID. We also have to provide what taxonomy we want to return information from. In this case, the meal-type. And then we have these extra values and I'll show you what they are in a second. But first, let's just test this to make sure it works.

So I'll save it and reload the page. And here you see we have Meal type Dinner, Servings 2-4, and that is really hard to read because it's behind the Edit. And it's not really displaying the way we want it to. Ideally, I want all this content to display underneath Pizza Primavera, not on top of it. So I need to make a small change. And that change is a style change. The reason why it's displaying like this right now, you'll see when we go back to the code. You see we're still using this div class entry-meta.

And apparently, the entry-meta automatically sets an absolute position to the very top. So what we want to do is change this to a different style class and then create a new style that places it where we want it to be. First, I'll attach a new style here. I'll say instead of entry-meta I'll call it entry-meta-custom and I'll also change my comments where it ends to entry-meta-custom. I'll save it, just to test. And now the information appears underneath the title where it's supposed to, but the styling is all wrong, or rather right now there is no styling.

That's because I had created a new selector. So now I need to create styles that match that selector. But rather than creating it from scratch, I'm going to go see what the original style is for that selector and then just copy it and create a new one. So I'll go back to my code editor, find the twentyeleven theme, and find the style sheet in the twentyeleven theme, which is right here. I'm looking for class entry-meta, so I'll search for .entry-meta.

It's probably defined several different places, but I need to find the one that has the actual style information about the size. So I'll keep going until I find what I'm looking for. And here it is, entry-meta. color, clear, font-size, and line-height. And it also has this underneath entry-meta a, font-weight: bold. And if you look at the browser, you'll see that the font is bolded when it's a link.

So that's what we want. So what I'm going to do is go in here and copy this code from the original style sheet and I'll just close it so I don't make any changes to it. Then I'll go back to cooking>styles, and this is my new style sheet, which is appended after the old style sheet, because you can see the old style sheet is called up here. So any style I add further down will be added afterwards. I'll paste in these styles and then I'll change the selector to entry-meta-custom and entry-meta-custom a, save it, go back to Pizza Primavera.

This is what it looked like before. Reload it and now the styles are applied. So now we have a custom page template that not only displays the content we want, but also displays all the taxonomy information about that content so that the person who visits the site can now navigate to other dinner items or other things that are under Servings 2-4 with a Medium difficulty, or even things that have the same ingredients, as we did before. This is the whole point of having custom taxonomies and custom post types.

We now have the ability to give the visitor extra information about our content. Now there's one small thing left. Remember I said that the code is a little bit odd for this function, get_the_term_list and then is says $post->ID, 'meal-type', '', ', ', ''? It looks odd, right? It's because this function, get_the_term_list, allows you to append information before and after the items.

The way it's structured is it says, post ID, taxonomy ID, and then it says before all the items, in between each item, which is this case is comma, space, and then it says after all the items. We can use this to create list items if we want to. So for instance, if we want this ingredients to be an actual unordered list, I can start it by saying, starting an unordered list, that's the beginning, and end it at the end .

And then I can go in and say, it starts off with an

  • to start a list item. That's before the whole list starts. Then in between each item, there should be an end
  • , and then the beginning of the next, and then the entire list ends with an end . When I save this and we go back and reload the page, you'll see that now all of these items display in the list. Of course, this is not very functional for this particular way of displaying things in this layout.

    But you can see that by using the same function, you can control how the information is displayed, either separated by commas, separated by bars, separated by a dash, or created into a list. But of course this is not what we actually want. So I'll go back to my code snippets and just copy out the entire batch to make sure everything is exactly the way I want it to. And I'll go in here, highlight the whole batch, paste in what I just copied out, save it, reload the page to test, and we're back where we want to be.

    By adding taxonomy lists in the single view of your custom post type posts, you provide your visitors with valuable information about how individual posts are categorized and also the ability to navigate to other posts filed under the same taxonomies.

    Show transcript

    This video is part of

    Image for Create an Online Portfolio with WordPress
    Create an Online Portfolio with WordPress

    40 video lessons · 29545 viewers

    Morten Rand-Hendriksen
    Author

     
    Expand all | Collapse all
    1. 6m 28s
      1. Welcome
        58s
      2. Using the exercise files
        3m 54s
      3. Using the code snippets file
        1m 36s
    2. 8m 31s
      1. What is an online portfolio?
        2m 43s
      2. Tour of the finished project
        3m 15s
      3. Setting up a WordPress development environment
        2m 33s
    3. 16m 10s
      1. Creating site architecture
        5m 1s
      2. Creating a child theme
        6m 7s
      3. Creating an external file to manage functions separately from the theme
        5m 2s
    4. 25m 26s
      1. What is a custom post type?
        2m 14s
      2. Setting up a custom post type
        6m 39s
      3. Adding advanced variables to the custom post type
        3m 35s
      4. Advanced custom post type functionalities
        4m 29s
      5. Changing the menu position of the custom post type
        3m 19s
      6. Adding a custom post type icon
        5m 10s
    5. 22m 8s
      1. What are custom taxonomies?
        3m 34s
      2. Setting up a basic custom taxonomy
        2m 52s
      3. Hooking a custom taxonomy to a post type
        3m 13s
      4. Adding advanced variables to a custom taxonomy
        3m 9s
      5. Using hierarchical and nonhierarchical custom taxonomies
        5m 54s
      6. Using custom taxonomies in admin
        3m 26s
    6. 25m 40s
      1. Populating content into the custom post types
        10m 54s
      2. Uploading videos to YouTube
        2m 22s
      3. Embedding YouTube videos in a custom post type
        4m 23s
      4. Uploading videos to WordPress
        8m 1s
    7. 39m 47s
      1. Creating custom post type templates
        6m 50s
      2. Adding taxonomy info to the custom post type template
        9m 13s
      3. Creating conditional custom taxonomy links
        4m 46s
      4. Handling multiple post type templates: Individual templates
        6m 25s
      5. Handling multiple post type templates: Consolidating everything in one file
        6m 21s
      6. Handling multiple post type templates: Making custom post types the default
        6m 12s
    8. 15m 23s
      1. Creating an index page for a custom post type
        8m 10s
      2. Creating a custom taxonomy index page
        7m 13s
    9. 12m 3s
      1. Creating a custom footer sidebar template
        6m 58s
      2. Displaying a list of links to the latest custom post type posts
        5m 5s
    10. 14m 58s
      1. Creating static pages for the front and the blog
        4m 54s
      2. Populating the menu with new index pages
        4m 52s
      3. Creating a contact page with a contact form
        5m 12s
    11. 5m 55s
      1. Including the abstraction layer in other stock themes
        5m 55s
    12. 1m 22s
      1. Next steps
        1m 22s

    Start learning today

    Get unlimited access to all courses for just $25/month.

    Become a member
    Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
    @lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
    @lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
    Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
    I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
    @lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
    @lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
    One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
    guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
    Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
    Share a link to this course

    What are exercise files?

    Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

    Can I take this course without the exercise files?

    Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

    Become a member Download sample files See plans and pricing

    Please wait... please wait ...
    Upgrade to get access to exercise files.

    Exercise files video

    How to use exercise files.

    Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


    Exercise files

    Exercise files video

    How to use exercise files.

    For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

    This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

    Are you sure you want to mark all the videos in this course as unwatched?

    This will not affect your course history, your reports, or your certificates of completion for this course.


    Mark all as unwatched Cancel

    Congratulations

    You have completed Create an Online Portfolio with WordPress.

    Return to your organization's learning portal to continue training, or close this page.


    OK
    Become a member to add this course to a playlist

    Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

    Get started

    Already a member ?

    Become a member to like this course.

    Join today and get unlimited access to the entire library of video courses.

    Get started

    Already a member?

    Exercise files

    Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

    Get started

    Already a Premium member?

    Exercise files video

    How to use exercise files.

    Ask a question

    Thanks for contacting us.
    You’ll hear from our Customer Service team within 24 hours.

    Please enter the text shown below:

    The classic layout automatically defaults to the latest Flash Player.

    To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

    Continue to classic layout Stay on new layout
    Exercise files

    Access exercise files from a button right under the course name.

    Mark videos as unwatched

    Remove icons showing you already watched videos if you want to start over.

    Control your viewing experience

    Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

    Interactive transcripts

    Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

    Learn more, save more. Upgrade today!

    Get our Annual Premium Membership at our best savings yet.

    Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

    “In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

    Thanks for signing up.

    We’ll send you a confirmation email shortly.


    Sign up and receive emails about lynda.com and our online training library:

    Here’s our privacy policy with more details about how we handle your information.

    Keep up with news, tips, and latest courses with emails from lynda.com.

    Sign up and receive emails about lynda.com and our online training library:

    Here’s our privacy policy with more details about how we handle your information.

       
    submit Lightbox submit clicked
    Terms and conditions of use

    We've updated our terms and conditions (now called terms of service).Go
    Review and accept our updated terms of service.