Making your templates, layouts, and sections more dynamic is a very useful step in making smarter websites. It’s easier to change things, it’s less work overall, and it’s easier to make it simple for the clients to edit.
Most page builders have dynamic features and templating methods, so that’s great news for all of us. When you’re in the builder, look around the UI for a button that (usually) looks like a stack of coins.
You’ll find that most page builders nowadays have basic fields available as dynamic fields. Such as page title, featured image, post permalink, and post content. Look into what modules/elements are available for you and try to utilize them the best you can when building templates.
The video
Timestamps
- 0:05 Intro
- 1:17 Topic 1. Post titles
- 2:00 Divi
- 4:15 Elementor
- 6:50 Bricks
- 8:32 Oxygen
- 9:40 Breakdance
- 11:05 Topic 2. Page URLs in Contact Forms
- 12:08 Oxygen
- 12:12 Bricks
- 14:23 Elemntor
- 15:54 Divi
- 16:20 Manually doing it with Divi
- 21:40 Contact Form 7
- 23:15 Breakdance
- 26:35 Outro
Dynamic Page titles
Let’s start with an easy one. I’m sure you already do this to a certain extent. Page titles in the hero section dynamically filling in the h1 is an easy first step into building dynamically. It’s even better if it’s done with the featured image as well! It’s really simple. When making the template, just make sure you pick the dynamic option. It’s usually the icon that looks like a stack of coins.
Post/Page Templates
Once you set up a template, make sure it’s pulling its content as a dynamic field and NOT as a ‘pre-built layout’ that is loaded from a library made to be edited on every page.
All five builders in this tutorial has easy to use options for this.
Dynamic Page URLs in Contact Forms
Now that we know what’s going on with dynamic content, we can try to step it up and make some cooler stuff. One thing that I’ve noticed often is people would have a contact form near the bottom of the page, but since it’s a global form, it’s hard to tell which page the inquiry was sent from, and some clients would like that information.
So it’s basically using a form component that can take dynamic data (the url) include it in the form submission.
Since this is a little more advanced than page titles, the resulting works/doesn’t work checklist isn’t as simple as before.
Breakdance
Add a hidden field and assign the page url to it. Pretty easy.
Bricks
Their documentation (https://academy.bricksbuilder.io/article/form-element/) claims that putting {{referrer_url}} into the value of a hidden field works, but either I’m misunderstanding “to insert the URL of the page where the form was submitted” or they’ve changed how the form submissions work because all Bricks forms have the submission page url in the email footer. So it’s automatically included in the emails. Nothing more to do. ̄\_(ツ)_/ ̄
Divi
Nope. It doesn’t have anything even close to dynamic for forms. (frankly, the worst forms module of the bunch anyway) you can use a javascript snippet to do it, and add some css to hide the field. Check out the manual method.
Elementor
Turns out, for Elementor, it’s not a field, but it’s an action that can be added in the submission.
Oxygen
Oxygen does not have a contact form module. Gotta use a contact form plugin. Many contact form plugins have dynamic fields. OR use the manual method.
Manual method
You’ll need two things, a way to get the url into the form, and a way to hide it.
First, the JavaScript you’ll need.
<script>
const currentUrl = window.location.href;
const pageUrlField = document.querySelector('#page-url');
pageUrlField.value = currentUrl;
</script>
Please note: the #page-url is for the FIELD. IF the id is a parent of the field, then add an ‘ input’ (note the space) after #page-url, so the second like looks something like this:
const pageUrlField = document.querySelector('#page-url input');
Also, please note: the JS is wrapped in a <script> tag. So the snippet should technically be pasted into an area intended for html. Lastly, the JS is vanilla, so it doesn’t need any extra library to load. It’ll just work.
Next, you’ll need CSS to hide the field. If the field has a parent, you’re going to have to target that one. In most cases, field positions are not something that needs to fight for specificity, but if you need to, give the whole form an id and change the selector to #thenewid .name-of-field and that should override whatever was previously there.
.name-of-field {
position: absolute;
visibility: hidden;
height: 0;
width: 0;
padding: 0;
overflow: hidden;
left: -420rem;
}
Please note: the CSS I’ve added here is a bit of overkill haha. just the position absolute and left -420rem is enough to hide it. If the manual method isn’t working for you, please feel free to email me (pk@) and I can help.
Helpful plugins + links
Using ACF with a good page builder can solve pretty much most dynamic content needs. ACF also has the best integration in all of WordPress.
Advanced Custom Fields
ACF Pro is powerful enough to provide the foundation of custom coded websites, but Free is still powerful enough for our purposes. (high priority) https://wordpress.org/plugins/advanced-custom-fields/
Breakdance Builder
The most easy to learn modern visual builder available. It has unique ACF capabilities that help us build better websites quicker. https://breakdance.com/ref/19/ (affiliate link)
