Docs v

Everything you need to build stunning filterable galleries.

Video Tutorial Dashboard

Documentation

1. Quick Start 2. Filter System 3. Media Manager 4. Visual Styling 5. Shortcodes 6. Deep Linking 7. Troubleshooting

WP Frank Support

Need a custom feature or expert help? Contact our premium support.

1. Quick Start Guide

Add New: Click the "Add New Gallery" button from the main list.

Setup Filters: Create your filter tags in the Filters tab.

Pick Images: Select media from your WordPress library in the Images tab.

Assign: Click the tag icon on each image to tell it which filters to follow.

Save & View: Hit "Save" and paste the shortcode into any page.

2. Managing the Filter System

Filters are the core of your gallery. You can organize them in two levels:

Parent Filters: These appear as the main filter buttons on your website.

Child Filters (Sub-categories): You can assign a parent to any filter to create a dropdown or organized hierarchy.

Note: Images assigned to a Child filter will automatically be counted towards the Parent filter total.

Default Selected Filter:

You can choose which filter is selected by default when your gallery page loads. In the Settings tab, locate Default Selected Filter. You can choose "All Filters", "None", or a specific category. Click the refresh icon next to the dropdown to sync any recent filter changes.

3. Advanced Media Controls

Each image in your gallery allows for full custom metadata:

Custom Title: Use this to override the default attachment title.
Description: High-resolution description that appears on hover.
Custom Link: Turn any image into a direct link to another page.

4. Visual Styling & Settings

Head to the Settings tab to master the appearance:

Layout Grid

Set columns for Desktop, Tablet, and Mobile independently.

Color Tokens

Customize button backgrounds, text colors, and hover overlays.

Load More

Enable infinite pagination with custom button text and colors.

Animations

Choose from CSS-driven hover effects and image entrance fades.

5. Published Shortcodes

                        PHP
                            TAG
                        [ufg-gallery id="1"]
                    

Paste this ID anywhere in your WordPress editor (Gutenberg, Elementor, Divi) to render the gallery. To change the gallery, just update the ID number.

6. Deep Linking & URL Filtering

You can link directly to a specific pre-filtered view of your gallery by appending the filter's slug/key to the URL. This allows you to send direct links to pre-filtered collections of images to your clients or users.

Method 1: Using URL Hash (Dynamic)

Append #ufg-filter=your-filter-slug to the page URL.

                                http://yourwebsite.com/gallery/#ufg-filter=brands
                            

💡 Tip: Clicking on filter buttons dynamically updates the hash in the browser address bar, allowing you to copy the direct link at any time without reloading the page.

Method 2: Using Query Parameters

Append ?ufg_filter=your-filter-slug to the page URL.

                                http://yourwebsite.com/gallery/?ufg_filter=brands
                            

🌿 Full Multi-Level Hierarchy Support

If you link to a nested subcategory (e.g. level 3 filter), the gallery will automatically expand all its parent categories, highlight the selection path, and active the filter on page load.

7. Troubleshooting

Double Counting?

In version 6.0.1+ we have fixed recursive counting. Ensure your child images are properly assigned to parent groups for accurate counts.

Style not updating?

Click the "Save Gallery" button twice to ensure the dynamic CSS cache refreshes, or clear your site's plugin cache.