1

I am trying to add a container div to the WordPress gallery, I have this so far....

function gallery_custom( $output ) {

    $return = '<div class="mydiv">';
    $return = $output;
    $return = '</div>';

    return $return;
}

add_filter( 'post_gallery', 'gallery_custom', 10, 3 );

This is not returning anything, any ideas where I am going wrong?

2 Answers 2

2

Adding an HTML wrapper to the gallery can be done using the post_gallery filter. Here's a fully commented example.

add_filter( 'post_gallery', 'gallery_custom', 10, 3 );
/**
 * Filters the default gallery shortcode output.
 *
 * If the filtered output isn't empty, it will be used instead of generating
 * the default gallery template.
 *
 * @see gallery_shortcode()
 *
 * @param string $output   The gallery output. Default empty.
 * @param array  $attr     Attributes of the gallery shortcode.
 * @param int    $instance Unique numeric ID of this gallery shortcode instance.
 */
function gallery_custom( $output, $attr, $instance ) {
    // Remove the filter to prevent infinite loop.
    remove_filter( 'post_gallery', 'gallery_custom', 10, 3 );

    // Add opening wrapper.
    $return = '<div class="mydiv">';

    // Generate the standard gallery output.
    $return .= gallery_shortcode( $attr );

    // Add closing wrapper.
    $return .= '</div>';

    // Add the filter for subsequent calls to gallery shortcode.
    add_filter( 'post_gallery', 'gallery_custom', 10, 3 );

    // Finally, return the output.
    return $return;
}

  • In gallery_custom(), it's important to remove the post_gallery filter before calling gallery_shortcode() because otherwise we'd run into an infinite loop.

  • Note that output needs to be concatenated to $return. In your original code, $return is continuously being overwritten because = is used instead of .= after the string has been initialized.

  • The main output is generated using the standard gallery output function, gallery_shortcode( $attr ); Our filter will not be applied in this call because we've removed it at this point.

  • After the gallery output has been concatenated to $return, we add the closing HTML tag and add our filter back so that it will be run the next time the gallery shortcode function is called.

  • Finally we return the output.

Alternate solution: Replace [gallery] shortcode function:

Here's another approach to solving the problem. This time the default gallery output function, gallery_shortcode() is removed from the gallery shortcode string. Then, a replacement function, wpse_custom_gallery_shortcode() is wired up to the original gallery shortcode string.

// Replace the default [gallery] shortcode function with a custom function.
add_action( 'init', 'wpse_replace_gallery_shortcode' ); 
function wpse_replace_gallery_shortcode() {
    remove_shortcode( 'gallery', 'gallery_shortcode' );
    add_shortcode( 'gallery', 'wpse_custom_gallery_shortcode' );
}

// Customized gallery shortcode function.
// See gallery_shortcode() for documentation.
function wpse_custom_gallery_shortcode( $attr ) {
    $gallery = gallery_shortcode( $attr );

    if ( $gallery ) {
        return '<div class="mydiv">' . $gallery . '</div>';
    }
} 
1
1

To achieve this you have to develop more custom code like following.

function gallery_custom( $output, $attr ) {

    global $post;

    if ( isset($attr['orderby'] ) ) {
        $attr['orderby'] = sanitize_sql_orderby( $attr['orderby'] );
        if ( ! $attr['orderby'] ) {
            unset( $attr['orderby'] );
        }
    }

    extract(shortcode_atts(array(
        'order' => 'ASC',
        'orderby' => 'menu_order ID',
        'id' => $post->ID,
        'itemtag' => 'dl',
        'icontag' => 'dt',
        'captiontag' => 'dd',
        'columns' => 3,
        'size' => 'thumbnail',
        'include' => '',
        'exclude' => ''
    ), $attr ));

    $id = intval( $id );
    if ('RAND' == $order ) $orderby = 'none';

    if ( ! empty( $include ) ) {
        $include = preg_replace('/[^0-9,]+/', '', $include);
        $_attachments = get_posts(array('include' => $include, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby));

        $attachments = array();
        foreach ($_attachments as $key => $val) {
            $attachments[$val->ID] = $_attachments[$key];
        }
    }

    if ( empty( $attachments ) ) return '';

    $output = '<div class="mydiv">';

    // Here's your actual output, you may customize it to your need
    $output .= "<div class='gallery galleryid-$columns gallery-columns-$columns gallery-size-$size'>";

    // Now you loop through each attachment
    foreach ( $attachments as $id => $attachment ) {
        // Fetch the thumbnail (or full image, it's up to you)

        $img = wp_get_attachment_image_src( $id, $size );

        $output .= '<figure class="gallery-item"><div class="gallery-icon landscape">';
        $output .= '<img src="' . $img[0] . '" width="' . $img[1] . '" height="' . $img[2] . '" alt="" />';
        $output .= '</div>';
        if ( $captiontag && trim($attachment->post_excerpt) ) {
            $output .= "
                <{$captiontag} class='gallery-caption'>
                " . wptexturize($attachment->post_excerpt) . "
                </{$captiontag}>";
        }
        $output .= '</figure>';
    }

    $output .= '</div></div>';

    return $output;
}

add_filter( 'post_gallery', 'gallery_custom', 10, 2 );

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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