Howto / By / 2 minutes of reading

The situation might occur when you are building a website for a customer or yourself and you want to change the default settings of Gutenslider. This short post explains how you can easily do that from a developer perspective. From a user perspective, you can always copy and paste the block with your favorite settings / content.

Gutenslider adds a filter to WordPress that you can use to manipulate the default attributes of the slider. If you have never worked with filters before, fear not. It is easy. Read all you need for the beginning on the WordPress filter page for plugin developers or just follow along.

The filter Gutenslider adds to alter its attributes is called gutenslider_attributes and gets passed an array of $attributes with a type and a default value that looks something like this:

$gutenslider_attributes = array(
  'gsBlockId'           => array(
    'type'    => 'string',
  ),
  'media' => array(
    'type' => 'array',
    'default' => array(),
  ),
  'align'             => array(
    'type'    => 'string',
    'default' => 'none',
  ),
  'contentMode'       => array(
    'type'    => 'string',
    'default' => 'change',
  ),
  ... //many more attributes here
)

For reference, you can find the file in your gutenslider plugin directory in src/blocks/gutenslider/attributes.php.

Adding your custom filter

First take a look at all available attributes and their default values. When you found the attribute you want to change, add a filter to one of your included php files (e.g. the theme’s function.php):

add_filter(
    'gutenslider_attributes',
    function ($attributes) {
        $new_defaults = array(
            'lgBgColor' => array(
                'type' => 'string',
                'default' => '#ff00ff',
            ),
        );
        return array_merge($attributes, $new_defaults);
    }
);

You see, that the example code changes the default background color of the lightgallery named lgBgColor to #ff00ff instead of the default #ffffff defined in attributes.php.

As Gutenslider adds two blocks Gutenslider and Gutenslide (<- a block for a single slide), you might not be able to find the attribute you are looking for in the attributes file named above. Instead, look in the attributes.php of Gutenslide (<- no ‘r’) and use the gutenslide_attributes filter instead.

The Result

You can see in the screenshot a brand new slider with the default background color set to the value of the above example.

If you need any more help and you are a Gutenslider Pro user, do not hesitate to contact us using the contact form in your WordPress backend. Settings -> Gutenslider -> Contact Us (tab at top)

Related Posts