I am creating a simple audio WordPress theme, and have a playlist being rendered in the front page using short-code [playlist ids="29,30,31,32,33,34]". How to list only the songs with title (or artist) that matches the text inside an input?

After days of research I came up with this method where I unhook the wp_underscore_playlist_templates() function and create my own version prefix_wp_underscore_playlist_templates(). Afterwards I use jQuery to check if data.title contains the search string. This correctly lists only the items that match the query, but it doesn't playback them correctly. If the search filters only 3 results out of 6, and you click in the 3rd filtered result, it will playback the song that it was originally in the 3rd position. Although the un-matched wp-playlist-item is not being added to the list, somehow still it exists in the memory of playback. I am also a designer, and partly a developer so forgive my approach to this solution.

    <script type="text/html" id="tmpl-wp-playlist-item">
     <# if (data.title.toLowerCase().indexOf("SEARCH QUERY HERE") >= 0) { #>
            <div class="wp-playlist-item">
                    <a class="wp-playlist-caption" href="{{ data.src }}" >
                            {{ data.index ? ( data.index + '. ' ) : '' }}

                                    <span class="wp-playlist-item-title">{{{ data.title }}}</span>
                                    <# if ( data.artists && data.meta.artist ) { #>
                                    <span class="wp-playlist-item-artist"> — {{ data.meta.artist }}</span>
                                    <# } #>

                    <# if ( data.meta.length_formatted ) { #>
                    <div class="wp-playlist-item-length">{{ data.meta.length_formatted }}</div>
                    <# } #>

    <# } #>
  • Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third party plugins and themes are off topic, they are better asked about at their developers' support routes. – Mat Apr 16 '18 at 9:05

I unhook the wp_underscore_playlist_templates() function and create my own version prefix_wp_underscore_playlist_templates()

You should first get back to or restore the default playlist template. (i.e. Hook back to wp_underscore_playlist_templates().)

Add then add this somewhere in the theme's main functions.php file:

add_action( 'wp_playlist_scripts', function(){
jQuery( function( $ ){
    // Add the search box.
    $( '.wp-playlist' ).prepend(
        '<p class="wp-playlist-custom-search alignright">' +
            '<input class="search-playlist" placeholder="Search" />' +
        '</p>' +
        '<div style="clear: both;"></div>'

    // Performs the search.
    $( '.search-playlist', '.wp-playlist' ).on( 'keyup', function( e ){
        var $playlist = $( this ).closest( '.wp-playlist' ),
            query = this.value;

        if ( ! query ) {
            $( '.wp-playlist-item', $playlist ).show();
        } else if ( e.key.length > 1 ) {

        $( '.wp-playlist-item-title', $playlist ).each( function(){
            var re = new RegExp( '(' + query + ')', 'ig' ),
                title = $( this ).text();

            if ( re.test( title ) ) {
                $( this ).closest( '.wp-playlist-item' ).show();
            } else {
                $( this ).closest( '.wp-playlist-item' ).hide();
        } );
    } );
} );
} );

You'd get a search box that looks something like:

enter image description here

And this, upon searching:

enter image description here

  • 1
    This works wonderfully! And if I change the class in $( '.wp-playlist-item-title', $playlist ).each to only .wp-playlist-item it also filters for artist. Thank very very much! – greg Apr 16 '18 at 11:49
  • One more thing, if a filtered song has ended, it doesn't jump to the next filtered song, but it continues to the next unfiltered (hidden) song between them, is there any way to fix this? – greg Apr 16 '18 at 14:17
  • 1
    Figured it out. I had to modify the next event in the WP core files, to skip the hidden wp-playlist-item by checking if css display is set to none. next : function () { this.index = this.index + 1 >= this.tracks.length ? 0 : this.index + 1; if (this.$('.wp-playlist-item').eq(this.index).css("display")=='none') {this.next();} else {this.setCurrent();}} – greg Apr 16 '18 at 17:57
  • Alternatively, without editing the core files, you can do it like this, where I override the global window.WPPlaylistView.prototype.next. But of course, you'd need to make sure the code is always "synched" with the current version of the wp-playlist.js file. – Sally CJ Apr 17 '18 at 5:43
  • 1
    Wow thank you Sally! Didn't expect you would also reply a solution about this. I am very grateful that you took your time to help me! – greg Apr 17 '18 at 13:45

Your Answer

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

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