Custom Click Actions

This document explains how to use the custom click action filter available in the Divi FilterGrid plugin.

Divi FilterGrid has 6 available click actions which can be set in the module’s Content tab -> Posts Elements Section -> Click Action option:

• None
• Link to post
• Show post in popup
• Show featured image in lightbox
• Show featured images in lightbox gallery
• Open custom lightbox gallery

Setting the click action in the module’s settings will assign that click action to every item in the grid.

The custom click action filter below will override the global click action detailed above, allowing you to set the click action on a per post basis. In other words, each post can have it’s own click action.

The following code is an example of how the custom click action filter can be applied to each post. You would add this code to your child theme’s functions.php file:

In the example above, we are checking the value of the “dfg_click_action” custom field. This custom field would get added to each post you wanted to create a custom click action for. Next, we are returning a different value to the filter depending on the value of the custom field. Since the custom field values are the same as the click action values, it would make more sense to simply check if the field exists and return its value if it did. For this tutorial I am displaying the values to make it easier to see how the filter works.

These are the corresponding return values needed for each click action:

• None – none
• Link to post – link
• Show post in popup – popup
• Show featured image in lightbox – lightbox
• Show featured images in lightbox gallery – lightbox_gallery
• Open custom lightbox gallery – gallery_cf

Notice in the example code above if the “dfg_click_action” custom field is empty, we revert back to the $default_action. This is the action set in the module’s Click Action option mentioned earlier. Using the $default_action, you can see how you could set a click action for all items in the grid in the module’s settings and only change the click action for certain items.

The example above uses the value of a custom field, but you could apply any logic to the filter. For example you could apply different click actions to different post types, posts with a specific category or tag, products that are affiliate products vs internal products, etc.

Lightbox Gallery

For the “Open lightbox gallery click action (lightbox_gallery), only featured images of other items in the grid that also have the lightbox OR lightbox_gallery click action will be displayed in the lightbox gallery. For example, if the default click action is set to “Link to post” in the module’s settings and only one item’s click action is changed to lightbox_gallery using the filter, only that item’s featured image will be displayed in the lightbox gallery.

Alternatively, you could set the default click action to “Show featured image in lightbox” or “Show featured images in lightbox gallery” in the module’s settings. This will display the featured image in a lightbox or all featured images in a lightbox gallery by default. Then you could override the click action for only specific posts using the custom click action filter.

Custom Lightbox Gallery

For the “Open custom lightbox gallery click action (gallery_cf), you’ll need to add the custom lightbox filter to your child theme’s functions.php file. If this filter is not added, any items that have the gallery_cf will not know what images to display and will simply do nothing when clicked.

Alternatively, you could set the module’s default click action to “Open custom lightbox gallery” and set the custom field in the module which will contain the array of images. Then you could use the custom click action filter to check if each post has the custom field that contains the array of images. If not, change the click action to something else.

Link Target & Custom URLs

The Divi FilterGrid plugin has the ability to open posts in a new tab using the Link Target option in the module’s settings. It also has the ability to link to a custom URL using the Custom URL option which also has it’s own Custom URL Link Target option. If the click action is set to “link”, all of these options are recognized.

In other words, you can create a very complex combination of click actions by setting these options along with the custom click action filter. Posts that link to themselves can open in the same tab, posts that link to an external URL can open in a new tab, and posts that have a popup or lightbox click action will perform those actions.