Orange Ambition Design

Helping Business Owners With Website Marketing, Social Media and SEO Needs. We’ll be your favorite WordPress Specialists.

 

In the Way That Works for You

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 Screen%20Shot%202022 11 01%20at%2011.56.02%20AM
  • 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.

    Screen%20Shot%202022 11 01%20at%2012.11.12%20PM

    • 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—

    Adding Custom Fields to WordPress

    • 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. Screen%20Shot%202022 11 01%20at%2012.17.12%20PM

     

    • 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.

     

    Screen%20Shot%202022 11 01%20at%2012.18.32%20PM

    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.

    Our Recent Projects

    Speak With a Specialist to Get Started Today!

    Let’s get to know each other. Our first hour consult is free so we can learn about your business and needs and see what tailored solutions we can provide for you.

    What They’re Saying

    Customer Testimonials

    Sherry is very capable, diligent and a bundle of information. I have and will continue to refer her to others. 

    Phil H

    Owner, Advantage Home Health Solutions

    Anytime I have required assistance with my website Sherry has always been able to make the changes or provide me with advice that is very helpful.
    David P

    Author, Self-Publisher

    When I was first introduced to Sherry at Orange Ambition, I was frustrated, disillusioned and stuck. My previous experiences with others designers left me feeling helpless and totally reliant on them, their ideas and their schedule. Sherry, was a like a breath of fresh air in my world. Working with her given me back my inspiration, creativity and vision. I feel empowered again. Another huge bonus, is that she is making suggestion that save me money. I highly recommend giving Orange Ambition Web Design for all your web design needs. Thank you, Sherry, I love working with you!

    Carolynne M.

    Owner, Living Life In Joy

    Sherry’s attention to detail & responsiveness makes her my first choice for web design and IT support. Her consideration for online security and privacy is excellent. Thank you!
    Andrew J

    Real Estate Agent, CIR Realty

    Its been 5 months since I last posted a Review and I just have to post another one because in those 5 months Sherry has been able to mentor and teach me how to get our Ranking up to Number 1 with SEO on Google… Tonight when I went on google and searched in the Red Deer Area we were officially in Number 1 Spot on the Map. Her advice has helped us tremendously!! If you haven’t called Sherry yet WHY NOT?! She’s amazing and has helped us save so much money, while getting the most out of our Website!! Thank You Orange Ambition !!

    Kayla C

    Owner, West Country Pump & Filtration

    Satisfaction Guaranteed

    There When You Need Us

    You’ll find Orange Ambition Design to be very responsive. Call, email, text, meetings online or in person. We’ll be there, on time, everytime. You’ll get to feel like our only client with personalized, responsive service.

    Affordable Plans & Pricing

    We have plans and packages to suit every size business and needs. And with billing by the minute, you’ll only pay for what you use and use every minute you pay for. We’re not lawyers, so we don’t charge like them. Pricing starts at $98/hour. Discounts available on package pricing.

    30 Days of Free Staging

    No charge stage hosting for your project for 30 days during the build and design phase. You’ll be able to check in and see the progress of your website build. Once your project is complete, we’ll help you get set up with affordable web hosting that suits your project and your budget.

    Available to new website build projects for any of our clients.