Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now

Adding taxonomy info to the custom post type template


From:

Create an Online Portfolio with WordPress

with Morten Rand-Hendriksen

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.
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

please wait ...
Watch the Online Video Course Create an Online Portfolio with WordPress
3h 13m Advanced Sep 23, 2011

Viewers: in countries Watching now:

Learn how to build an advanced portfolio site that showcases various types of content using the free open-source application WordPress. Author Morten Rand-Hendriksen demonstrates creating custom post types, differentiating and classifying content with custom taxonomies, and working with custom post templates. The course also shows how to embed YouTube videos, build index pages, display the latest posts from different custom post types, and hook custom post types into separate themes. Exercise files accompany with the course.

Topics include:
  • Exploring online portfolios
  • Creating the site architecture
  • Incorporating advanced custom post type functionalities
  • Hooking a custom taxonomy to a post type
  • Understanding how hierarchy relates to taxonomies
  • Populating content into custom post types
  • Handling multiple post type templates
  • Displaying a list of links to the latest custom post type posts
  • Building static pages for the front and the blog
  • Creating a contact page with a contact form
Subjects:
Design Web
Software:
WordPress
Author:
Morten Rand-Hendriksen

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.

    There are currently no FAQs about Create an Online Portfolio with WordPress.

     
    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.

    * Estimated file size

    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

    Upgrade to View Courses Offline

    login

    With our new Desktop App, Annual Premium Members can download courses for Internet-free viewing.

    Upgrade Now

    After upgrading, download Desktop App Here.

    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 ?

    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:

    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.

    Start your FREE 10-day trial

    Begin learning software, business, and creative skills—anytime,
    anywhere—with video instruction from recognized industry experts.
    lynda.com provides
    Unlimited access to over 4,000 courses—more than 100,000 video tutorials
    Expert-led instruction
    On-the-go learning. Watch from your computer, tablet, or mobile device. Switch back and forth as you choose.
    Start Your FREE Trial Now
     

    A trusted source for knowledge.

     

    We provide training to more than 4 million people, and our members tell us that lynda.com helps them stay ahead of software updates, pick up brand-new skills, switch careers, land promotions, and explore new hobbies. What can we help you do?

    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.