Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
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.
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
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.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.