Making A Photo Gallery Drop Down List in WordPress

Making a Drop Down List Photo Gallery in WordPress


Since I have so many pictures posted on this site, I wanted to give everyone (including myself) a convenient way to find them. In order to do that, I decided to make a drop down list of every post that has a “photo gallery”, which is essentially a bunch of pictures taken at a live performance.

The Task: Create a drop down list (aka a “Select” input) of posts and pages that contain “photo gallery” images.

The Problem: Some legacy “photo galleries” are WordPress pages not posts, so I couldn’t easily use WP Categories or Tags to create a drop down list.

The Solution: I used metadata/custom fields. Both pages and posts contain custom fields, so it was more or less my only option, but it also turned out to be fairly simple and gave me a lot of flexibility. The relevant code is contained in my sidebar.php and looks something like this:

//New Photo Galleries Query
$newPhotoGalleries =  query_posts('meta_key=gallery%20title&post_type=

The first thing I needed to do was run a query on the “gallery title” custom field, which could pretty much be named anything you want, that’s just what I chose to call it. Once I got back the results from the query_posts, I essentially had an array of all of the posts that had been marked as “photo galleries” my newly added custom field. My next step was to loop through the array and populate the drop down list. Here’s the relevant bit of code for that part:

<select name="selNewGalleries" 
<option value="">Select Gallery</option>                
<?php if ($newPhotoGalleries) {
 foreach ($newPhotoGalleries as $newPhotoGallery) {
  $page_name = htmlspecialchars(get_post_meta($newPhotoGallery->ID, 
  'Gallery Title', single));
  $page_name = truncate($page_name, 50, '...');
  $page_url = $newPhotoGallery->guid;
  echo "\n";

In the foreach loop I use the value of “Gallery Title” to get the name of the photo gallery for the drop down list. That name could be practically anything, I just run it through the htmlspecialchars() function to avoid any problems on the display side. I also am using a custom truncate() function to limit the number of characters in the name of the select input, so that the drop down list width does not exceed the width of my html container on the front end. Finally, I’m using the “guid” property of the array so that the destination URL will work no matter which page of my site a user is on. That’s it! Download all the code including the truncate function over here.

One Last Tip! In order to get this code to work, you need to add a custom field to each photo gallery page or post and give it a name/key of “Gallery Title” and a value of whatever you want to show up in the drop down list.

One Comment

  1. Nick says:

    I been looking for something like this for a while now. I might try this later, hopefully I can get it to work. I’m a semi-professional photographer and I been trying to find a really simple and easy way to share albums of photos I take at events and share some albums with clients.

    I haven’t found a way to do, but this could be the way, i’m not sure, but i’m going to keep looking…

Comments are closed.