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.
|
1 2 3 4 5 6 7 8 9 |
<?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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<?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.
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<?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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
<?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.
Go ahead and add some photos. As you can see below, the user can now see all the metadata we have added.
This is the first step in creating a photo gallery theme. Continue to the next tutorial Create a Filterable WordPress Photo Gallery Using Isotope.