How to Render Your Own WordPress Photo Gallery

When you insert a WordPress gallery into your blog post, it gets rendered in native WordPress gallery mode. In particular, each of the photos in your gallery gets rendered as a thumbnail, and clicking on the thumbnail will connect you to the photo source file, or the photo attachment page.

This will tie your WordPress galleries to a new rendering function, namely parse_gallery_shortcode.

3. Define Your New Gallery Rendering Function

Now we just need to define our new gallery rendering function.

The parse_gallery_shortcode function gets handed an array by the WordPress system that contains a list of gallery options. Here are the basic gallery options supported by WordPress.

NOTE – As outlined in the gallery shortcode page, there was a significant change in media workflow since WordPress 3.5. This was because the new media manager interface allows for individual images to be selected and ordered, thereby producing a list of image ids. This is in contrast to the pre-3.5 system which required images to be attached to a parent post, and then shows all images associated with a single parent id.

Since several people have asked about this in the comments section, I have updated the code below to take into account this new change.

Lines 6-11 – Check if we are using a list of ids (new media flow). If so, put the relevant data in the proper attribute elements.

Lines 13-23 – Extract the current gallery options. Here, we can specify default values for any gallery option that is left undefined by the user. To add a new gallery option, simply add it to the shortcode_atts array.

The extract WordPress function will then put its results into local variables named after each of the gallery options. For example, $id will contain the gallery id, $size will contain the gallery size and so on.

Lines 26-31 – Once we have extracted all the relevant gallery options, we can retrieve all the images or photos from the relevant WordPress gallery using the WordPress get_posts function. Here, we prepare the arguments for our get_posts query to search for images.

Lines 33-38 – If we are using the new id-list system, we enter the list of ids into the ‘include’ argument. Otherwise, we use the old system which extracts images based on parent-id (‘post_parent’ argument).

Line 40 – Call the get_posts function to retrieve the relevant set of images.

Lines 42-52 – Render the images in the WordPress gallery according to your own layout and style.

Note – that there are four pieces of text associated with each WordPress image – title, alternate text, caption, and description. You can change these by going into Media >> Library, and editing the relevant image.

Titles get stored in the post_title attribute of the image object.Captions get stored in the post_excerpt attribute of the image object.Descriptions get stored in the post_content attribute of the image object.Alternate text gets stored as meta data associated with the image object.

Related Articles

The Shiba Gallery Plugin allows you to display your WordPress galleries using a variety of Javascript libraries including Noobslide, TinySlideshow, SlimBox, Popeye, Picture Slides, and the WordPress native gallery. You can display as many galleries as you want, and have different types of galleries within the same blog page. Here is a detailed description of the Shiba Gallery Plugin. New features for for Shiba Gallery 3.3 - 1. Gallery Frames You may now assign a variety of styled [...]

Hey I don’t mean to criticize but your code is really not doing the right thing. Firstly as some other comments shared, you are pulling all attachments inside the post, not just from that gallery. The other problem with doing this is the function will no longer respects the order by which the images were set up in the gallery; it is passed as $atts to the shortcode function but disregarded completely.

This is an older article, written before the 3.5 update where individual image ids are specified, rather than using the parent-attach system. Refer to http://codex.wordpress.org/Gallery_Shortcode for a summary of shortcode history and the old vs. new media flow.

Hi, thanks for the tips. However i’ve a problem. i’have multiple gallery in a post, and with your code, each gallery display all attachment image to the post. How to only have the images that are in each gallery ? thanks

Hi, I just need a line of code to write instead of your “render your gallery here” only to publish the images, but I can’t understand which variable to use! I’m not so good with PHP… Can you please help?

Question; after doing all of this I still cannot scroll through my photos that are in my gallery. There is no “next” button. When I click on an image it just loads that one image and I have to click the back button and find where I was in the gallery to click on the next one. Is there an easy way to fix this? Thanks

I used this code to create a gallery. But now I found out that if a user changes the images in the gallery from within the editor the changes are not respected anymore – for example: when I delete one image from the gallery and I look at the post I still see this image. It seems that the images are kept as attachments of the post. As your code uses the attachments of the post and not really the ids from within the shortcode (where the image’s id is deleted correctly) this issue appears. Is there any other way to change the output code of the gallery using the correct images?

Great info! Tutorials like this tend to be far in between or not available at all it seems so thanks for taking the time to share…

Just one question: Is it possible to have “multiple” formatting versions with this method? ie. Pages display galleries as only medium sized thumbnails, while posts maybe have something like a series of smaller thumbs that act as pagination to for one larger image that changes such as your example????

Ok, I see what youve done in your example… What Id like to do however is script out my own version of your plugin essentially that uses the Slides plugin (http://slidesjs.com/) instead. Id like to output different styles of galleries all utilizing this plugin though.

In your original example of how to render your own gallery you left out how to input your own HTML markup – thats the part Im hung up on at the moment 🙁

Your plugin looks great but it doesnt suite my needs for my project unfortunately so I need to build my own…that said, Im still learning how to hijack WordPress’ native gallery and render my own so a more detailed example of how that can be done is what Im looking for.

If you dont have the time to script something like that out I fully understand and I appreciate the time youve already offered me…If you even might have some good links for me to reference to help grasp this topic that would be a huge help as well!

Hey there, I’ve added this to my functions file but it’s moved the gallery to the top of the post. Would you happen to know why? I thought it may be because this function echos rather then returns a result?