Assuming that your custom post type is “songs”, I guess what you need is something like this:
First, allow the theme to provide a design / template file for your custom post type, if WordPress can’t find one, fall back to your design, which you provided in your plugin folder.
<?php
// Template Logic:
function mp3_player_design_init_template_logic($original_template) {
// Check Theme Template or Plugin Template for archive-songs.php
if(is_post_type_archive('songs') || (is_search() && $_GET['post_type'] === 'songs')) {
if(file_exists(get_template_directory_uri() . '/archive-songs.php')) {
return get_template_directory_uri() . '/archive-songs.php';
} else {
return plugin_dir_path(__FILE__) . 'templates/archive-songs.php';
} // Check for single page
} elseif(is_singular('songs')) {
if(file_exists(get_template_directory_uri() . '/single-songs.php')) {
return get_template_directory_uri() . '/single-songs.php';
} else {
return plugin_dir_path(__FILE__) . 'templates/single-songs.php';
}
}
return $original_template;
}
add_action('template_include', 'mp3_player_design_init_template_logic');
We “add an action” to WordPress, which uses/can manipulate the hook “template_include”. This action hook takes one argument ($original_template) and then goes through some logic in order to determine which template file to use.
The archive-songs.php is the file which would list all of your songs/streams/playlists as a whole, one by one.
The logic for that file would be something like this:
<?php
// Query Arguments, grab all data (up to 30 per page)
$song_args = array(
'post_type' => 'songs',
'posts_per_page' => '30',
'orderby' => 'name',
'order'=>'ASC'
);
$loop = new WP_Query($fsongs_args);
// now, loop over the result array and build your html design
// You could also use the WordPress Options/settings api to get some colors or layout options in order to make your design changable by the user
while ( $loop->have_posts() ) : $loop->the_post();
// Get song Meta Data
$slogan = get_post_meta(get_the_ID(), 'slogan', true);
$subtext = get_post_meta(get_the_ID(), 'subtext', true);
// Some card design with bootstrap for example
// Start song card
$html .= '<div class="col-xs-12 col-sm-6 col-md-4 song-cards" id="song-id-'.get_the_ID().'">';
$html .= '<div class="song-card">';
$html .= '<h3>'.get_the_title().'</h3>';
$html .= $subtext;
$html .= $slogan;
$html .= '</div>';
$html .= '</div>';
endwhile;
// spit out/echo the html design into your document body
echo $html;
// Reset the WordPress query to avoid funny results in the next query..
wp_reset_query();
All this code goes into your main plugin file. Also, please notice that the files, archive-songs.php and single-songs.php are sitting in a subfolder called “templates”.
Please keep in mind, that this is just a suggestion into the dark. As I have written above, there are tons of ways to implement the design adaption. I also have to admit, that I don’t fully understand what you mean by “artwork”.
To me that is the good old Album Cover from a CD or LP and has nothing to do with the design of your music player layout from the plugin or the theme.
It would be helpful if you explain a bit better what you mean with that.
However, I hope this helps. If you have any questions, please let me know.