This members-only tutorial provides the steps to develop an Oxygen template for single pages of a "service" Custom Post Type with an attached "faq" ACF Pro Repeater field automatically appearing with expand-collapse functionality using jQuery Collapse.

Backend:

Frontend:

Step 1

Install and activate Custom Post Type UI.

Go to CPT UI > Add/Edit Post Types.

Add service post type like so:

Click "Add Post Type" button.

Step 2

Install and activate Advanced Custom Fields Pro.

Go to Custom Fields > Tools and import this field group.

This should add a "FAQ" field group having questions_and_answers repeater field with question and answer sub fields.

Ensure that the field group is attached to the service CPT.

Step 3

Go to Services > Add New.

Add your service post type entries with Title, Content, Featured image and as many Question and Answer pairs as you want for each.

Step 4

Go to Oxygen > Templates.

Add a new template named say, "Service CPT Single".

Set it to inherit from your Main template having the site header and footer.

Apply it to Singular > Services with a priority of 1 (or more depending on how your template for sitewide single entries is setup).

Edit it with Oxygen.

Step 5

Add a Section and add your desired elements like the Post Title, Featured image and Content.

Let's loop through the questions_and_answers field and output the question and answer sub fields for each row.

Add a Code Block.

Go to Advanced > Size & Spacing and set Width to 100%.

PHP & HTML:

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($47/month or $399 one-time).

Already a member? Log in below or here.

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

You need to be logged in to view and post comments.
Not a member yet? Join here.
magnifiercross
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: