Popup Template

The popup window used in the “Show post in popup” feature of Divi FilterGrid is controlled by the dp-dfg-popup-template.php file located in the /templates/ folder of the plugin. By default, this file will display the content of the post exactly as it appears when viewing the post directly – only without the site header and footer. If you have created a custom template to display posts using the Divi Theme Builder, the content from this custom template will be displayed in the popup.

There are two ways you can change how the content is displayed in the popup:

• Divi Library Layout
• Template File

Divi Library Layout

Since version 2.6 of Divi FilterGrid, we have added a new Popup Options section located in the module’s Design tab. Here you can choose the template that will be used to display your popup content from the Popup Template dropdown. By default, the Default template included in the plugin will be selected. You can also select a layout from your Divi Library.

To make a layout from your library available in the Popup Template dropdown, you must create a new “DFG Popup” category within the Divi Library interface and add your layout to this category. Any layouts with this category will become available to choose in the new Popup Template dropdown.

Template File

If you prefer to modify the layout of the popup template using a template file, this option is still available. To do this you can copy the default template file included in the plugin and save it in a folder named “dp-divi-filtergrid” within your child theme’s root folder:

/wp-content/themes/your-child-theme-folder/dp-divi-filtergrid/dp-dfg-popup-template.php

Below are the contents of this file:

Divi FilterGrid Popup Template File

Once copied, the plugin will use your version of the popup template to display content in the popup.

Popup Template Hierarchy

The following hierarchy is used to determine which template is used to display the content in the popup:

1. Layout from Divi Library if selected in the module’s Popup Template option in the Design tab.
2. Custom popup template file located in your child theme’s folder /wp-content/themes/your-child-theme-folder/dp-divi-filtergrid/dp-dfg-popup-template.php.
3. Default popup template included in the Divi FilterGrid plugin.

* If the Default Template is selected in the module’s Popup Template option AND a custom popup template file exists in your child theme, the custom popup template file will be used to display the popup content.

Modify the Popup CSS

The new Popup Options section available in the Design tab of the module settings now includes the ability to modify the popup width, maximum width, height, overlay color, border and box shadow. There is also a Popup Content CSS section. Here you can add custom CSS that will get added to the head of the popup template and will only affect content inside the popup window.

Customizing the child theme’s popup template file

Again, the content displayed in the Divi FilterGrid popup will be the same as the content displayed when viewing the post directly if the default template is selected. You may want to display the post content using a Divi Theme Builder template when the post is viewed directly but display the post content when viewed from within the popup. To do this, follow the steps above to copy the dp-dfg-popup-template.php template to your child theme. Then replace the content of this file with the following content:

Divi FilterGrid Popup Template File – Ignore Divi Theme Builder Template

Here we are simply bypassing the Divi Theme Builder template and reverting to a modified version of the single.php template. You can modify this file however you like to output any content you want: static HTML, custom fields, etc.