> For the complete documentation index, see [llms.txt](https://wplake.gitbook.io/advanced-views/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wplake.gitbook.io/advanced-views/integrations/themes/impreza/displaying-custom-fields.md).

# Displaying custom fields in the Impreza theme

Using [*Layouts*](/advanced-views/getting-started/first-layout.md) from Advanced Views, you can display any custom fields in [Imprezza](https://themeforest.net/item/impreza-retina-responsive-wordpress-theme/6434280). Smart templates [give you complete control](/advanced-views/getting-started/key-aspects.md) over the markup and display logic without extra hassle. 

{% hint style="success" %}
Advanced Views natively supports fields from multiple providers:

1. [WordPress fields](/advanced-views/fields/wordpress-fields.md) (like page title, excerpt, user name, etc)
2. [Advanced Custom Fields](/advanced-views/fields/meta-plugins/advanced-custom-fields.md) (any field type)
3. [MetaBox fields](/advanced-views/fields/meta-plugins/meta-box-fields.md) (any field type)
4. [Pods fields](/advanced-views/fields/meta-plugins/pods-fields.md) (any field type)
5. [WooCommerce Product fields](/advanced-views/fields/woo-product-fields.md) (like price, SKU, height, etc)

To display [other fields](/advanced-views/fields/other-fields.md) made by your theme or plugins, just [customize the default Layout template](/advanced-views/layouts/code-fields/custom-template.md).
{% endhint %}

## 1. How to display custom fields on a single page

{% hint style="info" %}
The steps below apply to the Impreza Builder. If you use another page builder, refer to our [page builder guides](/advanced-views/integrations/page-builders.md) instead.
{% endhint %}

In Advanced Views, *Layouts* are embedded using native WordPress shortcodes, which you can paste anywhere in the Impreza Builder: 

<figure><img src="https://2293383029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN2nAC4pTDjEmDu8ZkLB2%2Fuploads%2Fz79x7RmYHYZjQccRQGsh%2Fimpreza-page.png?alt=media&amp;token=d341af0c-3063-4778-9290-81ba57ee306a" alt=""><figcaption></figcaption></figure>

1. [Create a *Layout*](/advanced-views/getting-started/first-layout.md)
2. Add target fields in the *Fields* tab and save the *Layout*
3. Copy a [Layout embedding shortcode](/advanced-views/layouts/embedding-shortcode.md)
4. Edit the target page with the Impreza Builder
5. **Within the editor**: Click the plus icon and add an [HTML element](https://help.us-themes.com/impreza/custom-html/)
6. **Within the HTML element:** Paste the *Layout* embedding shortcode
7. Save the page and visit it to see the result

To change the default field appearance, open the created *Layout* and [customize the *Layout* template](/advanced-views/layouts/code-fields/custom-template.md).&#x20;

{% hint style="success" %}
By default, *Layout* displays chosen fields of the current page. You can display fields from other sources by tuning the [Layout shortcode arguments](/advanced-views/layouts/embedding-shortcode.md).&#x20;
{% endhint %}

## 2. How to display custom fields in a Template

### 2.1) In a Page/Custom Post Type template

If multiple pages or Custom Post Type (CPT) items share the same set of custom fields, you don't need to embed a *Layout* in each item individually. Instead, embed the *Layout* in the appropriate [Impreza page template](https://help.us-themes.com/impreza/page-templates/), so it is rendered automatically for every corresponding item:

<figure><img src="https://2293383029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN2nAC4pTDjEmDu8ZkLB2%2Fuploads%2FV6pOkFBL7W1vIbsKvzlf%2Fimpreza-page-templates.png?alt=media&amp;token=23dbcd86-406a-4280-aba9-c0602a42a8ba" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2293383029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN2nAC4pTDjEmDu8ZkLB2%2Fuploads%2Fz79x7RmYHYZjQccRQGsh%2Fimpreza-page.png?alt=media&amp;token=d341af0c-3063-4778-9290-81ba57ee306a" alt=""><figcaption></figcaption></figure>

1. [Create a *Layout*](/advanced-views/getting-started/first-layout.md)
2. Add target fields in the *Fields* tab and save the *Layout*
3. Copy a [Layout embedding shortcode](/advanced-views/layouts/embedding-shortcode.md)
4. Open the [Page Templates](https://help.us-themes.com/impreza/page-templates/) (Dashboard → Templates → Page Templates)
5. Choose any Template (or add a new one for CPT items)
6. **Within the editor**: Click the plus icon and add an [HTML element](https://help.us-themes.com/impreza/custom-html/)
7. **Within the HTML element:** Paste the *Layout* embedding shortcode
8. Save the template and visit any CPT item to see the result

{% hint style="warning" %}
If you created a new template, don't forget to assign it to the target CPT in [Theme Options](https://help.us-themes.com/impreza/page-templates/#page-template-for-portfolios-custom-post-types-), so that all CPT items use it.&#x20;
{% endhint %}

<figure><img src="https://2293383029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN2nAC4pTDjEmDu8ZkLB2%2Fuploads%2F1wy3tHjAWRLGakbfsAU4%2Fimpreza-cpt-layout.png?alt=media&amp;token=59957371-ac65-4e0a-a9f5-7298a4142bbf" alt=""><figcaption></figcaption></figure>

When the template is rendered, the embedded *Layout* automatically displays the custom fields for the current page, post, or other content item using that template.

{% hint style="success" %}
*Layout* IDs are unique string identifiers, not WordPress post IDs. Unlike post IDs, they remain unchanged when *Layouts* are exported and imported, ensuring consistent references across different environments, such as staging and production.
{% endhint %}

### 2.2) In a Header template

{% hint style="info" %}
A common use case is [displaying custom fields from an Options page](/advanced-views/field-sources/options-page.md) in the site header.&#x20;
{% endhint %}

Using the [Imprezza Header Templates](https://help.us-themes.com/impreza/headers/), you can create a complete header layout without editing theme files. With Advanced Views, you can not only display custom fields inside a header but also add conditions, merge fields, and modify field value output:

<figure><img src="https://2293383029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN2nAC4pTDjEmDu8ZkLB2%2Fuploads%2F7Rkamc9YtyTuznQlIByE%2Fimpreza-headers.png?alt=media&amp;token=1e566ffd-7f2b-4b9b-8aec-90a34196150c" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2293383029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN2nAC4pTDjEmDu8ZkLB2%2Fuploads%2FLaGRqHuu88dNzTvc1tHQ%2Fimpreza-header.png?alt=media&amp;token=8ace21ad-e13c-4509-a0c2-db930165a649" alt=""><figcaption></figcaption></figure>

1. [Create a *Layout*](/advanced-views/getting-started/first-layout.md)
2. Add target fields in the *Fields* tab and save the *Layout*
3. Copy a [Layout embedding shortcode](/advanced-views/layouts/embedding-shortcode.md)
4. Modify [*Layout* shortcode](/advanced-views/layouts/embedding-shortcode.md): add `object-id="options"` argument (to [display fields from the Options page](/advanced-views/field-sources/options-page.md))
5. Open the Header Templates (Dashboard → Templates → Headers).
6. **Within the editor**: Click the plus icon and add an [HTML element](https://help.us-themes.com/impreza/custom-html/)
7. **Within the HTML element:** Paste the *Layout* embedding shortcode
8. Save the header and visit any page to see the result

{% hint style="info" %}
Unlike page-specific custom fields, custom fields from an Options page are site-wide. As a result, the same values are displayed on every site page.
{% endhint %}

### 2.3) In a Reusable block

Using [Impreza Reusable Blocks](https://help.us-themes.com/impreza/reusable-blocks/), you can create a block once and reuse it in multiple places without maintaining separate copies. With Advanced Views, you can not only display custom fields inside a header but also add conditions, merge fields, and modify field value output:

<figure><img src="https://2293383029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN2nAC4pTDjEmDu8ZkLB2%2Fuploads%2FQ4HTbFFEVLGlNQBK9v0q%2Fimpreza-reusable-blocks.png?alt=media&amp;token=a25aef86-67f8-4798-9495-4d455fe738a7" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2293383029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN2nAC4pTDjEmDu8ZkLB2%2Fuploads%2Fz79x7RmYHYZjQccRQGsh%2Fimpreza-page.png?alt=media&amp;token=d341af0c-3063-4778-9290-81ba57ee306a" alt=""><figcaption></figcaption></figure>

1. [Create a *Layout*](/advanced-views/getting-started/first-layout.md)
2. Add target fields in the *Fields* tab and save the *Layout*
3. Copy a [Layout embedding shortcode](/advanced-views/layouts/embedding-shortcode.md)
4. Open the [Reusable Blocks ](https://help.us-themes.com/impreza/reusable-blocks/)(Dashboard → Templates → Reusable Blocks)
5. Choose any Block (or add a new one)
6. **Within the editor**: Click the plus icon and add an [HTML element](https://help.us-themes.com/impreza/custom-html/)
7. **Within the HTML element:** Paste the *Layout* embedding shortcode
8. Save the block and visit the target page to see the result

{% hint style="success" %}
By default, *Layout* displays chosen fields of the current page. You can display fields from other sources by tuning the [Layout shortcode arguments](/advanced-views/layouts/embedding-shortcode.md).&#x20;
{% endhint %}

### 2.4) In a Grid Layout

Using [Impreza Grid Layouts](https://help.us-themes.com/impreza/grid-layouts/), you can customize post lists, product lists, and other multi-item elements. With Advanced Views, you can not only display custom fields inside the Grid Layout, but also add conditions, merge fields, and modify field value output:

<figure><img src="https://2293383029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN2nAC4pTDjEmDu8ZkLB2%2Fuploads%2FHaB2Q5rlr3rTIeXz0n6Y%2Fgrid-layouts.png?alt=media&amp;token=15c2cb7a-9f19-4214-b6bc-2ec9e86c12ce" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2293383029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN2nAC4pTDjEmDu8ZkLB2%2Fuploads%2FMPpmZ1ijtNplHleVU8du%2Fimpreza-grid-layout.png?alt=media&amp;token=0c0f3067-b7b8-4ba1-be85-b689fa020ff4" alt=""><figcaption></figcaption></figure>

1. [Create a *Layout*](/advanced-views/getting-started/first-layout.md)
2. Add target fields in the *Fields* tab and save the *Layout*
3. Copy a [Layout embedding shortcode](/advanced-views/layouts/embedding-shortcode.md)
4. Open the [Grid Layouts](https://help.us-themes.com/impreza/grid-layouts/) (Dashboard → Templates → Grid Layouts)
5. Choose any Grid Layout (or add a new one)
6. **Within the editor**: Click the plus icon and add an [HTML element](https://help.us-themes.com/impreza/custom-html/)
7. **Within the HTML element:** Paste the *Layout* embedding shortcode
8. Save the Grid Layout and visit the target page to see the result

{% hint style="info" %}
During rendering, for each Grid item, the embedded *Layout* automatically displays its selected custom fields.
{% endhint %}