Overview
If you have been wondering how to automatically add an audio player in Divi with dynamic content from a custom field, rejoice! We have the solution! The Divi Dynamic Content Helper plugin by Pee-Aye Creative automatically adds a dynamic content icon to the default Divi Audio module. This means you can add the standard Divi Audio module to any page, post, or Theme Builder template and paste an audio URL or upload a file into a custom field, and it will always play the correct audio! Save yourself a lot of hassle, or just use this method to keep clients out of the builder. Our plugin is the only solution on the market for this, so we hope you appreciate and enjoy this exciting advanced feature!
This video and full written guide below will show you step by step how to set up the custom fields and use the new Divi Audio module dynamic content setting.
If you already have your custom fields set up, and you are ready, this GIF provides a brief visual overview of the remaining steps needed to use this feature.
Set Up The Custom Fields
Before you can automatically pull audio into the Divi Audio module with dynamic content, you must first set up a custom field to provide a source for the audio. Custom fields allow you to store and manage the audio URLs that will be pulled into the module.
Check Our Custom Field Docs
Please refer to our Custom Fields documentation to learn more about how to set them up.
Supported/Tested Custom Fields
The Audio module dynamic content feature will work great with most if not all custom field types because it simply pulls in the audio URL from the field to the module. You could also use a file picker field in ACF, but we suggest being careful with uploading a large audio file to your WordPress site. However, audio files are usually not as large as video files, so sometimes it is perfectly fine to add them to your site, but this depends on the quality of your hosting server. For large audio files, try to use a separate professional audio hosting platform when possible and simply place the link in the custom field.
Tested and Supported Custom Field Solutions
The dynamic content feature in the Divi Audio module works with most custom field types, as it simply pulls the audio URL from the custom field into the module. Here is a list of tested and officially supported custom field solutions for the Divi Audio module:
- WordPress Custom Fields
- Advanced Custom Fields
- Pods
- Meta Box
- Toolset
Note: Other plugins and custom field solutions may also work with the Divi Dynamic Helper, but they have not been officially tested. Custom setups and unique scenarios outside of the above may require additional testing or adjustments.
Use Case Scenarios
The dynamic content feature for audio has been tested in the following key scenarios:
- Divi Audio Module Added Directly to a Page or Post:
The Divi Audio module is placed directly on a page or post using the Divi Builder. The audio is dynamically linked to the custom field via our new dynamic content option. - Divi Audio Module Added to Divi Theme Builder Templates:
The Divi Audio module is placed within a Theme Builder template that is assigned to a page or post type. The audio is dynamically linked to the custom field via our new dynamic content option. This is the most common use case, allowing you to create dynamic templates that automatically display the audio player on pages and posts based on the custom field.
General Recommendations For Handling Large Audio Files
While audio files are typically smaller than video files, uploading large audio files to your WordPress site can still lead to performance issues depending on your hosting server’s capabilities. Larger audio files, such as podcast episodes or high-bitrate music tracks, can strain server resources, potentially leading to slow load times or bandwidth issues.
In such cases, it’s highly recommended to use a dedicated audio hosting platform—such as SoundCloud, Libsyn, or other podcast hosting services—and simply place the URL into the custom field. This method ensures better performance without overloading your WordPress site.
However, if the audio file is smaller or your hosting can handle larger media, uploading the audio file directly to your WordPress site using a file picker field is perfectly fine.
Add the Divi Audio Module To Your Layout Or Template
Once your custom fields are set up and configured, the next step is to add the Divi Audio module to your layout using the Divi Builder. Whether you’re designing a single page or creating dynamic templates for multiple posts or post types, linking the Divi Audio module to your custom field via dynamic content is an invaluable solution provided by our plugin.
Divi Audio Module Added to Divi Theme Builder Templates
The Divi Theme Builder is an essential part of building dynamic websites. It allows you to create templates that automatically display content, such as videos, by linking to the custom fields you’ve configured. The most common and powerful use case is when the Divi Audio module is included in a Theme Builder template. This setup enables the module to pull audio links dynamically from custom fields, ensuring that each instance of the module on different pages or posts displays the appropriate audio track based on the specific content. For example, if you’re building a blog or portfolio, you can create a single template for posts or projects, and each audio track will be automatically populated from the assigned custom field for that particular post or project. This approach is particularly beneficial for websites with dynamic content structures, as it significantly reduces the time spent on manual updates.
Divi Audio Module Added Directly to a Page or Post
The Divi Audio module can be placed directly onto any page or post within the Divi Builder. This method is less common since it doesn’t utilize dynamic content to simply add the audio track directly inside the module. However, if you need to add the audio track dynamically from a custom field, this scenario works great.
Link The Audio Module To The Custom Field
1. Add/Open The Audio Module
The next step is to add the Divi Audio module to your layout. Simply go to your Visual Builder and click the gray plus (+) icon to add a new module and select the Audio module. NOTE: If you already have an Audio module in your layout, be sure to remove any existing audio file from the Content tab>Audio toggle>Audio File field.
2. Click The Dynamic Icon Button
After adding a new Audio module or removing any existing audio file from an existing Audio module, you will see the new dynamic content icon on the left side of the Audio File field
Just a quick note: the screenshots here are from Divi 4, but everything works exactly the same in Divi 5. The only difference is the user interface of the Divi Builder. When more people start using Divi 5 and Divi 4 is phased out, we'll be sure to update the screenshots to reflect that.
3. Select The Custom Field
When you click the dynamic content icon, a new window will appear with a list of all the available custom fields on the site. Fields added via the standard WordPress editor or with plugins like Pods, Meta Box, and Toolset will appear under the gray “Custom Fields” heading, while fields added with the ACF plugin will appear under a separate section. You can now select the custom field that you have set up and designated for the audio file.
4. Save The Custom Field Selection
Once you select the audio custom field, another window will appear. This window is not relevant in our case, so just ignore it and click the green checkmark to save/close the window.
6. Save The Module Settings
At this point, you are finished with the setup. Be sure to save the module settings, and when you exit the builder, you will see the Divi Audio module contains the audio and can be played from the custom field. Everything else about the Audio module can be adjusted according to your preference and will work just like normal.
