> 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/ocean-wp/displaying-custom-fields.md).

# Displaying custom fields in the OceanWP theme

Using [*Layouts*](/advanced-views/getting-started/first-layout.md) from Advanced Views, you can display any custom fields in [OceanWP](https://wordpress.org/themes/oceanwp/). 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" %}
This section is for [Gutenberg](/advanced-views/integrations/editors/gutenberg/displaying-custom-fields.md), the default editor in OceanWP. 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:   

<figure><img src="https://2293383029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN2nAC4pTDjEmDu8ZkLB2%2Fuploads%2Fm3hDSDaC5U3yHsrZK3Fy%2Fimage.png?alt=media&amp;token=2f4c40a0-f294-42c3-8e4c-89759f409dd5" 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 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).&#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 Library Template

### 2.1) Header/Footer 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 footer.&#x20;
{% endhint %}

In OceanWP, Library Templates allow you to create a [custom Header](https://docs.oceanwp.org/article/355-how-to-create-a-custom-header) and Footer.

<figure><img src="https://2293383029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN2nAC4pTDjEmDu8ZkLB2%2Fuploads%2Fv5dxlLokKVbxA60TDDMs%2Focean-wp-library.png?alt=media&amp;token=398ec9ef-04d2-45cc-91b9-9e77517984b5" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2293383029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN2nAC4pTDjEmDu8ZkLB2%2Fuploads%2Fj0leO9VHikW25bUjOBWp%2Focean-wp-header.png?alt=media&amp;token=b8819a98-ef84-49a2-babc-32525bfe6181" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2293383029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN2nAC4pTDjEmDu8ZkLB2%2Fuploads%2F7PNjYjSoBes7M49pRfbs%2Fcustom-header-settings.png?alt=media&amp;token=0af5488d-71f4-4961-a522-56179060e24d" alt=""><figcaption></figcaption></figure>

The only difference in this integration compared to the single page is the shortcode modification: you need to add the `object-id` argument to load fields from the Options page:

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 [OceanWP Templates Library](https://docs.oceanwp.org/article/355-how-to-create-a-custom-header) (Dashboard → OceanWP → My Library).
6. Choose a Header/Footer template (or add a new one)
7. **Within Gutenberg**: Click on the plus and add a [Shortcode block](https://wordpress.org/documentation/article/shortcode-block/)
8. **Within the Shortcode block**: Paste the *Layout* embedding shortcode
9. Save the template and visit any page to see the result

{% hint style="warning" %}
If you created a new Header template, don’t forget to go to **Appearance → Header → General** and assign it there.
{% endhint %}

{% 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 %}

## 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 %}

<figure><img src="https://2293383029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN2nAC4pTDjEmDu8ZkLB2%2Fuploads%2FrThvJDOoufOMUDh5tfny%2Flayout-shortcode-in-query-loop.png?alt=media&amp;token=815231f6-d789-44a0-8774-f66874554959" 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 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 %}