March 29, 2013

Creating a WordPress Photo Gallery Using Custom Post Types

In this post, I’m going to show you how to make a photo gallery using WordPress’ custom post type. I will walk you step by step through creating the custom post type and taxonomies.

Add Theme Support for Thumbnails

The first thing we need to do is tell WordPress that we want to use some of our own thumbnail sizes in the project by adding the code below to the functions.php file. Nothing has changed on the front end of the site, but WordPress now understands that we want to use post thumbnails with one custom photo size for our thumbnail preview. If we skip this step, WordPress would not allow featured images in our custom post type.

Register Gallery Custom Post Type

Now we get into the meat of the project. The code below, also added to the functions.php file, uses register_post_type to pass two arrays which creates the custom post type of Gallery in the admin panel.

The first array above simply sets the labels, or names, of the menu items in the wordpress admin. The second array sets the parameters that we want to use on our custom post type. You can look over all the register_post_type parameters on the WordPress Codex.

Let’s go over what parameters we are setting:

  • public – display the custom post type in the backend
  • public_queryable – the custom post type be queried from the front end
  • show_ui – display the default generated user interface
  • query_var – since we set the public queryable to true, we need to set a key
  • rewrite – rewrite permalink capability
  • hierarchical – set to false because we do not need a parent/sibling relationship
  • menu_position – default position below the comments
  • capability_type – set post as the default building string
  • supports – add the title, excerpt, editor, thumbnail and tags to the admin
  • menu_icon – show an icon of your choosing

You WordPress admin should look like the picture below now.

Screen Shot 2013-03-28 at 1.56.56 PM

Create Gallery Custom Taxonomy

Now that we have our custom post type initially setup, we need to add a taxonomy to it so the user can pick what type of photo it is. This will allow us to sort by photo type on the front end.

In the above action we register a taxonomy of Photo Type and pin it to our post type. You should now see Photo Types below the Add New in the sidebar of Gallery. Go ahead and add Wedding, Landscape and Portrait to the photo type category list.

Gallery Photo Types

You can also go to add a new Gallery post and see that Photo Type has been added to the sidebar and that it displays our custom Photo Type categories.

Add New Photo Type Categories

Add Customized Columns to the Custom Post Type Admin

Now that we have our custom post type and taxonomy setup, lets jazz up the default Gallery post listings. Right now it is pretty simple, as it displays the title of the post and date only.

The above code injects custom columns in the custom post type and also grabs the featured thumbnail image and displays it for the user. This makes it easier for the user to find the photo they are looking for. You can see the change in the image below, though we do not have any posts added yet.

Gallery Custom Post Type

Go ahead and add some photos. As you can see below, the user can now see all the metadata we have added.

Gallery Custom Post Type Posts

This is the first step in creating a photo gallery theme. Continue to the next tutorial Create a Filterable WordPress Photo Gallery Using Isotope.