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.
In the last movie, we created three custom posts type templates, one for each of our custom posts types. However, as you can see, most of the content in each of our custom posts type templates is exactly the same. The only thing that really changes is where the taxonomy information appears and the conditional statements around it. So wouldn't it make more sense to make just one file that had all the template information and then just reference that file from outside, so that it applies to each of the custom posts types? That would mean we had one file that we could edit, rather than three.
So that's what we're going to do. Just so there is no confusion, I've reset the theme back to where it was at the end of the third movie of this chapter. That means we only have one file here called content-recipes, and the other ones are gone. So we'll start off by opening that file and resave it as custom-content.php. The reason I'm resaving it is just so I don't have to copy and paste it over. I could just as easily have created a new file called custom-content.php and then copied all the content over.
Now the custom-content.php contains all our template information, I'm going to go in and change content- recipes.php by taking out all the template information and replace it with a simple call to custom-content.php. This is the exact same technique we used to create our abstraction layer in the theme for our custom posts types file. However, I'm going to use a WordPress function to call in the content, because it's easier to manage. The function was called get_template_part.
In it we just add the variable of the name of the content we want to call in. So I'll say custom-content and you don't need to add the .php here. This custom-content tells WordPress to look for a file that's called custom-content, which is exactly what we want. So now I'll add a semicolon at the end to end the line and then save it. If everything works properly now, the recipes page just exactly the same. So if I reload it, we're seeing the same content, the only difference is we are now not seeing the template files from content-recipes; we're seeing it from custom-content.
Likewise, if I reload for instance the photo page, there should be no change. I'm sure you've already figured out what the next step is. All I need to do now to apply the custom- content template to photos is to resave content-recipes as content-photos. So I'll go and rename it. And I'll do the same for videos. So I'll just resave it again, content-videos.
So now we have three files, photos, recipes, and videos, that all point to one file, custom-content. And when I reload my Photos page now, we'll see the custom taxonomy information appear at the top, and the same thing happens with videos. That means my single target file works. Now I need to change my template so that it displays the content I want in the place I want. For instance, all this taxonomy information should only appear on recipes.
It should not appear on photos or videos. So I'm going to go into custom-content and add a new conditional statement that tests whether or not the current post type is recipes, and then displays the taxonomy information only if that's the case. So I'll go down to where the entry- meta-custom starts and I'll add a new conditional statement at the top here. The conditional statement is a regular if statement, so I'll say if and then I'll ask WordPress, what is the current custom post type? So I'll say get_post_type and then if it equals, so two equal signs, recipes, then run everything underneath.
And then I just remember to end my conditional statement at the very bottom underneath the end of the div. So I'll add the end bracket here. When I now save this, WordPress will test to see if the post_type is recipes and if so, it will display all of this content. Going back to the browser and reloading the recipe nothing has changed, but if you reload a photos page or a videos page, the taxonomy information no longer displays.
Now that we've done that, we can add the taxonomy information for the photos and the videos where we want it. Because this requires a bit of extra code, I've created a code snippet for you. So if you scroll down to footer entry- meta and then go into our code snippets, you'll find here at the bottom the footer class code snippets. So if you copy this and you paste it in right here starting with the footer class, I'll explain to you what happens.
This stack is exactly as the one before, except we're testing for two types of posts. So it says if get the post_type equals photos or get the post_type equals videos-- These two pipes is how you'd say Or. A pipe by the way is created by hitting Shift+Backslash on your US English keyboard. If I save my template again and reload Videos page, we'll now see the video taxonomy information appear at the bottom.
Likewise, if I reload the photos page, we'll see the photos taxonomy information appear at the bottom and the Recipes page shows no change. By using conditional statements in a smart way and placing all my content in one central location, it makes it easier for me later to make sweeping changes to the entire site. Of course, this only applies if all your templates are roughly the same. In my case, that is the case, so I'm going to stick with it.
But we can take this one step further and make it even easier to manage. And that's what I'll address in the next movie, and what I address in the next movie is going to be what's used for the rest of the course as well.
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.