> 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/page-builders/beaver-builder/displaying-custom-fields.md).

# Displaying custom fields in Beaver Builder

Using [*Layouts*](/advanced-views/getting-started/first-layout.md) from Advanced Views, you can display any custom fields in [Beaver Builder](https://wordpress.org/plugins/beaver-builder-lite-version/), including [Beaver Themer](https://www.wpbeaverbuilder.com/beaver-themer/). 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 Beaver Builder editor. If you edit pages using the Gutenberg editor, refer to our [Gutenberg editor guide](/advanced-views/integrations/editors/gutenberg/displaying-custom-fields.md) instead.
{% endhint %}

In Advanced Views, *Layouts* are embedded using native WordPress shortcodes, which you can paste in any place in the Beaver Builder editor: 

<figure><img src="https://2293383029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN2nAC4pTDjEmDu8ZkLB2%2Fuploads%2FQGPEFa9g0EnPJcylG7LO%2Fbeaver-builder.png?alt=media&amp;token=ecdb4f65-b6e4-4d46-beb1-8a22f818dead" 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 using Beaver Builder
5. **Within Beaver**: Click on the plus and add an [HTML module](https://docs.wpbeaverbuilder.com/beaver-builder/layouts/modules/html/)
6. **Within the HTML module:** 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 within the Loop Module

The [Loop Module](https://docs.wpbeaverbuilder.com/beaver-builder/2.10/layouts/modules/loop/settings) is a Beaver Builder module that allows you to query and display posts. With Advanced Views, you can not only display custom fields inside the loop 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%2FVYr5qQjqglbSFHc5En2g%2Fbeaver-loop-module.png?alt=media&amp;token=48f1796e-c309-4a75-ad1a-4b9a502afbb3" 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 target page with the [Loop Module](https://docs.wpbeaverbuilder.com/beaver-builder/2.10/layouts/modules/loop/settings)
5. **Within Beaver**: Click on the plus and add an [HTML module](https://docs.wpbeaverbuilder.com/beaver-builder/layouts/modules/html/), putting it within the Loop
6. **Within the HTML module:** Paste the *Layout* embedding shortcode
7. Save the page and visit it to see the result

The elements inside the **Loop Module** are rendered for each found post, while the ***Layout*** displays the custom fields for that specific post.

{% hint style="success" %}
The **Loop Module** is a good choice for simple queries. If you need advanced filtering, sorting, or other query options, use the [*Post Selection*](/advanced-views/getting-started/first-post-selection.md) feature of Advanced Views.
{% endhint %}

## 3. How to display custom fields in a Themer Layout

[Beaver Themer Layouts](https://kb.wpbeaverbuilder.com/beaver-themer/layout-types-modules/) allow you to replace your WordPress theme’s default layouts with custom layouts built using Beaver Builder.  With Advanced Views, you can not only display custom fields inside the Themer Layout but also add conditions, merge fields, and modify field value output:

### 3.1) Custom Post Type layout

If multiple pages or Custom Post Type (CPT) items share the same set of custom fields, you don't need to embed an *Advanced Layout* in each item individually. Instead, embed the *Advanced Layout* in the appropriate [*Themer Layout*](https://kb.wpbeaverbuilder.com/beaver-themer/layout-types-modules/), 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%2Fgnkh0shPU6NKSPfnkfzX%2Fbeaver-themer.png?alt=media&amp;token=b1fc77f0-b212-42d8-a76b-614598a9b386" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2293383029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN2nAC4pTDjEmDu8ZkLB2%2Fuploads%2F6QQBLev2Ya3FgpABIWUa%2Fbeaver-themer-layout.png?alt=media&amp;token=2d600a9d-9531-49bd-b6be-d985fac5ec11" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2293383029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN2nAC4pTDjEmDu8ZkLB2%2Fuploads%2FQGPEFa9g0EnPJcylG7LO%2Fbeaver-builder.png?alt=media&amp;token=ecdb4f65-b6e4-4d46-beb1-8a22f818dead" alt=""><figcaption></figcaption></figure>

1. [Create an *Advanced Layout*](/advanced-views/getting-started/first-layout.md)
2. Add target fields in the *Fields* tab and save the *Advanced Layout*
3. Copy an [*Advanced Layout* embedding shortcode](/advanced-views/layouts/embedding-shortcode.md)
4. Open the [Beaver Themer Layouts](https://kb.wpbeaverbuilder.com/beaver-themer/layout-types-modules/) (Dashboard → Beaver Builder → Themer Layouts)
5. Choose any Beaver Layout (or add a new one for CPT items)
6. Launch Beaver Builder by clicking the button
7. **Within Beaver**: Click on the plus and add an [HTML module](https://docs.wpbeaverbuilder.com/beaver-builder/layouts/modules/html/)
8. **Within the HTML module:** Paste the *Advanced Layout* embedding shortcode
9. Save the Beaver Layout and visit any CPT item to see the result

{% hint style="warning" %}
If you created a new template for CPT, make sure you have configured the **Location** so that the template is applied to all your CPT items.
{% endhint %}

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) Header/Footer layout

{% 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 footer.&#x20;
{% endhint %}

In Beaver Themer, Header and Footer layouts are edited in the same way as any other layouts. The only difference in this integration is the shortcode modification: you need to add the `object-id` argument to load fields from the Options page:

1. [Create an *Advanced Layout*](/advanced-views/getting-started/first-layout.md)
2. Add target fields in the *Fields* tab and save the *Advanced Layout*
3. Copy an [*Advanced 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 [Beaver Themer Layouts](https://kb.wpbeaverbuilder.com/beaver-themer/layout-types-modules/) (Dashboard → Beaver Builder → Themer Layouts)
6. Choose Header/Footer layout (or add a new one)
7. Launch Beaver Builder by clicking the button
8. **Within Beaver**: Click on the plus and add an [HTML module](https://docs.wpbeaverbuilder.com/beaver-builder/layouts/modules/html/)
9. **Within the HTML module:** Paste the *Advanced Layout* embedding shortcode
10. Save the Beaver Layout 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 %}