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.
A good way to render your WordPress galleries in your own layout and style, is through a WordPress plugin.
1. Create a WordPress Plugin
WordPress plugins reside in the wp-content/plugins directory of your WordPress blog installation. To create a plugin -
- 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.
- Create a directory for your plugin in the wp-content/plugins directory using your plugin name.
- Create a PHP file within your plugin directory using the same name.
- 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.
<?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
Shiba Gallery 3.3
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 [...]
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 [...]
WordPress Gallery Plugin
The Shiba Gallery Plugin allows you to display a variety of javascript galleries within your WordPress blog. All you need to do is specify the type of gallery you want in your regular WordPress gallery shortcode. The Shiba Gallery is very flexible and can render post, page, and gallery objects, [...]
Shiba Skins WordPress Theme
How to Add the Media Manager Menu to the Theme Preview Interface
Debugging the w3tc Page Cache
How to Translate blogs.dir CDN Files in w3tc
How to Create Dynamic User Agent Groups in w3tc
How to Selectively Load Plugins for Specific Pages
WordPress Theme Customizer Javascript Interface
Mobile Responsive Galleries and Images
How to Add the WordPress 3.5 Media Manager Interface - Part 2
How to Add the WordPress 3.5 Media Manager Interface
Custom Post Type Permalinks – Part 2 (116)
Shiba Gallery 3.7 (28)
Add Tags and Categories to Your WordPress Page (46)
WordPress Media Library Plugin (242)
WordPress Example Plugin (7)![wordpress-search-widget1.jpg [shiba_thumb]](http://d2yedvk0boln24.cloudfront.net/wordpress-theme/wp-content/uploads/2010/03/wordpress-search-widget1-54x54.jpg)
WordPress Search Widget – How to Style It (47)![custom-taxonomy1.jpg [shiba_thumb]](http://d2yedvk0boln24.cloudfront.net/wordpress-theme/wp-content/uploads/2010/03/custom-taxonomy1-54x54.jpg)
WordPress Custom Taxonomy Input Panels (98)
Create Pop-up Windows in Your WordPress Blog with Thickbox (35)
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????
Thanks
Yeah should be able to do that by checking the post_type of the global $post in parse_gallery_shortcode and then rendering accordingly.
Thats good news! Any possibility you might be able show an example? Thanks again for the help =)
Also if you dont have time to give an example, may I ask which template file in your plugin I should examine to see how to go about scripting my own html to be outputted from the custom gallery?
I am about to release a new version of the plugin that allows you to just hook into a filter to change the gallery default values. Just have to do a bit more testing.
Sounds awesome, looking forward to when its released!
That said, if you have a moment I would love some insight as to how to go about adding multiple gallery markups to the function
Released here -
http://shibashake.com/wordpress-theme/shiba-gallery-3-7
There is example code at the end to change gallery type based on post or page.
Thank you so much! I will check this out ASAP!
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!
Best,
Shaun
You need to put all the HTML code into a PHP string, and then just return the string.
Are you familiar with PHP? You will need some of that to get the syntax right and to put in the proper image variables at the right place.
For a simple example, check out shiba-native.php or shiba-navlist.php in the Shiba Gallery plugin.
The [gallery] syntax is a shortcode, so it may also be useful to check out the shortcode API on the WP codex-
http://codex.wordpress.org/Shortcode_API
Good luck!
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?
cheers,
I can confirm that this is the case! Add all the values to a variable, rather then echoing and then return the value
This will only work on .org (i.e., on a self-hosted website).
wordpress.com does not allow plugins
http://en.support.wordpress.com/plugins/
Wow, great info, this may be the answer I was looking for.
Will this work in the wordpress.org or only in wordpress.com that has the gallery option?