6

I would like to add a class to my gallery short code, this is how I have added my class:

[gallery class="small" columns="2" ids="350,349,302,305"].

Now the confusion comes in, I am not sure how to specify the class in my css.

I have tried:

.small .gallery 
.gallery-1 img 
.gallery
11

Here are three methods

Approach #1

It's common to wrap the output with custom HTML. We can do that by using the post_gallery filter and the gallery_shortcode() callback:

/**
 * HTML Wrapper - Support for a custom class attribute in the native gallery shortcode
 */
add_filter( 'post_gallery', function( $html, $attr, $instance )
{
    if( isset( $attr['class'] ) && $class = $attr['class'] )
    {
        // Unset attribute to avoid infinite recursive loops
        unset( $attr['class'] ); 

        // Our custom HTML wrapper
        $html = sprintf( 
            '<div class="wpse-gallery-wrapper-%s">%s</div>',
            esc_attr( $class ),
            gallery_shortcode( $attr )
        );
    }

    return $html;

}, 10 ,3 );

Example:

If we set the class attribute to the native gallery shortcode as small:

[gallery class="small" columns="2" ids="350,349,302,305"].

then the HTML output will be:

<div class="wpse-gallery-wrapper-small">
    <!-- The default gallery HTML output comes here -->
</div>

where we can now target it with the .wpse-gallery-wrapper-small class selector.

Approach #2

Another approach would be to modify the current class attribute with help of some string replacements. Let's use the post_gallery and the gallery_style filters together:

/**
 * HTML Replacement - Support for a custom class attribute in the native gallery shortcode
 */
add_filter( 'post_gallery', function( $html, $attr, $instance )
{
    add_filter( 'gallery_style', function( $html ) use ( $attr )
    {
        if( isset( $attr['class'] ) && $class = $attr['class'] )
        {
            unset( $attr['class'] );

            // Modify & replace the current class attribute
            $html = str_replace( 
                "class='gallery ",
                sprintf( 
                    "class='gallery wpse-gallery-%s ",
                    esc_attr( $class )
                ),
                $html
            );
        }
        return $html;
    } );

    return $html;
}, 10 ,3 );

Example:

Using this shortcode:

[gallery class="small" columns="2" ids="350,349,302,305"].

will give the following HTML output:

<style>...</style>

<div id="gallery-1" class='gallery wpse-gallery-small ... '> ... </div>

where the class selector is .wpse-gallery-wrapper-small.

Approach #3

Use the default id selector for the gallery instance.

id='gallery-1' 

or the default class selectors:

class='gallery galleryid-123 gallery-columns-3 gallery-size-thumbnail'

where 123 is the current post id.

  • Thanks for the edit, my counting is not always perfect ;-) @PieterGoosen – birgire Nov 10 '15 at 18:33
  • Just caught it because I read your post the first time before the final edit ;-) – Pieter Goosen Nov 10 '15 at 18:35
  • ... or maybe 1+1+1 = 2, for small values of 1 ;-) @PieterGoosen – birgire Nov 10 '15 at 18:40
  • Mind you, you are the mathematician (thanks for the auto correct feature on the spelling here), so anything goes, hahaha. ;-) – Pieter Goosen Nov 10 '15 at 18:43
  • 1
    hehe or a math clown ;-) yes I really like the auto correction feature in the comments. @PieterGoosen – birgire Nov 10 '15 at 18:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.