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.
Thank you 🙂 Looking forward to the front end tutorial.
Any idea when it will be posted?
I’m glad this helped. I am currently working on it now. My goal is to have it up by tomorrow at the latest, but earlier if I can.
Let me know if you have anymore questions.
Hi there, very nice tutorial, thanx, but would you please show how to make an image gallery with taxomony categories on front-end? I’m searching for two hours could not find any clear tutorial about that. Thank you again.
I am almost done with the front-end tutorial and will release it in the next couple of days. Had some things come up at work. Is that fast enough, or are you on a deadline?
It will include sorting by category.
Thanks a million for this awesome tutorial Jason!
I’ve got every part of this working correctly except for one very important thing! For some reason, the admin-list-thumb is not displaying in the admin area. Would you be able to help me troubleshoot what’s going on?
Thanks!
Actually, it looks as though I solved the problem by setting the same image that I put into the body of the main post as the “featured image”. Is there any way to eliminate this extra step? Or is this always necessary?
Thanks!
Sorry for the late reply. I’ve been moving.
Did you make sure you added the image size ‘admin-list-thumb’ during the theme support thumbnail function? If you are calling it in the custom columns and the size doesn’t exist, it will not render.
If that doesn’t work, I’ll give you my email address and you can share you code with me and we can get it fixed.
Thanks for this tutor..
Not a problem. If you have future tutorial suggestions, just let me know.
Yes I have a question, how to implement this cpt into plugin, So I don’t need to change the code again, just installed the plugin into any themes?
thank’s
*noted
Hello,
I’m using this template: http://demo.colorlabsproject.com/?theme=lensa
Here it is already implemented function that uses the custom post ‘Photographers’ to create categories and upload pictures in the categories.
The template also allows me to select, in a page, the model -> ‘Gallery’ so that it automatically displays all the photos in ‘Photographers’.
Everything works fine.
The problem is that it is not possible to make a filter, that is, a selection of categories at the time of creation of the page.
How can I fix?
Place the code?
Thank you.
You would probably need to look over how they created the custom post type.
I downloaded the theme and did a quick look. They don’t do anything out of the ordinary when creating the post types. They create the custom post types, edit columns and even create filters in ‘includes/theme-custom-type.php’. Then update the loop in ‘template-gallery.php’ and update the corresponding template (whether you are using flickr, picasa, uploading, etc).
Just compare this tutorial to the code there and you should be good.
Hi Jason,
Thanks for this easy to read and understand tutorial. I am having the same problems as Roberto, and I don’t think your response addressed it completely (unless I’m misunderstanding).
In the Lensa theme, it is possible to create a Page with a Gallery template attribute, after which a Page Gallery Style option appears, with which one can choose the source Gallery (Post, Photograph, Flickr, etc.). However, one cannot filter even further to choose a specific category of the Photograph galleries. Any thoughts?
Thanks!
Greate article. Going to use in my new project- a premium wprdpress theme..
Great tutorial, thanks man!
I second the notion of this being a plugin. I use the Genesis framework system.
-Scot
Well explained logic, that’s true and must be followed for best outputs
http://verifiedgarciniacambogia.org
http://droz-greencoffeebeanextract.com
Thanks for this… really Helpful
Thanks for the tutorial. I think i know where the problem is that people are having, but not sure how to fix it? In the last block of code above is a function called jss_display_post_thumbnail_column. However, this is not hooked anywhere. You may have a line of code missing to add that function as a hook?
Peter,
Thanks for letting me know. I’m not at a computer at the moment, though. I’ll look into this tomorrow.
I am wondering about this too
Thanks alot, great tutorial! Do you have a solution to the unregistered jss_display_post_thumbnail_column function?
Hi.sir actually i added above code every thing is ok but unable to add images,means no any option looking how to add image. please.!
Hi Jason, I was about to delve into this and I have a couple questions: Does this only work for photos? Or can one put different media in the gallery such as videos, sound files, pdf’s, etc. And does one have the option of placing a custom thumbnail rather than the one the code grabs?
This tutorial is only for photos and treats each photo as a post. Supporting other media is totally possible, but not covered here.
Thanks Jason — could you maybe give me a hint or a clue as to where I might learn how to do that?
Hi Jason, This is one of the best tutorials on Custom Post Types that I have seen and it fitted my needs precisely. I however have the same issue with some of your readers. It seems that this function, jss_display_post_thumbnail_column is not hooked anywhere and as a reason, the thumbnails are not displayed unless you set them as featured. Can you tell me where this would be hooked? Thanks for a great help!
Ok everything is allright thanks for the tutorial but do you have any tutorial How to display gallery in template?
Sorry I need only to add into template I’m using this one
‘phototype’,
‘posts_per_page’ => 31,
‘meta_key’ => ‘gallery’,
‘orderby’ => ‘meta_value’,
‘order’ => ‘ASC’);
$my_query = null;
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) { while ($my_query->have_posts()) : $my_query->the_post(); ?>
Thanks for the tutorial everything worked perfect but I cant get archive-gallery.php to workk
I have 3 gallery categories for example cat photos and dog photos and I want to display cat images in cats category do you have any idea how to do that?
Hey, thanks for your tutorial i really learn a lot from this.
but i have one question.
how can i display the content div only in gallery page not in the home page?
hello
i have create custom post type product and create one item name as Marble . in the Marble product i create one gallery from media and want to display that galley in my marble page … for that i create one file taxnomy-product-category.php. what i write the code for that .
how i do please send me a sample code.
if u not getting my issue please reply me ASAP
ohoooo realy useful …….thank you so much