I’m working on a WordPress theme for a website that makes heavy use of its default media player. In the process of styling its playlists, I found that a core file injects hardcoded characters that can’t be made invisible just by using CSS, so I’m a bit clueless about how to hide/remove them.
These characters are injected on 3 different places on each playlist entry:
- those entries are numbered, but the container is a div instead of an ol, so using list-style-type: none is not possible;
- they add curly quotes to the song title, but not by using :before and :after;
- and they add an em dash before the artist name, also not by using the :before pseudo-class.
On wordpress\wp-includes\js\media.php there’s a function called wp_underscore_playlist_templates which declares the following 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/296966/{{ data.src }}">
{{ data.index ? ( data.index + '. ' ) : '' }}
<# if ( data.caption ) { #>
{{ data.caption }}
<# } else { #>
<span class="wp-playlist-item-title"><?php
/* translators: playlist item title */
printf( _x( '“%s”', '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>
</script>
Of course I could edit this core file, but I don’t want to do that. So what should I do? Add a filter on functions.php? Make a JS file?
2 Answers
Inside the shortcode function for playlists, there is this line:
do_action( 'wp_playlist_scripts', $atts['type'], $atts['style'] );
Hooked into that is wp_playlist_scripts()
which hooks the templates into the footer:
add_action( 'wp_footer', 'wp_underscore_playlist_templates', 0 );
add_action( 'admin_footer', 'wp_underscore_playlist_templates', 0 );
So if you want to replace the templates, you can hook into wp_playlist_scripts
after those hooks have been added (so any priority greater than 10), remove the hooks, then hook in your own templates:
function wpse_296966_hook_new_playlist_templates() {
// Unhook default templates.
remove_action( 'wp_footer', 'wp_underscore_playlist_templates', 0 );
remove_action( 'admin_footer', 'wp_underscore_playlist_templates', 0 );
// Hook in new templates.
add_action( 'wp_footer', 'wpse_296966_underscore_playlist_templates', 0 );
add_action( 'admin_footer', 'wpse_296966_underscore_playlist_templates', 0 );
}
add_action( 'wp_playlist_scripts', 'wpse_296966_hook_new_playlist_templates', 20 );
Then you just need to copy the wp_underscore_playlist_templates()
function, in its entirety, to a new function in your theme/plugin called wpse_296966_underscore_playlist_templates()
(or whatever you want, just needs to match the add_action()
call. Then make any modifications you want to the function to get the markup you wanted.
I would avoid doing anything too drastic though, since the scripts likely depend on specific classes, and the general structure. But removing these unwanted characters shouldn’t be a problem.