Adding a download link to native WordPress playlist

Question

Thanks to both of you for your help.
Just so it might help others, this is what I did:
Downloaded a wordpress plugin to allow custom scripts. I used this one >> https://wordpress.org/plugins/header-and-footer-scripts-inserter/

I then pasted this code within the plugin (thanks to Birgire above & HERE :

<script type="text/html" id="tmpl-wp-playlist-current-item">
    <# if ( data.image ) { #>
    <img src="https://wordpress.stackexchange.com/questions/292585/{{ data.thumb.src }}"/>
    <# } #>
    <div class="wp-playlist-caption">
            <span class="wp-playlist-item-meta wp-playlist-item-title">{{ data.title }}</span>
            <# if ( data.meta.album ) { #><span class="wp-playlist-item-meta wp-playlist-item-album">{{ data.meta.album }}</span><# } #>
            <# if ( data.meta.artist ) { #><span class="wp-playlist-item-meta wp-playlist-item-artist">{{ data.meta.artist }}</span><# } #>
    </div>

</script>
<script type="text/html" id="tmpl-wp-playlist-item">
    <div class="wp-playlist-item">
            <a class="wp-playlist-caption" href="https://wordpress.stackexchange.com/questions/292585/{{ data.src }}">
                    {{ data.index ? ( data.index + '. ' ) : '' }}
                    <# if ( data.caption ) { #>
                            {{ data.caption }}
                    <# } else { #>
                            <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>
                            <# } #>
                    <# } #>
            </a>
            <# if ( data.meta.length_formatted ) { #>
            <div class="wp-playlist-item-length">{{ data.meta.length_formatted }}</div>
            <# } #>             
    </div>

    <!-- BEGIN CHANGES -->
       <a href="https://wordpress.stackexchange.com/questions/292585/{{ data.src }}" class="wpse-download" download=""><i class="fa fa-download" title="Download" aria-hidden="true"></i></a>
    <!-- END CHANGES -->
    </script>

In the above code I also removed the speech / quote marks around the playlist title (this is hard coded into the WP core. I had asked a different question about removing these but this code resolves this too. Good times : )

I then altered the css to place the download icon at the beginning, in front of the playlist title, then padded the title over to the right so it all fitted. (it was the ‘absolute’ positioning that I needed to stop this activating the playlist rather than the download)

/*playlist title - more to right*/
.wp-playlist-item-title {
    padding-left:25px
}

/*download link styles - move within playlist & to left of playlist title*/

.wpse-download {
    margin-top: -22px;
    padding-left:5px;
    position: absolute;
}

/*change color of icon*/
.wpse-download {
 color:white!important;
}

/*change hover / active state of download icon*/
.wpse-download:hover, .wpse-download:visited
{
 color:#aaa!important;
}

I have styled the playlist further to suit my needs but here is what I ended up with. Thanks again : )

Related Posts: