> For the complete documentation index, see [llms.txt](https://docs.uichemy.com/llms.txt).
> Use it to discover all available pages before exploring further.

# Dynamic Content Overview

How UiChemy adds dynamic content to a Composer widget: Elementor dynamic tags for no-code binding, and Twig expressions for code-based data access.


UiChemy gives you two ways to make a Composer widget's content dynamic, pulling live data from WordPress, WooCommerce, ACF, or external APIs instead of showing static text and images.

| Approach | How it works | When to use it |
|---|---|---|
| Elementor Dynamic Tags | Click the dynamic data icon on an editable field and pick a tag from a dropdown | Binding a single field to post data, user data, site info, or a custom field, no code |
| Twig Expressions | Write `{{ post.title }}` or `{% for item in get_posts() %}` inside the widget's HTML | Complex data access, filtering values, loops, conditions, or chaining providers |

Both systems are powered by the same underlying data engine. Dynamic tags are a no-code interface to it; Twig expressions give you direct access.

### Dynamic Tags: No-Code Data Binding

Elementor dynamic tags appear on every editable field in the Composer widget panel: every text field, every link URL, and every image picker has a database icon on the right edge. Click it to bind that field to a live data source.

UiChemy registers dynamic tags organized into groups:

| Group | Tags | Plan |
|---|---|---|
| Post (Title, Content, URL, Image) | 4 | Free |
| Post (ID, Excerpt, Date, Custom Field) | 4 | Pro |
| Site | 4 | Pro |
| Archive | 4 | Pro |
| User | 6 | Pro |
| Term | 5 | Pro |
| Twig Bridge | 3 | Free for post data, Pro for site/user/term expressions |
| WooCommerce | 22 | Pro + WooCommerce active |
| ACF | 4 | Pro + Advanced Custom Fields active |
| JetEngine | 3 | Pro + JetEngine active |

See [Dynamic Tags](/uichemy-composer/design-data/dynamic-tags) for the full tag reference.

### Twig Expressions: Code-Based Data Access

Twig is the expression language Composer uses inside the widget's HTML panel. Write `{{ … }}` for a value, `{% if %}` for a condition, and `{% for %}` for a loop.

Seven data providers are available: `post`, `product`, `user`, `term`, `image`, `site`, and `request`. Providers are chainable, `{{ post.author.name }}` drills from the post to its author to their name. In the free version, only core post fields (title, content, URL, featured image) and the image chain resolve, `site`, `user`, `term`, and `request` providers require Pro.

22+ filters transform values inline: `{{ post.date|date('M j, Y') }}`, `{{ post.title|upper }}`, `{{ post.excerpt|truncate(120) }}`.

Loop sources: `get_posts` is available on Free. `get_products`, `get_terms`, `get_users`, and `get_api` (external JSON) require Pro. Loop pagination also requires Pro.

See [Twig](/uichemy-composer/design-data/twig) and [Loops](/uichemy-composer/design-data/loops) for full guides.

### Structural Tags

Five `<uichemy-*>` HTML tags render whole WordPress blocks server-side:

| Tag | What it renders |
|---|---|
| `<uichemy-nav-menu>` | The active WordPress navigation menu |
| `<uichemy-site-logo>` | The site logo, linked to the home page |
| `<uichemy-site-icon>` | The site icon (favicon), linked to the home page |
| `<uichemy-post-content>` | The current post's content (the editor output) |
| `<uichemy-toc>` | A table of contents generated from the post's headings |

These go directly in the HTML panel. They aren't editable fields, they render full output blocks.

### Dynamic Content in Templates

When a Composer widget using dynamic data sits inside a [Theme Builder](/uichemy-plugin/theme-builder/overview) template (a single post template, an archive page, and so on), every data binding automatically resolves to the current context:

- On a single post page, `{{ post.title }}` shows that post's title.
- On a term archive, `{{ archive.title }}` shows the current term name.
- In a product template, `{{ product.price }}` shows the current product's price.

One widget design serves every item. This is what makes UiChemy's theme builder templates dynamic instead of just page copies.

### Use Cases

- **Building a Theme Builder template that adapts automatically**, one Composer design shows the right post, product, or term wherever it's used.
- **Binding a single field with no code**, use a dynamic tag through the panel for straightforward cases.
- **Writing a loop, condition, or filtered value**, reach for Twig when a dynamic tag alone can't express what you need.

### Frequently Asked Questions

<ExpandableGroup>
  <Expandable title="Do dynamic tags and Twig expressions work together?" default-open="false">
    Yes. You can bind a field to a dynamic tag via the panel UI, and in the same widget write Twig expressions in the HTML panel. They use the same engine.
  </Expandable>

  <Expandable title="Can I use Twig without knowing how to code?" default-open="false">
    Basic Twig expressions like `{{ post.title }}` are straightforward. Loops and conditions require some familiarity with template syntax. For purely no-code data binding, use dynamic tags through the panel.
  </Expandable>

  <Expandable title="Does dynamic content work on cached pages?" default-open="false">
    It depends on your caching configuration. Dynamic content that varies per-user (like logged-in user data) should be excluded from page caches. Content that's the same for all visitors (post title, featured image) is safe to cache.
  </Expandable>
</ExpandableGroup>

### Related

<Columns cols={2}>
  <Card title="Dynamic Tags" href="/uichemy-composer/design-data/dynamic-tags">
    Bind live data to a widget with no code.
  </Card>
  <Card title="Twig" href="/uichemy-composer/design-data/twig">
    Output dynamic data anywhere in your markup.
  </Card>
  <Card title="Loops" href="/uichemy-composer/design-data/loops">
    Turn one widget into a dynamic listing of many items.
  </Card>
  <Card title="Global Style Overview" href="/uichemy-composer/global-style/overview">
    See the other half of what makes a widget dynamic: styling.
  </Card>
</Columns>