Start learning with our library of video tutorials taught by experts. Get started
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.
Now that you've created and populated three custom post types complete with custom taxonomies and custom post templates, you probably think there's an index page much like the standard reverse chronological blog page waiting for you somewhere. Sadly, that's not the case. This is one of those mysteries WordPress serves up and I have no explanation for you. To get an index page for your custom post type, you have to create a template yourself. Don't ask me why. That's just the way it is. The good thing is it's really easy to do.
It's basically just a matter of naming the files right. So right now, although we have the recipes in our site and we can see them, the user who visits the site has no way of accessing them. So what we need to do is create an index page for our recipes and our photos and our videos. We're going to do that by creating a new file called archive- and then the name of the post type. The good thing is all themes come equipped with index pages. They are not surprisingly named index.
So we can go and find the index page in 2011, open it, copy out all the contents, and make ourselves an index page for the custom post type in our child theme. However, that index page should have a specific name. So I'll create a new file and call it archive-, and then the post type, so in this case, recipes. Now I can paste in the content from the index page and I should technically have a completely functional index page for my archives.
However, I'm going to make a couple of small changes to this, before we get to that point. First of all, you remember way back when we created single.php that by default 2011 always calls for post formats. We want it to call for post types, so that it gets the template part for the post types when we use them. So I'm going to change this get_ template_part( 'content', get_post_format() ) to get_template_part( 'content', get_ post_type() ), and I'll save it.
This means that now when WordPress opens the index page for recipes, it'll go looking for a file called content- recipes, which is what we created before. Or rather it'll find this singular file called content.php and use that to display it. So we're now reusing the same files for multiple things. Now I can save archive recipes, go to WordPress Admin and then I have to reset the permalink structure for WordPress. The permalinks are controlled all the way at the bottom here under Settings > Permalinks.
A permalink is the actual link to the items. By default, WordPress has set it to just ?p= something, or in the case of our custom post types, ?recipes or ?photos, and so on. What we want to do is reset this to something readable. So I'll select Custom Structure and then say forward slash, because that's what it starts with, %category%/%post.name%, and forward slash again.
This just creates a structure, where it will say localhost/wordpress/recipes/ and then name of the recipe. So I'll click Save Changes and now we have a new permalink structure, so now we can call our recipe index. So I'll go over here to WordPress and say recipes. Now this is what's going to happen the first time you do it. You'll get a message saying something like "this is somewhat embarrassing" or "error" or something like that. That's simply because we need WordPress to rewrite its own archives.
So I'll go back and save the change to the permalink settings one more time. And now when I reload the same index page again, we get the index for recipes. Don't ask me why it's like that. It's just the way it is and you have to deal with it that way. And now you see we have a complete index for our recipes: Pizza Primavera, Jalapeno Jelly, Garlic Bruschetta, and so on. But as you can see, it's not fully completed yet because we can't click on the title and I always like to make the title a link.
The reason why we can't click on the title is if we go back to our file, you see we are calling this content.php file. And if we open content.php, you'll see that the call for the title right here has no link to it. We can solve this in two ways. We could either now go in and create a conditional statement that tests for whether or not this is an archive page, and if it is, it'll display the title as a link, or we can create a new file, which is what I'm going to. So I'm going to re-save this file as content-archive because then I can make other changes to my archive pages.
So first, I'll go in and change this h1 to add a link. So I'll go to my code snippets and find the h1 entry title block and I'll copy the whole thing out, go back, and replace what's already here with the new one, and I'll save that. And then I also want to go back into archive-recipes and add another block of text here, so that I can display what kind of post content I'm currently looking at. So I'll paste that little block of code here and all this does is it adds a new header that says what post type name this post type is.
Finally, I have to make one more change, because right now the get_template_part function calls for content, but I created a new file here called content-archive. So I'm going to change this to content- archive and then delete the rest of the line because we don't need the get _post_type anymore, and save it. If I now reload my index page, we get the name of the post type at the top, we get the index, and for each of the titles we now have a link.
Now that we have an index page for recipes, we need to create another index page for photos and one for videos. And this is where those techniques I was talking about in the previous chapter come in. We now have three different methods we can use to create index pages for these post types. Because I built archive-recipes to be generic, and by that I mean at the beginning here rather than displaying the full text recipes it's displaying the current post type, we can reuse this exact file to target photos and videos. We can do that either by re-saving this file two more times, calling it archive-photos, then archive-videos, or we can create a new file called archive-photos, that just references archive-recipes.
And then we can also re- save this as archive-videos. Now when I go back to my site and instead of recipes call photos, we see the same kind of index page, only now it says PHOTOS at the top and we have Artichokes, The Beauty of Food, and so on. And we even have the custom taxonomy information at the bottom rather than at the top. Same goes for videos.
So by using the techniques we've already learned about how to manage multiple custom post type templates and applying it to how to create archives or index pages for custom post types, we've now created a set of new files that reference each other and display custom index pages for each of our custom post types, using very easy to read URLs. Creating these custom post type index pages is actually quite easy. You just have to know how to do it. And now you do.
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.