I thought this might be a helpful tutorial for some of you out there. I had to really dig around and pull together some puzzle pieces to make this one work. As always, I like to try avoiding plugins so, I searched around and pulled together all of these instructions to be able to add dynamic content automatically using the DIVI Video Module. There’s a few steps involved, but it can be done.
Automatically embed video links in Divi posts or pages
The objective was to make it so the client could use the native WordPress back end to enter content and I set up a template in the Divi Theme Builder that would “skin” the posts all tagged with that category so they’d all look the same, and automatically embed the video link into the post or page.
1. Add a piece of code to the (child) theme functions.php file
2. Add a custom field.
3. Put the video url into that custom field
4. Create a post or page using the video module and your new dynamic content
5. Build a template containing the video module
CHECK THE LITTLE HELPERS
How to add code to functions.php
You may not know where or how to do this exactly, so here’s the step by step for that part with a video at the bottom:
[a word of caution, make sure you have the code copied correctly as editing the functions file of your theme can break your site. That’s why the reference to having a child theme.]
- In your dashboard, visit ‘Appearance’-➝ Theme File Editor
- In the upper right hand side, choose the child theme for which you want to apply the edits (it should be the name of your child theme by default, and if you have no child theme, you will want to create one. See instructions for that in a google search. There’s a million ways and plugins for that.) After choosing the child theme, click the ‘Select’ button.
- On the right hand pane, click on ‘functions.php’ and let it reload the page. You should now be presented with an editor to work in.
- Paste the following PHP code into your functions.php editor and click ‘Update File’ button at the bottom.
PHP for Dynamic Content in Video Module
// Make the Video URL field Dynamic
add_filter('et_builder_get_parent_modules', function($modules){
foreach ($modules as $module_slug => $module) {
if($module_slug === 'et_pb_video' && isset($module->fields_unprocessed)){
$module->fields_unprocessed['src']['dynamic_content'] = 'url';
$module->fields_unprocessed['src_webm']['dynamic_content'] = 'url';
}
}
return $modules;
});
Resources
Where did I find all this stuff? Here’s the list of links where I found pieces of the puzzle:
The PHP Snippet: https://www.divi-pixel.com/how-to-make-the-divis-video-module-url-fields-dynamic/
Some details for adding custom fields (these guys are a gold mine of everything WordPress learning, beginner or not!): https://www.wpbeginner.com/wp-tutorials/wordpress-custom-fields-101-tips-tricks-and-hacks/#addcustomfields
Beware though that the screen shots they have in their post are out of date (already!) so I included instructions in my post.
Adding code to the functions.php file
So, the first thing I needed to do was add a small piece of code to my child theme’s functions.php file. It just allows dynamic content to be an option inside the video module in the DIVI theme. (I found that piece of code at https://www.divi-pixel.com/how-to-make-the-divis-video-module-url-fields-dynamic/) If you’re not sure how to do that, you can find the step by step here.
// Make the Video URL field Dynamic
add_filter('et_builder_get_parent_modules', function($modules){
foreach ($modules as $module_slug => $module) {
if($module_slug === 'et_pb_video' && isset($module->fields_unprocessed)){
$module->fields_unprocessed['src']['dynamic_content'] = 'url';
$module->fields_unprocessed['src_webm']['dynamic_content'] = 'url';
}
}
return $modules;
});
Now, when you add a Divi Video module to any post or page, you’ll have the option to use the dynamic content setting in that module. This will work whether you’re using a post or a page in WordPress. Now we need to take things further.
Adding a custom field for the dynamic content to pull from
Now we need to put that dynamic content capability into action by giving it some dynamic content to pull from. The reason I wanted this functionality in the first place is because I have some clients who either do edits on their site themselves from time to time or they have editors who write blogs for them.
Those users are not always comfortable using the Divi builder. So, I like to make it a bit simpler for them and create a custom field where they can copy and paste the link into and then use the DIVI theme builder to create templates for posts based on how the user tags it or which category they check off.
So, let’s make a custom field for the user to be able to just add information to.
- create a new post using the WordPress default editor (Blocks)
- at the bottom of the post, under the editor, you should see the section called ‘Custom Fields’
- if you don’t see it, it may not be visible and you’ll need to change a preferences setting by doing the following (found here but the screens are a bit different because of WP updates so my instructions follow:) https://www.wpbeginner.com/wp-tutorials/wordpress-custom-fields-101-tips-tricks-and-hacks/#addcustomfields
- in the top right hand corner, click on the three dots icon for the options settings
- click ‘Preferences’ at the bottom of the list
- In the preferences page, you’ll need to click ‘panels’ on the left menu, then toggle the ‘Custom fields’ switch to the on position and click the reload button beneath the toggle.
- In the custom fields section, we’re going to enter a new custom field by clicking the link that says ‘Enter new’ just underneath the drop down menu that currently says —Select—
- This will open a new space for you to enter the name of the custom field. In my case, I just named it video_LINK so it would stand out easily in the list of dynamic content options when we use the video module. I also added my video link URL into the Value box, which I grabbed from YouTube. This will work with any video URL though, whether it’s hosted on your site in your media library or Vimeo, or any other place where a video is publicly available by a url link.
- Click the ‘Add Custom Field’ button when you’ve entered the information. It will then put that information you just entered into the above list of custom field objects.
Now, onto the magic….
Create a post or page and use the dynamic content in a video module
In the post you’ve just created above in the default editor, you’ll need to save it as a draft because we’re going to move onto the DIVI builder now and try out that video module and get it to pull in your video that you just set up in the custom fields section.
- activate the Divi Builder (front-end or back-end, it doesn’t matter which)
- create a section with a video module
- if there is default content in the video module, delete it using the garbage can icon
- hover over the right hand side of the module until the dynamic content icon appears, then click the icon which will activate a new display of choices
- down at the bottom of this list, you should see a section called ‘Custom Fields’ and under that section should be your newly registered custom field (in my case, it was called video_LINK)
- click on your custom field name to select it
- click the green check mark to save your choice in the module and you should see the video module in the builder begin to try to show a preview of the video you embedded. You’ll more than likely get a black screen place holder while the builder is still active (I don’t know why DIVI doesn’t show previews of videos in the builder, but whatever, have faith, it’s there.)
- save changes to your post and exit the Divi Builder
- Once you’ve exited the builder, you should be able to see the video preview on your post or page
OK, now to make it so that the client or blog editor or even you can use the default WordPress editor to create content and embed videos automatically.
Create a template for specific blog posts in the Divi Theme Builder
OK, you might be thinking why the heck would I want to even set up something like this? Well, there’s a few scenarios where this might be helpful. Some days the builder is just slow and makes me crazy when I think of all the time I wait for it to load. Other days, it might be that I have a client or user who isn’t at all familiar with the Divi builder. Or, I may have several contributors to a single website, but we need to keep the look and feel standard across the site.
Solution: create a template for posts or pages so they all have a similar look to them. Maybe you want to have the same CTA buttons on every page, the different user content and then the same footer. And you want users to be able to do all of this, but using the default WordPress Gutenberg Blocks editor. No problem! We’ll just create a template for those posts with those consistent elements and then set out the guidelines for our users on what content must be included.
- Go to the Divi Theme Builder and create a new custom body module
- Set up the body with the layout you desire
i..e.: 2 column structure where on the left, you have the Featured image with a post title overlay. Beneath that is 2 CTA buttons linking to specific pages in the website. and beneath that is a video module which, you guessed it, uses dynamic content from the custom field you set up [in my case it was called video_LINK]. Then in the right hand column of the page, you add a post content module and get that styled the way you want.
- Save the custom body module and set it up to be used on what ever conditions you want. In one of my use cases, it’s set up to be the template for any post that is ‘category xyz’, or ‘tagged as abc’ However you need it. This is one of the things I love about DIVI is the flexibility granted by the theme builder.
- Save changes at the top of the page
Now, you’re set up so that anyone who creates a post in the default WordPress editor and drops a video into that custom field. If you test and notice that your custom field didn’t “stick” so to speak, in that drop down list, it could be that WordPress is showing too few in that list. If you visit https://www.wpbeginner.com/wp-tutorials/wordpress-custom-fields-101-tips-tricks-and-hacks/#addcustomfields there’s a couple suggestions there on how to get it to show up, by either dropping in a piece of code or using a plugin.
That’s it. Hope you found this helpful and you were able to add dynamic content automatically into your WordPress posts using the DIVI video module.