How to use gallery_style filter in WordPress

gallery_style filter

Filters the default gallery shortcode CSS styles.

To use the gallery_style filter, first you have to register it using add_filter. You can write this code into functions.php of your activated theme or in a custom WordPress Plugin.

We at WePlugins always prefer to create a custom WordPress Plugin while using hooks so nothing breaks when you update your WordPress Theme in the future.

In the below live example, we have defined a function weplugins_modify_gallery_style_defaults which takes 1 parameter and we registered it using add_filter. The first parameter gallery_style is the name of the hook, the second parameter weplugins_modify_gallery_style_defaults is the name of the function which needs to be called, the third parameter is the priority of calling the hook if the same hook is used multiple times, and the last parameter is the number of arguments (if any) to be passed in the registered function.

Sometime, you have to remove a registered hook so you can use remove_filter to remove gallery_style filter.

Parameters

Below the 1 parameter is required to use this hook.

• $gallery_style : (string) Default CSS styles and opening HTML div container for the gallery shortcode output.

Live Example

apply_filters( 'gallery_style', string $gallery_style )

Below is an example how you can use this hook.

Example 1: Modifying Default Gallery Styles

This example shows how to update the gallery styles to fit your website requirements.

    function weplugins_modify_gallery_style_defaults($gallery_style) { 
        // Update the $gallery_style variable according to your website requirements and return this variable. 
        return $gallery_style; 
    }
    // add the filter
    add_filter( "gallery_style", "weplugins_modify_gallery_style_defaults", 10, 1 );
    

Example 2: Conditional Modification of Gallery Styles

In this example, we modify the gallery styles only if a certain condition is met.

    function weplugins_conditional_gallery_style($gallery_style) { 
        if (is_page('gallery-page')) {
            // Modify $gallery_style for the 'gallery-page'
            $gallery_style .= '<style> .gallery-item { margin: 10px; } </style>';
        }
        return $gallery_style; 
    }
    // add the filter
    add_filter( "gallery_style", "weplugins_conditional_gallery_style", 10, 1 );
    

Example 3: Removing the Gallery Style Filter

To remove a hook callback, use the example below.

    // remove the filter
    remove_filter( "gallery_style", "weplugins_modify_gallery_style_defaults", 10, 1 );
    

Please make sure to provide the same callback function name, priority, and number of arguments while removing the hook callback.

Contact Us

If you’re having any trouble using this hook, please contact us and we’d be happy to assist you.