Add Audio Player In Theme Header

Someone on Matt Mullenwegs Linkedin group asked about how to display a audio player in the header of Twenty Eleven.

The answer to this question really depends on which audio player you choose to install.

The solution i provided is based on using version 3.6 of WordPress which includes built in native support for audio, not to mention video.

You can install the latest version which is in Beta by installing the WordPress beta tester plugin by Simon Westwood.

No need to install an audio player plugin.

I suggest rather than edit the core parent theme files, you create a child theme for Twenty Eleven and use it for all your customization.

My solution is to:

1. Copy the header.php file into the child theme and insert a custom hook named wpsites_header into the exact location you want to output the audio player in your header.
2. Add the code included below to your child themes functions.php file to register the custom hook and output the audio player in your header.

Don’t forget to change the url to your audio file.

The code above includes a function which adds support for and executes shortcodes in any hook location included in the function. It also includes a conditional tag so it only displays on the home page which you can either remove or change.

If you’re using a theme with hooks, you can simply change the custom hooks in the code and it will work.