Creating a WordPress Photo Gallery Using Custom Post Types

Mar 29, 2013

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.

<?php
//----------------------------------------------
//--------------add theme support for thumbnails
//----------------------------------------------
if ( function_exists( 'add_theme_support')){
	add_theme_support( 'post-thumbnails' );
}
add_image_size( 'admin-list-thumb', 80, 80, true); //admin thumbnail
?>

<?php

//----------------------------------------------

//--------------add theme support for thumbnails

//----------------------------------------------

if ( function_exists( 'add_theme_support')){

add_theme_support( 'post-thumbnails' );

}

add_image_size( 'admin-list-thumb', 80, 80, true); //admin thumbnail

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.

<?php
//----------------------------------------------
//----------register and label gallery post type
//----------------------------------------------
$gallery_labels = array(
	'name' => _x('Gallery', 'post type general name'),
	'singular_name' => _x('Gallery', 'post type singular name'),
	'add_new' => _x('Add New', 'gallery'),
	'add_new_item' => __("Add New Gallery"),
	'edit_item' => __("Edit Gallery"),
	'new_item' => __("New Gallery"),
	'view_item' => __("View Gallery"),
	'search_items' => __("Search Gallery"),
	'not_found' =>  __('No galleries found'),
	'not_found_in_trash' => __('No galleries found in Trash'), 
	'parent_item_colon' => ''
		
);
$gallery_args = array(
	'labels' => $gallery_labels,
	'public' => true,
	'publicly_queryable' => true,
	'show_ui' => true, 
	'query_var' => true,
	'rewrite' => true,
	'hierarchical' => false,
	'menu_position' => null,
	'capability_type' => 'post',
	'supports' => array('title', 'excerpt', 'editor', 'thumbnail'),
	'menu_icon' => get_bloginfo('template_directory') . '/images/photo-album.png' //16x16 png if you want an icon
); 
register_post_type('gallery', $gallery_args);
?>

<?php

//----------------------------------------------

//----------register and label gallery post type

//----------------------------------------------

$gallery_labels = array(

'name' => _x('Gallery', 'post type general name'),

'singular_name' => _x('Gallery', 'post type singular name'),

'add_new' => _x('Add New', 'gallery'),

'add_new_item' => __("Add New Gallery"),

'edit_item' => __("Edit Gallery"),

'new_item' => __("New Gallery"),

'view_item' => __("View Gallery"),

'search_items' => __("Search Gallery"),

'not_found' => __('No galleries found'),

'not_found_in_trash' => __('No galleries found in Trash'),

'parent_item_colon' => ''

);

$gallery_args = array(

'labels' => $gallery_labels,

'public' => true,

'publicly_queryable' => true,

'show_ui' => true,

'query_var' => true,

'rewrite' => true,

'hierarchical' => false,

'menu_position' => null,

'capability_type' => 'post',

'supports' => array('title', 'excerpt', 'editor', 'thumbnail'),

'menu_icon' => get_bloginfo('template_directory') . '/images/photo-album.png' //16x16 png if you want an icon

);

register_post_type('gallery', $gallery_args);

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.

<?php
//----------------------------------------------
//------------------------create custom taxonomy
//----------------------------------------------
add_action( 'init', 'jss_create_gallery_taxonomies', 0);

function jss_create_gallery_taxonomies(){
	register_taxonomy(
		'phototype', 'gallery', 
		array(
			'hierarchical'=> true, 
			'label' => 'Photo Types',
			'singular_label' => 'Photo Type',
			'rewrite' => true
		)
	);	
}
?>

<?php

//----------------------------------------------

//------------------------create custom taxonomy

//----------------------------------------------

add_action( 'init', 'jss_create_gallery_taxonomies', 0);

function jss_create_gallery_taxonomies(){

register_taxonomy(

'phototype', 'gallery',

array(

'hierarchical'=> true,

'label' => 'Photo Types',

'singular_label' => 'Photo Type',

'rewrite' => true

)

);

}

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.

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 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.

<?php
//----------------------------------------------
//--------------------------admin custom columns
//----------------------------------------------
//admin_init
add_action('manage_posts_custom_column', 'jss_custom_columns');
add_filter('manage_edit-gallery_columns', 'jss_add_new_gallery_columns');

function jss_add_new_gallery_columns( $columns ){
	$columns = array(
		'cb'				=>		'<input type="checkbox">',
		'jss_post_thumb'	=>		'Thumbnail',
		'title'				=>		'Photo Title',
		'phototype'			=>		'Photo Type',
		'author'			=>		'Author',
		'date'				=>		'Date'
		
	);
	return $columns;
}

function jss_custom_columns( $column ){
	global $post;
	
	switch ($column) {
		case 'jss_post_thumb' : echo the_post_thumbnail('admin-list-thumb'); break;
		case 'description' : the_excerpt(); break;
		case 'phototype' : echo get_the_term_list( $post->ID, 'phototype', '', ', ',''); break;
	}
}

//add thumbnail images to column
add_filter('manage_posts_columns', 'jss_add_post_thumbnail_column', 5);
add_filter('manage_pages_columns', 'jss_add_post_thumbnail_column', 5);
add_filter('manage_custom_post_columns', 'jss_add_post_thumbnail_column', 5);

// Add the column
function jss_add_post_thumbnail_column($cols){
	$cols['jss_post_thumb'] = __('Thumbnail');
	return $cols;
}

function jss_display_post_thumbnail_column($col, $id){
  switch($col){
    case 'jss_post_thumb':
      if( function_exists('the_post_thumbnail') )
        echo the_post_thumbnail( 'admin-list-thumb' );
      else
        echo 'Not supported in this theme';
      break;
  }
}
?>

<?php

//----------------------------------------------

//--------------------------admin custom columns

//----------------------------------------------

//admin_init

add_action('manage_posts_custom_column', 'jss_custom_columns');

add_filter('manage_edit-gallery_columns', 'jss_add_new_gallery_columns');

function jss_add_new_gallery_columns( $columns ){

$columns = array(

'cb' => '<input type="checkbox">',

'jss_post_thumb' => 'Thumbnail',

'title' => 'Photo Title',

'phototype' => 'Photo Type',

'author' => 'Author',

'date' => 'Date'

);

return $columns;

}

function jss_custom_columns( $column ){

global $post;

switch ($column) {

case 'jss_post_thumb' : echo the_post_thumbnail('admin-list-thumb'); break;

case 'description' : the_excerpt(); break;

case 'phototype' : echo get_the_term_list( $post->ID, 'phototype', '', ', ',''); break;

}

//add thumbnail images to column

add_filter('manage_posts_columns', 'jss_add_post_thumbnail_column', 5);

add_filter('manage_pages_columns', 'jss_add_post_thumbnail_column', 5);

add_filter('manage_custom_post_columns', 'jss_add_post_thumbnail_column', 5);

// Add the column

function jss_add_post_thumbnail_column($cols){

$cols['jss_post_thumb'] = __('Thumbnail');

return $cols;

}

function jss_display_post_thumbnail_column($col, $id){

switch($col){

case 'jss_post_thumb':

if( function_exists('the_post_thumbnail') )

echo the_post_thumbnail( 'admin-list-thumb' );

else

echo 'Not supported in this theme';

break;

}

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