WordPress doesn’t make it very easy to modify aspects of the gallery shortcode. Some attributions:
- Thanks to user peterbra for really putting the whole thing together a year ago.
- Thanks to user birgire for coming up with a solution as far as adding the attribute in a meaningful way.
The other option besides birgires ( as far as I know ) is to pretty much rebuild the shortcode by copying existing code the cores media.php file which is a pain.
Some things to note on the initial additional_gallery_settings()
function, from peterbra:
- The
tmpl-
prefix is required. - Your field should have a
data-setting
attribute
Just throw the following code into your functions.php
file:
/**
* Set up the new field in the media module.
*
* @return void
*/
function additional_gallery_settings() {
?>
<script type="text/html" id="tmpl-custom-gallery-setting">
<span>Style</span>
<select data-setting="style">
<option value="default-style">Default Style</option>
<option value="custom-style">Custom Style</option>
<option value="ie7-style">IE7 Style</option>
</select>
</script>
<script type="text/javascript">
jQuery( document ).ready( function() {
_.extend( wp.media.gallery.defaults, {
style: 'default-style'
} );
wp.media.view.Settings.Gallery = wp.media.view.Settings.Gallery.extend( {
template: function( view ) {
return wp.media.template( 'gallery-settings' )( view )
+ wp.media.template( 'custom-gallery-setting' )( view );
}
} );
} );
</script>
<?php
}
add_action( 'print_media_templates', 'additional_gallery_settings' );
/**
* HTML Wrapper - Support for a custom class attribute in the native gallery shortcode
*
* @param string $html
* @param array $attr
* @param int $instance
*
* @return $html
*/
function customize_gallery_abit( $html, $attr, $instance ) {
if( isset( $attr['style'] ) && $style = $attr['style'] ) {
// Unset attribute to avoid infinite recursive loops
unset( $attr['style'] );
// Our custom HTML wrapper
$html = sprintf(
'<div class="wpse-gallery-wrapper-%s">%s</div>',
esc_attr( $style ),
gallery_shortcode( $attr )
);
}
return $html;
}
add_filter( 'post_gallery', 'customize_gallery_abit', 10, 3 );