How to display Custom Fields’ values on the Posts page in Oxygen

This members-only tutorial provides the steps to output custom fields attached to the Posts page on the front end in Oxygen.

In this example we shall show a page_header_text text-type custom field's value below the site header.

Back end:

Front end:

Step 1

Create a Page titled say, Blog.

Go to Settings > Reading and set it as Posts page.

Step 2

Install and activate Advanced Custom Fields (ACF) or ACF Pro.

Add a new field group named say, "Page Header".

Add a Text type field with "Page Header Text" as Field Label. Ensure that the Field Name is page_header_text.

Set the field group to appear on the Posts page.

Step 3

Edit the "Blog" Page and enter your desired heading text for the Page Header Text.

Step 4

Go to Oxygen > Templates.

Add a new Template titled say, "Posts page".

Set it to inherit from your main Catch All Template.

Set it to apply to "Blog Posts Index" (under Other).

Set the priority to a number necessary to override any other Template that may apply to this view.

Step 5

Edit the Template with Oxygen.

a) Add a Section inside the Inner Content.

Set your desired background color to it.

Add a Code Block inside the Section.

Set the Tag to a heading tag like h2.

PHP & HTML: