How to create a custom gallery meta field for posts in WordPress

Hello!

If you read our last post on us releasing a new WordPress Plugin for Portfolio Galleries, you would have seen us touch a bit on creating custom fields / meta boxes for your post type.

One of the bigger challenges when creating the Portfolio Grid plugin was implementing the administrative jQuery to manipulate the WordPress media system in such a way to create custom galleries.

The galleries were needed for the plugin. When you view a single portfolio item, you will be brought to a single post page template that displays a modal gallery of additional portfolio images.

I’ll be walking you through how we manipulated the custom gallery field with jQuery. I will also show the final product which is the query to produce the gallery images as thumbnails with a modal window to expand the images if they are clicked.

Create a meta box for posts in WordPress

This was covered in the previous post, but it would make sense to go over it again in the context of how we manipulate the fields with jQuery. The first thing we want to do is add a meta box area when editing your posts. You can see at around line 6 that we are specifying the post as “post” – if your dealing with a custom post type, simply add the post type slug there.

Create a field array for the gallery

You can see below that there is two fields being created : main image and gallery images. We will be focusing primarily on Gallery images, but for the main image you will see that it is very similar other than the fact that the field will always only store one image reference.

The field array is where you store all your fields whether it be checkboxes, text fields or media.

Create a callback function for the meta box to display the fields

In the first code snippet, you can see that there is a reference to the callback function. Here we will draw out what the meta box fields will look like. For repeating fields we can iterate through them with a simple foreach field. You can use this logic for any field type, but in this example it will be images for the gallery.

There’s a few things to look at here. First, lets break down the important parts of what is being created :

Add Gallery

This button will trigger the wordpress media popup. This will be discussed in further detail later, but we are triggering the system and manipulating it from the default behavior slightly in order to be able to add images to the gallery.

Delete gallery images

Each image that is added has a little “X” in the top right, reflected by the code below :

You can see the span class “shift8_portfolio_gallery_close”. This is going to trigger a jQuery action if clicked and will be explained further.

Trigger the WordPress Media popup with jQuery

The first thing we want to do is enqueue an admin-only JS file so that we can execute jQuery in the administration area :

You will see that we are also using the wp_enqueue_media and enqueuing the media-upload script. This is built into WordPress but needs to be loaded if you are going to use the media popup system.

The most important thing is the shift8_portfolio_admin.js file.

There’s quite a lot going on in the above jQuery. All of the above code is basically an elaborate function that is triggered once you click the “Add gallery” button.

We are using the wp.media function (loaded by the enqueue functions earlier) to create a custom media popup. You can see that the meta_gallery variable is holding all the options for the wp.media instance.

How the gallery system works is we are simply taking the WordPress media ID number and assigning it to an array that we will pass to the meta box field that we created earlier. The array will simply be a list of comma separated numbers with each number representing a media item. In PHP we can take these media ID numbers and generate the image URI to load the thumbnail in the admin area or the full image in the page template.

Delete gallery items by clicking them in WordPress

The last piece to this puzzle is being able to remove individual gallery items after adding them. We created a class “shift8_portfolio_gallery_close” earlier – now we need to trigger a jQuery function when its clicked. Clicking the close button will allow me to parse the media ID number with jQuery in order to remove it from the gallery :

We are parsing the ID number, then creating an oldGallery and newGallery variable so that we can remove the ID number from the array. The new array, minus the ID number we just deleted, is passed back to the gallery field so that when the post is saved, it will update with the new ID number array.

Hopefully this helps others out there to create custom gallery fields in WordPress! You can download the plugin from WordPress or check out the github project.