Dynamic Content

In this article, we're going to discuss how to leverage Dynamic Content to create powerful, data-driven layouts in WordPress.

  1. Working with Dynamic Content
  2. Dynamic Content and Loopers
  3. Using Breakout Mode
  4. Further Reading

This video is from our Getting Started w/ Cornerstone series.

There are many different workflows in the site-building process. Often we are tasked with building one-off pages that require unique designs and layouts tailored to that context (e.g. a home page, a contact page, et ceteara). In these instances, it is likely that we can finish our designs using only static Elements and content (assets that are hard-coded to that page).

However, there are other times when something more living and breathing is required. Maybe you have created a Header for your site that has a "Hero" section meant to pull through the title of a post or page. Or perhaps as of Pro v4.0.0 you are utilizing our Layout Builder to create the template for your blog archive itself, and need to not only pull through information dynamically, but also loop over the currently available query to create your post index. All of these things (and much more) are possible by leveraging Dynamic Content.

Working with Dynamic Content

Dynamic Content is the name we use for our system of accessing various information in your WordPress installation. It is done by inputting a specially formatted string that our Builders can parse to know what data to retrieve from the database. For example, if you wanted to retrieve The Title from the post or page you are currently viewing, you would input {{dc:post:title}}.

Before you askno, we don't expect you to remember long strings of symbols with special formatting to access the data you need. 🙂 Dynamic Content can be easily accessed in nearly every input in our suite of Builders anytime you see the following symbol:

Dynamic Content

You will find this symbol inside inputs, image controls, text editors, and more:

Dynamic ContentDynamic Content

Clicking on this symbol will open the following popup:

Dynamic Content

As you scroll through the list you will see that the Dynamic Content available is divided up into different groups based on their context. For example Post will contain bits of information available for individual posts, User provides us with user data points, Global gives us access to information about our site as a whole, et cetera.

Clicking on any item in that list will give you a Dynamic Content string that accesses the data for the current item (e.g. clicking Title under Post will give you the title of the current page or post you are on). However, you can also pull through data from a specific source if you wish or even alter other pieces of the Dynamic Content string. For example, if you click the cog icon next to Title, you will see the following:

Dynamic Content

This screen will look different each Dyanmic Content endpoint, displaying the various parameters that can be altered for that piece of data. From here, we can see that by default we are pulling through the title of the current post. Clicking on that dropdown will reveal the following:

Dynamic Content

So we can see that instead of just the current post, we could also get the title from the next post, previous post, or a specific ID. If we select that final option, an additional input will appear for you to enter the ID of the desired post:

Dynamic Content

Notice that entering in the ID of our desired post results in a change of the example string shown towards the bottom of this popup. Instead of {{dc:post:title}} to grab the current title, it has been formatted to {{dc:post:title post="8"}} to give us the title of our post with an ID of 8. From here, you could either copy this string and put it back in the input, or you can click the + button to automatically add it to your input.

Once a Dynamic Content string has been added to any Element, the observer for that Element will highlight yellow in the preview (in addition to prepending the Dynamic Content icon before the Element label). This allows users to get a quick sense of what is being dynamically sourced on a page and what is static:

Dynamic Content

Dynamic Content and Loopers

While Dynamic Content is an incredibly powerful tool on its own, it really gets taken to a whole new level when used in conjunction with our Loopers. Definitely make sure to check out our in-depth article on Loopers to start using them in your builds to create custom recent posts modules, WooCommerce product displays, loop through custom data, and so much more!

Using Breakout Mode

Adding in Dynamic Content in mass can be even easier when using Breakout Mode. Enter Breakout Mode (tutorial) and all control inputs will be turned into text inputs allowing you to paste Dynamic Content strings easily. By default this keybinding is set to ctrl+alt+b.

Further Reading

Learn more about how to use Dynamic Content in creative ways with these additional resources:

See something inaccurate? Let us know