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: