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.
Custom post types can be added through plug-ins or they can be hardcoded into the theme you're using. I find the latter to be a far more solid way to go and it also ensures that everything works properly even if your plug-in doesn't. Setting up a basic custom post type is easy and only requires a few simple lines of code in functions.php, or in our case, in the abstraction file, posttypes.php. The project we are working on, Culinary Artistry, requires three custom post types: one for recipes, one for photos, and one for videos.
The code to create these is exactly the same. The only thing that changes is the function names and the names of the post types themselves. Now before we go there, if you look at your Admin panel right now, you'll see that you have this word Hello! at the very top even in the Admin panel. If you remember, this is the same Hello! we added inside the posttypes.php file to make sure it works and this just proves the point that when you add something to the functions file it applies to everything that has to do with your WordPress installation, both on the front-end and the back-end, and that's what we are going to use now.
So the first thing we need to do is of course take out this echo Hello! and then we can start building our first post type. Because building a post type requires exact code, I have created a code-snippet for you, so you can go to the code- snippets file and find here it says In posttypes.php and then it lists the actual function. So if we copy it from Add new post types for Recipes down to the end curly bracket here and paste it into posttypes .php, we have the function that creates the post type Recipes.
I will just explain it to you quickly. At the very top we have a comment that just explains what it is, I always tend to add comments to every new function I make, so that when I come back later I know what's going on. The function itself is here. It's called cooking recipes init and this is the function that creates the actual custom post type. It consists of a set of arguments and then the function register_post_type and then the name of the post type and the arguments. So this post type is called recipes because it's recipes, and the arguments have labeled, recipes, which is the name of the post type itself as it is displayed inside WordPress.
It also has the singular label recipe for singular instances and then it has a bunch of other values. It says public to true because it's supposed to be publicly visible so when people visit your site they can see it. It's publicly_queryable. It shows the UI as you can see the UI when you are logged into WordPress, the UI being where you can add a title, description and all this kind of stuff. The query_var is set to true. This is how you are able to query the content, whether or not you can say I want the information from this post type and I only want the titles.
The rewrite is set to true so that WordPress can rewrite the URL. We will get back to that later. The capability_type is set to post right now. You can also set it to page. This just has to do with how WordPress handles the content. It's not hierarchical right now because I set it to false. There is no need to have it on true unless you want to. And the menu_position is set to null. We will get back to that later too. And finally there is a support variable that tells WordPress what content is supported within the actual individual posts.
We will also get back to that later. The final thing that happens is after this function is built we have this add_action at the top. The add_action actually calls the function into WordPress. Right now it's been called add init, which is when WordPress Admin boots up, and the function called is this cooking_ recipes_init which is the one we just made. If we save this file and go into WordPress Admin, you will see that the Hello! disappears and something else happens as well.
So just reload it and you will see Hello! disappeared and down here at the bottom we now have a new post type, Recipes. If we click on it, you will see it looks just like posts except it says Recipes and you can add a new recipe and in time you will also be able to manage it. When we go in and Add New, you will also see we have Title, Content or Editor, and Discussion. If you go back to our code, you will see here under supports that we have title, editor, and comments.
To add a second custom post type, all we need to do now is simply copy this batch of code and paste it in. Then we will just make some quick changes, we will call this Photos instead, call it cooking_photos and change the actual function, and now we change the label and the singular_label. And Photo and finally down here register_post_type, we will call it photos.
Save it, reload WordPress Admin, and now we have both Recipes and Photos. We will do the same for videos. Copy it into our function, paste it in, change to Videos, and change the actual function, call it cooking_videos, and now we change the label and the singular_label and at the bottom here.
Save, reload WordPress Admin, and we now have three custom post types: Recipes, Photos, and Videos. If you didn't quite follow along here, I created a complete code snippet for you. You can just copy out the entire batch of code here. Under In posttypes.php, you can copy everything from the beginning PHP delimiter all the way till the end PHP delimiter and simple mark all your content in posttype.php, delete it, and then just paste this in instead and you will get the exact same result you just saw that I made.
As you can see, adding basic custom post types to your theme is very easy as long as you keep your code in order and creating new ones is as easy as copying an existing one and just renaming the functions and the post type itself. But we're not quite done here. Though these post types work, they are not very well-refined. That's the next step.
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.