One of the lesser known things about the block editor in WordPress (aka Gutenberg) is that you can use it to display dynamic content in your posts or pages.
Dynamic content is the kind of content that’s going to be included dynamically at the time of rendering the page for the final visitor. The specific content can differ for visitors depending on many factors.
Today I’ll show you how to create, insert, and display dynamic values in the WordPress Gutenberg editor the easy way.
What is dynamic content in WordPress?
WordPress dynamic content is content you can pull from your site’s database and populate to any page dynamically.
It could be pulling in information from a user’s profile (such as their name), core WordPress data (such as a post’s published date or ID), information from custom fields, and more.
👉 Here are some specific examples of Gutenberg dynamic content:
- Dynamically inserting the user’s name. For example, when users register in your ecommerce store, they’ll see a personalized welcome message with their name. A user named Paul would see a text saying ‘Hello, Paul,’ while user ‘Anne’ would see the text ‘Hello, Anne.’
- Dynamically inserting information from custom fields. For example, you can use the Advanced Custom Fields (ACF) plugin to store custom information and then dynamically fetch and display this data on your WordPress site. If you change the custom field’s content, your posts will automatically reflect these changes without you needing to change anything in the post editor.
- Dynamically inserting images. For example, you can add a picture of a post’s author to every piece they write. This way, author images will automatically appear alongside their respective articles.
Now that you know what WordPress dynamic content is, it’s time to put it into practice. In the following section, we’ll show you how to use Gutenberg dynamic content step by step. 🤹🏼
How to add dynamic content in Gutenberg
One of the easiest ways to add dynamic content in Gutenberg is by using a WordPress plugin like Otter Blocks.
Otter Blocks is a free plugin of ours that comes with countless additional blocks for the WordPress block editor. In other words, it extends the native abilities of the WordPress editor. One of the things it does is enabling dynamic content to be inserted in your posts or pages. The best part is that you can do that without any coding knowledge. Yes, you’ve heard it right: You don’t need to be a developer to start adding dynamic content to your site!
To make this tutorial easily scannable, we’ve divided it into three subsections focusing on Otter Block’s dynamic content features:
- Dynamic Links and Values. Learn how to populate internal or external hyperlinks dynamically, as well as regular text content.
- Dynamic Values and ACF. Learn how to pull in information from custom fields that you’ve added with the Advanced Custom Fields plugin efficiently.
- Dynamic Images. Learn how to insert images dynamically, such as by pulling in a user’s profile picture.
To follow all of these tutorials, all you need is the free Otter Blocks plugin, which is available at WordPress.org.
Before getting started, make sure to install and activate the plugin. You can do so just like you’d install any other plugin – go to Plugins → Add New and search for “Otter.”
Dynamic links and values
In this first section, you’ll learn how to populate links or text content dynamically.
How to insert dynamic links in Gutenberg
Let’s start with an easy example of using Otter Blocks to add a dynamic link to the Gutenberg block editor.
Once you’ve activated the Otter Blocks plugin, open a post and highlight the text to which you want to add a link to.
For our example, we’ll create a ‘Go Home’ link to redirect users to the site’s homepage using dynamic links. After highlighting the text, click on the database icon and then on Dynamic Link:
You’ll then see a data type list with options like Post URL, Site URL, Author Website, and more.
If you want to use the Post Custom Field or Advanced Custom Fields features, you’ll need to purchase Otter Pro.
In our case, as we want to create a ‘Go Home’ link, we’ll select Site URL and click Apply.
If all has gone well, you’ll see the element change its design to signal that something has happened. From now on, that link points to your homepage.
To test it live, click Update and then View Post. Scroll down the page and click on the link.
How to insert dynamic values in Gutenberg
Let’s say you want to add other dynamic information to a post rather than a link.
You can trigger that by typing in %% in a new line. You’ll see a new dialog letting you pick the element you need:
For this example, I’ll select Post Date. Here’s the result (I’ve also added a note saying “This post was published on”):
Save changes and see what the post looks like in the preview. You should see the post date displayed there:
Now, let’s try to add the author’s name to the post. To do so, you just need to click on the section you want to add the content to (in my case, I’ll add it next to the word “By”), click on the database icon, and then on Dynamic Value.
Now, select Author Name from the Data Type menu.
Click Apply and save your changes. Just like before, save the page and go to the frontend to see the author’s name replaced dynamically:
How to insert custom field data in Gutenberg dynamically
So, you already know how to add dynamic links with Otter. The next step is to learn how to add other dynamic values using Advanced Custom Fields.
Please note that you’ll need to upgrade to Otter Pro to access the ability to insert custom field information.
Create your custom field group
Before getting started, you’ll first need to set up your custom fields if you haven’t already done so. We have a separate guide on how to use ACF and all its cool features, so I’m sending you over there if you need more info.
Dynamically insert custom field information
With all your custom fields set up, go to the post to which you want to add the dynamic content and scroll down to the bottom of the page to see the custom fields. For example, I’ve set a field called Rating. I can use it in case it’s a review post. I’ll set the score of this particular one to 3:
Now let’s include that rating somewhere in the post using dynamic content in Otter. Let’s pick a spot and click on the database icon again, then on Dynamic Value:
From the list, let’s select Advanced Custom Field:
Then, in the Settings tab, let’s pick the Rating field as the meta key:
Click on Apply. Save the page and go to the front to see the final result.
There’s even more you can do with custom fields created in ACF.
Just to name one cool thing, ACF lets you create something called repeater fields. Those are basically parents to a set of sub-fields which can be repeated multiple times.
For example, you can create a repeater field called Team and then add sub-fields called Name, Link, or whatever else. Next, under each post, you can add multiple team members by repeating the field. Like so:
Then, you can take those fields and display them dynamically using Otter Blocks.
Again, click wherever you want to place the field → database icon → Dynamic Value. Pick Advanced Custom Fields from the list. Then, in the Settings tab, select the repeater field you want:
Click on Apply. When you save the page and view it on the front, you’ll see all the team members there:
How to insert dynamic images in Gutenberg
Adding dynamic images to your WordPress site using Otter Blocks is straightforward.
You can use this Gutenberg dynamic content feature to add images to a testimonial section, a product review, or author images to blog posts.
Start by opening an image block and clicking Media Library. Go to the Dynamic Images tab. As an example, click on the Author Image and then on Select:
Save the page and view it on the front:
Get started with Gutenberg dynamic content today ⏰
If you’ve read this far, you can consider yourself a Gutenberg dynamic content expert. Kudos to you!
Here’s a quick recap 🚀 of what we’ve covered:
- What dynamic content is. You’ve learned what dynamic content is in Gutenberg, along with some real examples of how you might use it.
- How to add dynamic content in WordPress. You’ve learned how to use the Otter Blocks plugin to add dynamic links, values, and images to your WordPress site. With Otter’s user-friendly interface, you don’t need to be a coding expert to implement dynamic content in Gutenberg.
👉 If you want to learn more about the WordPress native block editor, check out our guide on Gutenberg blocks and how to use them.
Do you still have any questions about how to add dynamic content in the block editor? Let us know in the comments section below!
FREE GUIDE
4 Essential Steps to Speed Up Your WordPress Website
Follow the simple steps in our 4-part mini series and reduce your loading times by 50-80%. 🚀
