I am trying to create a music player plugin for WordPress. Using custom post types, and custom fields, I could make posts that takes a URL and artwork.

The player works based on jQuery and once the URL and the artwork is given to it, it will create the layout using its CSS styles. But as it will be a plugin only and not a theme, how can I connect the post data to the plugin? The idea is, when the URL and artwork is given, the player's style will show up on the website using those info.

It seems like I have to create themes like single-posttype.php and to insert right html and css. But what if it is only a plugin and not a theme? What is a usual solution?

1 Answer 1


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.


    // 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:

    // Query Arguments, grab all data (up to 30 per page)
    $song_args = array(
        'post_type' => 'songs',
        'posts_per_page' => '30',
        'orderby' => 'name',
    $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>';
   // spit out/echo the html design into your document body
   echo $html;
   // Reset the WordPress query to avoid funny results in the next 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.

  • Thank you very much for your post. It is close to what I was looking for. However, I am not sure about the first part of the code. Where do I have to locate the first code? As I said the product will work as a single plugin, so I have no control over the template. So could you please explain that part a bit more. Thank you.
    – DannyBoy
    Dec 29, 2017 at 4:29
  • The first part of the code can go into your main plugin file,or include it with "require in php". Maybe it helps to think the other way around: the code "first" checks, if the "theme" has the correct design/archive/single file. BUT because the theme propably won't have a template file, the plugin will use it's own. This allows the theme to overwrite your plugin design with their custom design at a later point in time without affecting your plugin design file. The trick is to use if(file_exsists)...which wil check if there is a template file and then return true or false. Got it? Dec 30, 2017 at 3:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.