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 all new custom post types have the same default icon as the regular posts, but they don't have to. Using a simple batch of code along with some graphics, we can change the icons for each of the post types to further identify them as separate and different entities. To do this we first need some new icons. You can go online and you can find a free icon set and use that or you can make your own icons. The sizes change a little bit between the icons that are on the sidebar here and the icons that are larger in the actual view.
So you basically need to create one icon for the sidebar and one for the main view. If you gave access to the full set of assets for this course, I've created some icons for each of these three new post types and that's the ones we're going to hook in, but like I said you can use any icon you want. You just have to create the graphics for it. First we need to place the images that we're going to use into our themes folder. So I'll go to wp-content in my WordPress installation and then into themes. Like would the posttypes.php file we want the images to be available for all the themes that will be using these post types.
We're going to put the images folder in the themes folder rather than in the individual folder for the themes. This is not technically proper to do in WordPress, but it'll help us have one set of files that we can use for all our themes. So I'll go into my Exercise Files under Assets and find a folder called images. I'll copy it into the themes folder. Under images you'll see we have images for photo, recipes, and video, so there is a small one and regular size one smaller.
The small one goes on the menu; the regular size one goes when you open each individual item. Now though we have the images in the right folder we need to call them in using cascading style sheets, but we're going to do this from the posttypes.php file using some clever code. So first I'll go to the posttypes.php file and scroll all the way to the bottom, then I'll go to my code-snippets and find the code-snippet under 3.6. As you can see here I commented in. It says Add new Custom Post Type icons and the batch finishes at this incomplete PHP delimiter.
This is very important and I'll show you why in a second. If you copy this code all the way up to the comment and paste it in, you'll see that the PHP delimiter starts here and then it ends down here, because our original posttypes.php file had an end PHP delimiter at the bottom. This is happening because this function actually introduces a set of style code and this is not PHP. This is straight up CSS and HTML. We have to escape our PHP delimiter so that we can display the regular content and then we have to reintroduce it at the bottom of the function.
From the top this function called cooking_icons introduces new style code for the icons in WordPress Admin. As you can see there are two icons per post type. You see it says menu-posts-recipes where recipes is the post type and then it says menu-image and then we're calling a background image. We're calling the url to decide itself, so that we can use this regardless of what side we're using it on and then it navigates to wp-content/themes/ images and then recipessmall because this is a small one and then the same thing for icon32, which is 32x32, posts, and recipes. This is the large icon then we'll call the recipes.png file.
It's just the same thing happening for each post types we have recipes, we have photos, and we have videos. When this is called this new style code will be appended in the header of our pages and therefore we'll display when you're in the Admin Panel. As you can see here at the top of this new function it says add_action and it's inserted at admin_head rather than at in it. That means it'll be injected into the head tag of the site and then it's just calling the cooking_icons function directly underneath.
When I save this in posttypes.php and go to WordPress Admin, you'll notice that the icons on the side here will change. So reload it and you see that now Recipes has a recipe book, Photos has a camera, and Videos has a video camera. And when I click on Recipes, we get a large recipe book. When I click on videos we have a large video camera. Again these are subtle introductions, but they make a big difference because we now see that there is a visual difference between each post type, and you can use this on every single item in WordPress Admin so that you can truly identify what's going on and make it easier for the end-user to use the Admin Panel to understand what they are doing.
By adding a custom icon to each of your custom post types, you give the admin user a visual cue that they are now working with something other than a regular post. It's again a subtle thing, but it makes a huge difference.
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.