Custom wordpress gallery option

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 );

Leave a Comment