Displaying custom fields in the Gutenberg editor

Using Layouts from Advanced Views, you can display any custom fields in the Gutenberg editor. Smart templates give you complete control over the markup and display logic without extra hassle.

Advanced Views natively supports fields from multiple providers:

1. WordPress fields (like page title, excerpt, user name, etc)

2. Advanced Custom Fields (any field type)

3. MetaBox fields (any field type)

4. Pods fields (any field type)

5. WooCommerce Product fields (like price, SKU, height, etc)

To display other fields made by your theme or plugins, just customize the default Layout template.

1. How to display custom fields on a single page

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

2. Add target fields in the Fields tab and save the Layout

3. Copy a Layout embedding shortcode

4. Open the target page or post

5. Within Gutenberg: Click on the plus and add a 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.

By default, Layout displays chosen fields of the current page. You can display fields from other sources by tuning the Layout shortcode arguments.

2. How to display custom fields in a Template

Block themes (all default WordPress themes, like Twenty Twenty-Five) also use Gutenberg for the Site Editor management. Using Advanced Views, you can display custom fields in any theme location.

2.1) 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 template so it is rendered automatically for every corresponding item:

1. Create a Layout

2. Add target fields in the Fields tab and save the Layout

3. Copy a Layout embedding shortcode

4. Open the Site Editor (Dashboard → Appearance → Editor).

5. Choose any Template (or add a new one for CPT items)

6. Within the Template: click on the plus and add a Shortcode block

7. Within the Shortcode block: Paste the Layout embedding shortcode

8. Save the template and visit any CPT item 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.

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.

2.2) Header/Footer template

In block themes, the Header and Footer are template parts managed from the Patterns section of the Site Editor. A common use case is displaying custom fields from an Options page in the site footer.

To do this, simply embed a Layout in the Footer template part, and its content will be rendered automatically across the entire site.

1. Create a Layout

2. Add target fields in the Fields tab and save the Layout

3. Copy a Layout embedding shortcode

4. Modify Layout shortcode: add object-id="options" argument (to display fields from the Options page)

5. Open the Site Editor (Dashboard → Appearance → Editor).

6. Click Patterns → Header (or Footer) tile

7. Within the Template: click on the plus and add a Shortcode block

8. Within the Shortcode block: Paste the Layout embedding shortcode

9. Save the pattern and visit any page to see the result

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.

3. How to display custom fields in the Query Loop block

By default, the 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.

1. Create a Layout

2. Add target fields in the Fields tab and save the Layout

3. Copy a Layout embedding shortcode

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

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.

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 feature of Advanced Views.