This members-only tutorial provides the steps to

  • register a `audio` Custom Post Type
  • use Advanced Custom Fields plugin to add mp3 and ogg files upload fields when editing the CPT entries
  • set up a template in Oxygen for the CPT archive page to show the entries in a grid with Play/Pause button overlayed on top of the featured image

with the Play/Pause functionality powered by AudioPlay 2 - a one button HTML 5 music player.

Step 1

Install and activate Custom Post Type UI.

Go to CPT UI > Add/Edit Post Types.

Add audio post type like so:

In the Settings section, set "Has Archive" to True.

Click "Add Post Type" button.

Step 2

Install and activate Advanced Custom Fields.

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

This should import a "Audio Meta" field group having mp3 and ogg custom fields (both set to return URL). Ensure that the field group is attached to the audio CPT.

Step 3

Go to Audio Tracks > Add New.

Add your audio post type entries with Title, Content, mp3, ogg files and featured image for each.

Step 4

Go to Oxygen > Templates.

Add a new template named say, "Audio Archive".

Apply it to audio post type archive with a priority of 1 (or more depending on how your template for sitewide archives is setup).

Edit it with Oxygen.

Add a Section. All the following elements are to be added inside this Section.

a) [optional] Add a Heading element.

Double click the placeholder text, click on "Insert Data" button at the top and click on "Archive Title". This will replace the text with dynamic title of the post type archive (once you click off of the element).

b) Add an Easy Posts element.

Template PHP:

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($37/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

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.
magnifiercross
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: