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.
By default when you click on a custom taxonomy link, WordPress will use the index.php template to display the output. If you want to customize the index view for a taxonomy, you need to create a custom taxonomy template. Like with the custom posts type indexes, this is a simple matter of creating a new file called taxonomy.php, and populating it with the contents you want to use. Before we create the file, let me just show you what I am talking about. If I go to any of my posts and I click on one of the custom taxonomy terms, I will be taken to a general index for that term.
As you can see, we are now under the meal -type custom taxonomy and I am looking at everything that's filed under the term dinner. The problem is by default the title of this page is Blog Archives. It's hardly a blog archive. And in addition, each of these polls types, though they come from different kinds of custom post types, just display the same. What I want to do is change the Blog Archive's title to something more fitting like filed under: and then the actual term, and also add the description for each of the terms, because sometimes you can add a description to a term.
And I want each of these posts to also display what kind of post type it is, so that people know that this is a video, this is a photo, and this is a recipe. But first thing's first. We need to create the new taxonomy template. I will go to my code editor and here we already have this archive-recipes file that we created before, which is the index file for archive recipes. I am going to use this as the base and just make some subtle changes to it. So I will simply take the file and save it under a different name.
So I will change the name to taxonomy.php and now if I make any changes, those changes will only apply to the taxonomy index. Here, I can make a change to the title of the page itself. You remember, this one says the name of the post type, but now I want to display filed under: and then the name of the term. So I will go to my code snippets and here at the very top you find a new h1 class page-title that we can copy and paste it in place of the old one.
This one if we read it says Filed Under and then it inserts single_cat_title, which is the title for the current category or the term. So in our case, because we had dinner open, it should now say Filed Under Dinner. I will save the taxonomy.php file, go back to my browser and reload this page. And now it says Filed Under Dinner at the very top here. That's exactly what I wanted. The next step is to add the category description.
Now, if you go to WordPress Admin and you open one of your taxonomies, you will see that in addition to a title you can also give each taxonomy term a description. I have given Dinner a description here. It just says "Dinner is the most important meal of the day except of course for breakfast," and I want that to display directly under the term itself. So I will go back to my code snippets and I will copy out this batch of code. It starts with the php delimiter ends with the php delimiter. So I will copy that and place it directly after the h1, before the header ends.
This batch of code looks for the category description and then says if the category description is not empty, meaning if there is a category description, then display the category description. So I can save this, reload the page in my browser, and now you see in addition to saying Filed Under Dinner, it also says "Dinner is the most important meal of the day, except of course for breakfast," and this text will change if you add descriptions to other terms.
Finally, I want to change the loop so that inside the loop we display the post type under each of the post titles. We can do this in a couple of different ways. We can approach it the same way we did previously by now creating a new file called contents-taxonomy and then call it that way. However, in our case, with the taxonomies, all the taxonomy displays are going to be the same. Therefore, it's not necessary to have this external file we are going to call in. So instead, I am going to go to concert-archive, which already has all the content I need. I am going to highlight all of that content and copy it.
Then I am going to go back to taxonomy. php, find where content-archive is called. It's right here. Display the call to that item and instead paste in the code itself. Now I have a complete file and taxonomy.php contains all the template information for this display. That also means I can make changes to it without disturbing the content display for regular index pages. So now, because I want to add type of post underneath the title, I first need to find the title.
It's right here, entry-title. And then I can add the code to display the current post type directly underneath. So I will go back to the code snippets and get the final batch of code, and I will copy it first and then I will explain it afterwards. So I will paste it in and then I will explain what happens here. Of course, first it says post_type: and that it spells out what's going on. Now, I had to make a custom function to bring out the post type name, because it doesn't do that by default.
So this is a simple function that first creates a new object, which is called object, and then in that object I put in the current post type object, and I display the singular_name of that object. This is highly technical, but the end result is exactly what we need, which is why it works. If I save this now and reload my page, you will see under each of these posts we now have post type and then the name of the post type.
So here it says Post type: Video, here it says Post type: Photo, and here it says Post type: Recipe. Like with custom post type templates and custom post type indexes, you can also make custom taxonomy indexes targeting specific taxonomies, or even specific terms. You do that by calling the files taxonomy- and then whatever you are targeting. It works the exact same way and you can get extremely specific about what you're targeting and how to display certain types of content. But for the most part what I just showed you, this consolidation of all the taxonomy terms in one single file, works the best.
Using custom taxonomy index templates you can control exactly how different taxonomies are displayed and customize the output to show exactly what the visitor is looking for. This is yet another tool in your tool belt of WordPress awesomeness.
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.