How to have the right design for a custom post type without accessing themes

by

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.

<?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.

Leave a Comment