> 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/genesis/displaying-custom-fields.md).
# Displaying custom fields in the Genesis theme
Using [*Layouts*](/advanced-views/getting-started/first-layout.md) from Advanced Views, you can display any custom fields in [Genesis](https://www.studiopress.com/themes/genesis/). 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 %}
Displaying custom fields in Genesis with Advanced Views offers a row of advantages over manually rendering them via [get\_post\_meta()](https://developer.wordpress.org/reference/functions/get_post_meta/):
1. Variable loading – you don't need to consult the ACF or Meta Box documentation to determine field return types or manually convert IDs into template-ready values.
2. [Template validation](/advanced-views/features/workflow/template-validation.md) – if you modify or remove fields used by a *Layout*, Advanced Views automatically detects the changes and notifies you which *Layouts* require attention.
3. Modular [CSS](/advanced-views/layouts/code-fields/css-code.md) and [JavaScript](/advanced-views/layouts/code-fields/javascript-code.md) – each *Layout* has its own CSS and JavaScript files, which are loaded only on pages where that *Layout* is rendered. This helps keep your global `style.css` and scripts tiny and improves page speed.
With the [File Storage support](/advanced-views/features/file-system-storage.md), you get the best of both worlds: [smart templates](/advanced-views/features/smart-templates.md) are stored as files, allowing you to edit them directly in your IDE and manage them with Git.
## 1. How to display custom fields on a single page
{% hint style="info" %}
This section is for [Gutenberg](/advanced-views/integrations/editors/gutenberg/displaying-custom-fields.md), the default editor in Genesis. If you use any page builder, refer to [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 in any place in the Gutenberg editor:
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 or post
5. **Within Gutenberg**: Click on the plus and add a [Shortcode block](https://wordpress.org/documentation/article/shortcode-block/)
6. **Within the Shortcode block**: 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).
{% 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).
{% endhint %}
## 2. How to display custom fields in a Template
In Advanced Views, *Layouts* are embedded using native WordPress shortcodes. Genesis theme uses PHP templates that control every part of the site's output, including single pages, archives, the header, and the footer.
You can embed *Layouts* in any of these templates:
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 template](https://developer.wordpress.org/themes/classic-themes/basics/template-files/) (e.g. `single-{post-type}.php`)
5. Embed the *Layout* shortcode: ``
6. Open the target page to see the result
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 %}
## 3. How to display custom fields in the Query Loop block
{% hint style="info" %}
By default, the [Query Loop block](https://wordpress.org/documentation/article/query-loop-block/) can display only native WordPress fields from the queried posts. By using *Layouts*, you can not only display custom fields within any Query Loop, but also add conditions, merge fields, and modify field value output.
{% endhint %}
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 Query Loop block
5. **Within the Query Loop block**: click on the Post Template element
6. **Within Post Template**: click on the plus and add a [Shortcode block](https://wordpress.org/documentation/article/shortcode-block/)
7. **Within the Shortcode block**: Paste the *Layout* embedding shortcode
8. Save the page and visit it to see the result
The **Post Template** inside the **Query Loop** is rendered for each found post, while the ***Layout*** displays the custom fields for that specific post.
{% hint style="success" %}
The **Query Loop** block 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 %}
