Using WordPress ‘gallery_style’ PHP filter

by

The gallery_style WordPress PHP filter lets you modify the default gallery shortcode CSS styles and opening HTML div container.

Usage

add_filter('gallery_style', 'customize_gallery_style');

function customize_gallery_style($gallery_style) {
    // Your custom code here
    return $gallery_style;
}

Parameters

  • $gallery_style (string) – The default CSS styles and opening HTML div container for the gallery shortcode output.

More information

See WordPress Developer Resources: gallery_style

Examples

Remove the inline CSS styles

To remove the inline CSS styles from the gallery shortcode output:

function remove_inline_styles($gallery_style) {
    return "<div class='gallery'>";
}
add_filter('gallery_style', 'remove_inline_styles');

To add a custom CSS class to the gallery container:

function add_custom_gallery_class($gallery_style) {
    return str_replace("class='gallery", "class='gallery custom-gallery-class", $gallery_style);
}
add_filter('gallery_style', 'add_custom_gallery_class');

To change the gallery container tag from a div to a section:

function change_gallery_container_tag($gallery_style) {
    return str_replace("<div", "<section", $gallery_style);
}
add_filter('gallery_style', 'change_gallery_container_tag');

To add a custom data attribute to the gallery container:

function add_custom_data_attribute($gallery_style) {
    return str_replace("class='gallery", "class='gallery' data-custom-attribute='example'", $gallery_style);
}
add_filter('gallery_style', 'add_custom_data_attribute');

Modify the default CSS styles

To modify the default CSS styles applied to the gallery container:

function modify_default_css_styles($gallery_style) {
    $new_styles = "border: 1px solid #ccc; padding: 10px;";
    return str_replace("style='", "style='".$new_styles, $gallery_style);
}
add_filter('gallery_style', 'modify_default_css_styles');