0

I have created a shortcode that is intended to be inserted into custom field of a music custom post type. The shortcode is coverted into an audio playlist using the jplayer jquery plugin (and it's playlist addon), with the tracklist passed to jplayer via the wp_localize_script function.

The shortcode needs to work on both the single_music page, and also in a custom widget. The problem I am having is that the tracklist for the single_music post is being overridden by the widget tracklist, due to wp_localize_script being declared twice with the same settings.

Here is the shortcode that goes into a custom field:

[musicplayer ids="45,56,87,56"]

Here is the shortcode function:

add_shortcode('musicplayer','gs_musicplayer_shortcode');

function gs_musicplayer_shortcode($atts) {

  wp_enqueue_script('jplayer-setup');

  $ids = explode(',', $atts['ids']);

  $tracks = array();

  foreach ($ids as $key=>$id) {
    $meta = wp_get_attachment_metadata( (int)$id, true );
    $url = wp_get_attachment_url( (int)$id );
    if ($url){
      $tracks[] = array(
        'title' => $meta['title'],
        'mp3' => $url
      );
    }
  }

  $playlist = array( 'tracks' => $tracks );

  wp_localize_script( 'jplayer-setup', 'playlist', $playlist );

  $output = "<!-- HTML CODE FOR JPLAYER -->"    
  return $output;

}

And the jquery file that sets up the jplayer playlist:

var primaryPlaylist = new jPlayerPlaylist({
  jPlayer: "#primary-music-player .jp-jplayer",
  cssSelectorAncestor: "#primary-music-player .jp-container"
}, playlist.tracks, {
  swfPath: "http://localhost/wp/wp-content/themes/gs/js/jplayer/Jplayer.swf",
  supplied: "mp3"
});

var widgetPlaylist = new jPlayerPlaylist({
  jPlayer: "#widget-music-player .jp-jplayer",
  cssSelectorAncestor: "#widget-music-player .jp-container"
}, playlist.tracks, {
  swfPath: "http://localhost/wp/wp-content/themes/gs/js/jplayer/Jplayer.swf",
  supplied: "mp3"
});

Is there a way of passing seperate arrays through wp_localize_script, depending on whether the shortcode was inserted via a widget or in (for example) the #primary content area?

Something like this perhaps...

if ( shortcode was called from #primary ) {
  $playlist = array( 'tracks-primary' => $tracks );
}
else ( shortcode was called from widget ) {
  $playlist = array( 'tracks-widget' => $tracks );
}

wp_localize_script( 'jplayer-setup', 'playlist', $playlist );

Any help much appreciated!!!

  • 1
    Why not simply choose to name the variables passed by wp_localize_script differently (i.e. different from each other)? Why does it have to be playlist.tracks in both cases? Am I missing something? – Johannes Pille Aug 7 '13 at 15:30
  • or make it completely location-agnostic, generate and pass a unique ID for each player and use that ID for the player markup – Milo Aug 7 '13 at 15:52
  • Thanks for the suggestion @Milo, that does seem like the way forward. I have appended the post id to the array passed via wp_localize_script... but I can't find anyway of accessing these variables within the javascript as the arrays are now named playlist-##.tracks. Do you know of any way of getting all the variables in a javascript file that have been passed? All info I can find find on wp_localize_script assumes knowledge of the exact variable to be used. – George Sep 1 '13 at 7:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.