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.

Here is an example WordPress native gallery-

Sometimes, however, you may want to render your photo gallery with your own layout and style. Below is the same gallery rendered using the Galleria javascript library and the Shiba Gallery Plugin.

<< Previous Stop Play > Next >>

WordPress Gallery rendered using Galleria Javascript Library and the Shiba Gallery Plugin.

A good way to render your WordPress galleries in your own layout and style, is through a WordPress plugin.

1. Create a WordPress Plugin

How to Render Your Own WordPress Photo Gallery

WordPress plugins reside in the wp-content/plugins directory of your WordPress blog installation. To create a plugin -

1. Choose a unique plugin name. No two plugins can have the same name, so pick a unique name. This is especially important if you want to submit your plugin to the WordPress Plugin Directory.
2. Create a directory for your plugin in the wp-content/plugins directory using your plugin name.
3. Create a PHP file within your plugin directory using the same name.
4. Insert the following code at the start of your main plugin file.

/*
Plugin Name: plugin_name
Plugin URI: http://your-plugin-url
Description: Your WordPress Gallery Plugin description.
Version: 1.0
Author: Your Name
Author URI: http://your-home-url
*/

Congratulations! You have just created a plugin.

If you go into the Plugins screen on your WordPress Dashboard, your new plugin should be listed there. Currently, however, it is just an empty plugin and does not do anything yet.

Here are more detailed instructions from WordPress on how to create a plugin.

2. Replace the Native WordPress Gallery Function

To render our own photo gallery, we first replace the WordPress native gallery function with our own gallery drawing function. Add the code below to your main plugin file.

<?php
remove_shortcode('gallery');
add_shortcode('gallery', 'parse_gallery_shortcode');
?>

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.

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

<?php
function parse_gallery_shortcode($atts) {
 
	global $post;
 
	extract(shortcode_atts(array(
		'orderby' => 'menu_order ASC, ID ASC',
		'id' => $post->ID,
		'itemtag' => 'dl',
		'icontag' => 'dt',
		'captiontag' => 'dd',
		'columns' => 3,
		'size' => 'medium',
		'link' => 'file'
	), $atts));
 
	$args = array(
		'post_type' => 'attachment',
		'post_parent' => $id,
		'numberposts' => -1,
		'orderby' => $orderby
		); 
	$images = get_posts($args);
 
	foreach ( $images as $image ) {		
		$caption = $image->post_excerpt;
 
		$description = $image->post_content;
		if($description == '') $description = $title;
 
                $image_alt = get_post_meta($image->ID,'_wp_attachment_image_alt', true);
 
		$img = wp_get_attachment_image_src($image->ID, $size);
 
                // render your gallery here
 
         }
}
?>

Lines 6-15 – 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 17-23 – 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.

Lines 25-37 – 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.

The wp_get_attachment_image_src function on line 33 retrieves the source image url, as well as the width and height of the image.

Depending on your needs, you may also consider using wp_get_attachment_image or wp_get_attachment_link.

Finally, insert the HTML code for rendering each of the photos in your WordPress gallery and you are done!

For an example of the code above in action, check out the Shiba Gallery Plugin.

Related Articles

<< Previous Next >>

Shiba Gallery Plugin 1.0

[Most recent Shiba Gallery Plugin description.] There are many gorgeous Javascript libraries for rendering a gallery of images, but thus far, I have been unable to find a WordPress Gallery plugin that allows me to easily integrate multiple gallery styles within a single blog. Thus ... the Shiba WordPress Gallery Plugin was born. The Shiba Gallery...

<< Previous Next >>

Shiba Gallery Plugin 2.0

The main purpose of the plugin is to allow you to display your WordPress galleries using a variety of Javascript libraries including Smooth Gallery, Galleria, Popeye, Lytebox, 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...

<< Previous Next >>

Who Says WordPress Galleries Should Only Contain Pictures

Picture galleries are an important part of a WordPress blog. They allow you to group together pictures, and render them using a variety of compelling scripts. You may display your picture album in a slide-show format, book format, thumbnail format and much more. Depending on your gallery plugin, you can zoom in, scroll, or otherwise navigate...

<Playback Stop Play >

Shiba Gallery Plugin 1.0

Shiba Gallery Plugin 2.0

Who Says WordPress Galleries Should Only Contain Pictures