New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Start learning with our library of video tutorials taught by experts. Get started

Create an Online Portfolio with WordPress
Illustration by

Creating an index page for a custom post type


From:

Create an Online Portfolio with WordPress

with Morten Rand-Hendriksen

Video: Creating an index page for a custom post type

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.
Expand all | Collapse all
  1. 6m 28s
    1. Welcome
      58s
    2. Using the exercise files
      3m 54s
    3. Using the code snippets file
      1m 36s
  2. 8m 31s
    1. What is an online portfolio?
      2m 43s
    2. Tour of the finished project
      3m 15s
    3. Setting up a WordPress development environment
      2m 33s
  3. 16m 10s
    1. Creating site architecture
      5m 1s
    2. Creating a child theme
      6m 7s
    3. Creating an external file to manage functions separately from the theme
      5m 2s
  4. 25m 26s
    1. What is a custom post type?
      2m 14s
    2. Setting up a custom post type
      6m 39s
    3. Adding advanced variables to the custom post type
      3m 35s
    4. Advanced custom post type functionalities
      4m 29s
    5. Changing the menu position of the custom post type
      3m 19s
    6. Adding a custom post type icon
      5m 10s
  5. 22m 8s
    1. What are custom taxonomies?
      3m 34s
    2. Setting up a basic custom taxonomy
      2m 52s
    3. Hooking a custom taxonomy to a post type
      3m 13s
    4. Adding advanced variables to a custom taxonomy
      3m 9s
    5. Using hierarchical and nonhierarchical custom taxonomies
      5m 54s
    6. Using custom taxonomies in admin
      3m 26s
  6. 25m 40s
    1. Populating content into the custom post types
      10m 54s
    2. Uploading videos to YouTube
      2m 22s
    3. Embedding YouTube videos in a custom post type
      4m 23s
    4. Uploading videos to WordPress
      8m 1s
  7. 39m 47s
    1. Creating custom post type templates
      6m 50s
    2. Adding taxonomy info to the custom post type template
      9m 13s
    3. Creating conditional custom taxonomy links
      4m 46s
    4. Handling multiple post type templates: Individual templates
      6m 25s
    5. Handling multiple post type templates: Consolidating everything in one file
      6m 21s
    6. Handling multiple post type templates: Making custom post types the default
      6m 12s
  8. 15m 23s
    1. Creating an index page for a custom post type
      8m 10s
    2. Creating a custom taxonomy index page
      7m 13s
  9. 12m 3s
    1. Creating a custom footer sidebar template
      6m 58s
    2. Displaying a list of links to the latest custom post type posts
      5m 5s
  10. 14m 58s
    1. Creating static pages for the front and the blog
      4m 54s
    2. Populating the menu with new index pages
      4m 52s
    3. Creating a contact page with a contact form
      5m 12s
  11. 5m 55s
    1. Including the abstraction layer in other stock themes
      5m 55s
  12. 1m 22s
    1. Next steps
      1m 22s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
Create an Online Portfolio with WordPress
3h 13m Advanced Sep 23, 2011

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.

Topics include:
  • Exploring online portfolios
  • Creating the site architecture
  • Incorporating advanced custom post type functionalities
  • Hooking a custom taxonomy to a post type
  • Understanding how hierarchy relates to taxonomies
  • Populating content into custom post types
  • Handling multiple post type templates
  • Displaying a list of links to the latest custom post type posts
  • Building static pages for the front and the blog
  • Creating a contact page with a contact form
Subjects:
Design Web CMS Web Design Projects
Software:
WordPress
Author:
Morten Rand-Hendriksen

Creating an index page for a custom post type

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.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Create an Online Portfolio with WordPress.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Notes cannot be added for locked videos.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.