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.

 

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.

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.

34
Leave a Reply

avatar
20 Comment threads
14 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
22 Comment authors
seemaAnish RaiGilbertShpend BerishaDak Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Akeisa Lowe
Guest
Akeisa Lowe

Thank you 🙂 Looking forward to the front end tutorial.
Any idea when it will be posted?

Arteangelus
Guest
Arteangelus

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.

Ryan Ours
Guest
Ryan Ours

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!

Ryan Ours
Guest
Ryan Ours

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!

Lufti
Guest
Lufti

Thanks for this tutor..

Roberto Salemi
Guest
Roberto Salemi

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.

pankaj kumar
Guest
pankaj kumar

Greate article. Going to use in my new project- a premium wprdpress theme..

Karolis Ramanauskas
Guest

Great tutorial, thanks man!

256studio
Guest

I second the notion of this being a plugin. I use the Genesis framework system.
-Scot

Linda lusy
Guest
Linda lusy

Well explained logic, that’s true and must be followed for best outputs
http://verifiedgarciniacambogia.org
http://droz-greencoffeebeanextract.com

Uche Ogobegwu
Guest
Uche Ogobegwu

Thanks for this… really Helpful

Peter Vullings
Guest
Peter Vullings

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?

Mithilesh Sah
Guest
Mithilesh Sah

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

jim-online
Guest

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?

Steve Popoola
Guest
Steve Popoola

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!

Dak
Guest
Dak

Ok everything is allright thanks for the tutorial but do you have any tutorial How to display gallery in template?

Dak
Guest
Dak

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(); ?>

Shpend Berisha
Guest

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?

Gilbert
Guest
Gilbert

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?

Anish Rai
Guest
Anish Rai

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

seema
Guest
seema

ohoooo realy useful …….thank you so much