Featured Audio in WordPress

Featured images are native to WordPress core, allowing themes to represent posts and pages with images. But for many users, there are more important content formats than visuals. As a musician, I’ve explored different approaches to integrating WordPress’ audio functionality with post objects, most recently with the Sheet Music Library plugin.

I recently began exploring a new idea — a premium WordPress theme built specifically for musicians and musical groups — and I realized that WordPress needs a generic solution for the broad concept of associating audio files with posts. Post meta associated with specific custom post types or embedding audio directly in posts limits the opportunities for themes to display audio in unique ways and for plugins to create aggregated presentations of audio associated with different posts.

The Plugin

Screenshot of the featured audio option
Featured Audio metabox in the editor.

Seeking to introduce a broad solution to the challenges of deeply integrating audio with core WordPress functionality, I’m introducing the Featured Audio plugin. Featured audio is perfect for musicians, podcasters, and anyone who publishes audio content on their site frequently. It works with every theme out of the box by displaying WordPress’ native (mediaelement.js) audio player at the top of the_content. Themes that style the audio player already will offer a customized experience for site visitors using featured audio.

Screenshot of featured audio for the twent fifteen theme
Default featured audio display with the Twenty Fifteen theme.

I’d love to see more themes designed specifically to make audio a central component of sites’ content. If they all leverage this standardized featured audio plugin, users publishing audio content can get a wide variety of options for displaying their content and the content adapts seamlessly from theme to theme, just like publishers of visual content get with featured images.

The Importance of an API

To make featured audio as broadly extensible as possible, I spent a significant amount of time building public API functions into the plugin that facilitate custom implementations and integrations. Where it makes sense, these functions parallel the post_thumbnail/featured images API in WordPress core. However, the most notable difference is that theme support isn’t required. Taking a similar approach to the Featured Image in Content plugin (but also always showing the admin UI), the content is available regardless of theme support to allow a broader array of themes to be used. Theme support is used to indicate custom implementations, and turns off automatic front-end display of featured audio on a technical level.

A majority of sites probably don’t use audio at all, making the idea of featured audio probably inappropriate for WordPress core. But by building a core-like solution that themes and other plugins can extend, we can provide audio publishers with similar opportunities to publish freely with WordPress. And the development of themes and plugins that extend and customize the experience will further promote publishing audio with WordPress.

Infinite Possibilities

Once the base API is in place via the Featured Audio plugin, there are endless possibilities for themes and plugins to expand the potential of featured audio to offer tools for publishers. Plugins can expand the API to offer additional functions for custom theme display, or other tools such as widgets or shortcodes to aggregate featured audio across posts. The core playlist functionality is especially promising here.

Themes can do anything from moving where featured audio is displayed or adding it to archive views that don’t display the content to showcasing audio in unique and unexpected ways in the front-end UI. We’ve seen featured image headers, so why not featured audio headers, with the ability to set up a default audio file in the customizer. I’m excited to see what theme designers can come up with.

Screenshot of a featured audio playlist entitled "featured on this page"
Feadured Audio Playlist widget in the Twenty Fifteen theme.

To offer a glimpse of the possibilities, I’ve built a few advanced features into the plugin. The API includes arguments for the main the_featured_audio() function to display the title and/or album art (which WordPress automatically pulls from MP3 files that have it) alongside the audio player for easy display of additional information in themes. The plugin also adds a Featured Audio Playlist widget, which displays a playlist with all of the featured audio associated with posts on the current view, such as a blog index, archive, or taxonomy page. The playlist output is also available directly via an API function for custom display in themes outside of the widget context. For example, a playlist could be displayed alongside a taxonomy title and description at the top of a taxonomy archive. Playlists are great because they allow visitors to listen to more of your content without repeated manual interactions, and in this scenario they’re automatically created and organized on-the-fly based on the existing organizational structure of a WordPress site.

Content Ownership and Hosting

One of my personal goals with featured audio is to encourage publishers to host their own audio content directly in their WordPress site. Third-party services such as Soundcloud offer advantages in distribution but when it comes to displaying content on sites, I frequently get the impression that users don’t realize that they can host and publish their audio content directly. WordPress is about democratizing publishing, and part of that mission is to give users complete control over their content. With better resources for publishing audio directly in WordPress, fewer users will feel a need to turn to third-party services. Long term, it would be awesome to see third party social and aggregation sources for audio content pulling data out of WordPress sites rather than the other way around, as it is currently.

Next Steps

Now that the plugin is live on the repository, publishers can start using featured audio with the basic experience on any theme out of the box. But the really exciting opportunities come with plugins and themes that extend the basic experience, and it’s up to you to start designing and building those projects. I’m hoping to build a commercial musician-oriented theme that integrates with featured audio eventually, but the beauty of open source software is that anyone can create free or commercial products that build on this functionality. I’m excited to see what the community can do together to improve the experience of publishing audio content with WordPress.

USC ASCE Blog Posts

As I complete my three-year period involved in the leadership of USC ASCE, I want to add an archival link here to the content I created for its blog. I built the site from scratch my freshman year and it’s been going strong with the Twenty Fourteen theme for three years now. I wrote well over 100 posts on the blog over the past 3 years, easily my largest collection of work to date:

http://uscasce.com/author/nick/

New Photography Site

I’m launching another new site on celloexpressions.com this summer. Cello Expressions Photography could be considered a photo blog in many ways, but its primary purpose is to serve as a collection of visually stimulating and contextually significant imagery. Bringing my academic/professional interests to Cello Expressions for the first time, this site focuses on architecture, landscape architecture, and construction. Given my current internship at the USC Village project, expect a particular construction emphasis right now. Visually interesting textures and natural landscapes are also featured.

Check it out at https://celloexpressions.com/photography.

The site is using my Lucidus WordPress theme, resulting in a major focus on images and minimal UI. The theme will be publicly available soon, likely as a premium theme but possibly for free on WordPress.org depending on time. Note that due to the heavy use of images, it may take some time for the content to load, but once it does, it’s pretty cool!

2015 Boulder Cello Project/Chase the Music Collaboration Concert

This weekend I’m partnering with the Boulder Cello Project and Chase the Music to put on our 3rd annual concert for children in critical situations. This year’s concert is for a brother and sister and will feature a bold musical celebration of these two amazing kids.

My latest composition, Awe & Joy, scored for Flute, Horn, Percussion, and Cello Ensemble, will be premiered at the concert this Sunday, August 9, 2015 in Boulder, CO. The concert is free and we have plenty of room in the hall for guests. Details and RSVP here: https://www.eventbrite.com/e/concert-for-ayla-and-jayden-tickets-17769911283.

USC Village Live Webcam

I’m working at the USC Village jobsite this summer as an intern for Hathaway Dinwiddie Construction Co. This is a huge project – 15 acre site, 6 buildings, over 1 million square feet – and USC has set up the usual webcams to monitor the construction progress. Unfortunately, theirs uses painfully outdated software that won’t even work in IE in compatibility mode unless you get really lucky. So I set up a page that pulls in the latest image from the camera and displays it full-screen, updating the image every second or as your connection allows so that you can see the progress.

View the full-sized live webcam stream here.

The Customizer is the Future for Themes and Theme Options

There has been a lot of backlash from the WordPress community recently over the theme review team’s decision to require theme options to be implemented in the Customizer. But this decision really is in everyone’s best interest.

WordPress 4.2 shipped with the ability to switch themes in the Customizer. When theme-installation is incorporated in a future release, the entire theme selection and customization process will be streamlined to a seamless workflow in which the user never enters the WordPress admin. This functionality is specifically targeted to users that leverage free WordPress.org themes, so it just makes sense for all themes hosted there to be Customizer-optimized. But the real win is the ability to live-preview changes before publishing them. With the Customizer, users know exactly what their site will look like when they publish their changes, a critical feature for anyone who cares what their site looks like when it’s publicly available.

Many people have been critical of the user-oriented nature of the Customizer. But its power is much stronger than most realize; one of my favorite use-cases for the customizer is custom CSS. This is the easiest way for users who want to go further to get into coding and offers a seamless experience that is infinitely better than the easy-to-kill-your-site-or-lose-your-changes-with code editor in the admin. In fact, I’d love to see a customizer-based custom CSS functionality in core as a replacement for the code editor, although I have a feeling that proposal may be too political to advance to an implementation. Bottom line, the customizer lowers the barrier to entry into WordPress development, contrary to many people’s thinking.

Yes, free themes requiring use of the Customizer will lead to a similar movement for client themes and premium themes. And that’s okay. In fact, by having everyone using the same underlying framework, users know where to look for options and have the confidence that live previewing provides. And WordPress will provide a more consistent visual experience for users as well.

You can really build any functionality into the Customizer. Theme-switching, widgets, and menus were all built as plugins first and continue to use the publicly available customizer API to run. So if you must, you can still create ridiculously complicated UI elements that no one will be able to figure out how to use, but you really don’t need to.

And complaints about the amount of screen real estate available and the 300px default width show a lack of creativity and resistance for the sake of resistance to change. Start by removing all of the ads, external links, unnecessary branding, unnecessary options, and general clutter. Make your options self-explanatory – if you need a paragraph to describe what it does, it probably shouldn’t be a user-facing option. Do you still have so much UI that the experience is completely unusable? Try an outside-the-box solution, like utilizing the core media modal (header images and core media controls use it), a custom modal (theme details modal in core), or a slide-out panel (widgets in core and eventually menus in core as well).

No, the customizer isn’t perfect. But it’s time to give it the respect it deserves as a significant part of WordPress. After three years of slow adoption, the theme review team’s decision to enforce its use is a welcome sign for users and a positive decision for the WordPress community as a whole. I’m excited to see what developers do with the Customizer’s amazingly powerful API and what core contributors come up with to improve its design and usability.

Twenty Fifteen, no sidebar

Twenty Fifteen is another great default theme that can be easily customized. I recently had to put up a quick site for my new themes site on halsey.co. I only wanted one or two pages, with a super simple layout.

I decided to just remove the sidebar (remove the widgets first) and center the content area. On mobile, all we need to do is remove the header. This also removes the “proudly powered by WordPress” footer, as there’re better ways to display that in this context if you want it. Here’s the CSS:

body:before,
#sidebar,
#colophon,
.entry-footer {
	display:none;
}

.site-content {
	margin: 0 auto;
	float: none;
	width: 100%;
	max-width: 1200px;
}

If you’re not familiar with CSS, the easiest way to implement this is to install & activate the Modular Custom CSS plugin, then go to the Customizer and add the above CSS to the “Custom Theme CSS” field.

New Sheet Music Library: The Story

After nearly two years of planning, false starts, and development, I finally launched a new sheet music library. In this post, I’ll discuss the development and implementation process, design decisions, and how I created this project in a way that the source code will be available for anyone to use for free.

History

I started posting my cello ensemble compositions and arrangements online in early 2012, when I first set up celloexpressions.com as the website for my high school cello quartet, Cello Expressions. When I transitioned the site to be the home for my projects in August of that year, I created a series of separate WordPress installs for my different sites, moving the original site to the music subdirectory and building a new system to display sheet music in a more structured way. Because I had spent the summer developing Euclid’s Muse, basing the code off of a horribly-written BuddyPress plugin, I thought that the best approach would be to create a custom database table, querying it directly. I didn’t have the time to build a posting or editing UI, so I decided I would just make edits directly in the database with PHPMyAdmin. That worked for a few months, and in November 2012, I redesigned the site’s theme (poorly). But I would last post a new piece in January 2013. It was clear that I needed an entirely different system, and that I would probably need to migrate all of my existing content (now 60 pieces) manually.

Cello Expressions Sheet Music Library, from January 2013 to December 2014.
Cello Expressions Sheet Music Library, from January 2013 to December 2014.

Goals

My primary goal for the sheet music library is to make free music, primarily for cello-oriented ensembles, widely available and accessible. I also want to get my works out there for people to play.

But my goals for making the sheet music library easy to use were much harder to accomplish with the old system. All pieces needed to have PDF downloads, preferably with the ability to have separate score and parts PDFs. I needed to display previews of the PDFs in a browser-agnostic way, rather than hoping that it would work to put a PDF in an iframe. Pieces needed to have a way to upload and display recordings, both via MP3s and via YouTube videos. Pieces needed to have fields for composers, difficulties, genres, and instrumentations, and values should cross-link between different pieces. And most importantly, I needed everything to be searchable, both internally and via search engines.

A Plugin

One of my first decisions was to build the sheet music library functionality in a plugin. That way I could use an existing WordPress theme and redesign much more easily. Over time, additional benefits became clear – others could use this plugin as well. The Boulder Cello Project will be using it, plus an add-on plugin, to power their internal members site, where they post sheet music for their meetups for members to practice in advance. The plugin will be released on WordPress.org once the initial implementation for the Cello Expressions Sheet Music Library is complete.

Custom Post Type & Taxonomies

It also became clear that I should create a sheet music custom post type, with custom taxonomies providing relationships between pieces. Composers, instrumentations, difficulties, and genres are each custom taxonomies for the sheet_music post type. PDFs for the score and parts and audio file uploads would be stored as attachments, with the attachment post ids stored as post meta in sheet_music posts. YouTube videos are stored by their URLs as post meta as well.

PDFs to Images

The solution to displaying PDF previews in a reusable way ended up being surprisingly simple. By converting the first page of the score PDF to an image, the front-end and admin can display an image preview of the PDF pretty easily. Converting PDFs to images is actually pretty simple in most modern server environments with WordPress’ image editor.

Diving briefly into code, WP_Image_Editor’s ImageMagick implementation makes it incredibly easy to convert PDFs to Images:

/**
 * When a PDF is uploaded, generate a thumbnail image and save it in the attachment meta.
 */
add_filter( 'wp_generate_attachment_metadata', 'prefix_generate_pdf_thumbnail_metadata', 10, 2 );
function prefix_generate_pdf_thumbnail_metadata( $metadata, $attachment_id ) {
	$attachment = get_post( $attachment_id );
	if ( 'application/pdf' === get_post_mime_type( $attachment ) ) {
		// Create a png from the pdf.
		$file = get_attached_file( $attachment_id );
		$pdf = wp_get_image_editor( $file );
		if ( ! is_wp_error( $pdf ) ) { // Most likely cause for error is that ImageMagick is not available.
			$filename = $pdf->generate_filename( 'image', null, 'png' );
			$uploaded = $pdf->save( $filename, 'image/png' );
			if ( ! is_wp_error( $uploaded ) ) {
				$upload_dir = wp_upload_dir();
				update_post_meta( $attachment_id, 'pdf_thumbnail_url', $upload_dir['url'] . '/' . $uploaded['file'] );
			}
		}
	}
	return $metadata;
}

Unfortunately, not all servers have ImageMagick installed. I don’t have it installed locally, and when I went to test on the celloexpressions.com server (hosted by GoDaddy for historical reasons), it wasn’t there. I contacted support and they said I had to upgrade to a newer account, which would involve manually migrating everything (or they could do it for a fee). I’d been wanting to get off of that server for a while anyway, so I took to opportunity to move everything onto one of my existing Bluehost accounts, cleaning up some old stuff that was living on celloexpressions.com in the process. Once I switched the domain over to the new server, everything worked exactly how I had wanted.

Realizing how straightforward it is to create images from PDFs in PHP, and how much room for improvement WordPress has with regards to PDF uploads (both in terms of administration and presentation), I’m going to propose some improvements there for core once I finish this project.

Media & Embeds

In addition to digging into the intricacies of WordPress’ handling of PDFs, I spent some time working on my JavaScript skills to implement previews of uploaded audio and linked videos in the admin. Since I knew I’d be using the plugin at large scale, it was important that the admin UI was as functional and efficient as possible. Audio and video previewing was implemented based on the media wpviews in the main editor. While the result is somewhat hacky and buggy, most of the integration relies on core functions rather than extensive custom logic, and I rarely encountered the bugs in my workflows.

On the front-end, wp_audio|video_shortcode( array( ‘src’ => $url ) ); gives browser-compatible HTML5 audio and video via MediaElement.js. That also gives us a skinned player for YouTube videos that matches the audio player, can be customized with CSS, and seems to reduce the volume of ads. WordPress 4.2 will also add support for skinned Vimeo embeds, and the sheet music library plugin won’t require any changes to support Vimeo and YouTube equally.

In a future update, I plan to explore the possibilities with creating a “collection” of PDFs with the media library, similarly to galleries, audio playlists, and video playlists. If I’m successful with that, it could be used to offer separate files for each part of a piece, instead of requiring all of the parts to be in one PDF (which I manually merge the separate parts into before upload). That could also concievably provide an automated merged PDF file that’s created in PHP, if ImageMagick supports something like that.

Templates

While a custom post type with several custom fields and taxonomies would normally work best with custom theme templates, I wanted the sheet music library to be as theme-compatible as possible. So I implemented default templates for single and archive views by filtering the_content. It works pretty well on a lot of themes, and could look just fine on pretty much any theme with a little custom CSS. For more advanced implementations, custom templates and adding theme support for ‘sheet_music_library’ will do the trick. I also created a shortcode that outputs the table view that I use on the homepage.

Search, taxonomies, archives, etc. all work well with the content filtering. The sheet music post type also supports featured images, so using the theme’s templates ensures that images are still used as intended. In my case, I only use images on a few pieces, and they really stand out in search, taxonomies, and post navigation.

Themes & Design

The plan all along was to go with a WordPress.org theme for the initial roll-out, then come back and do a custom theme specifically for use with the sheet music library plugin. But after exploring tons of potential theme options (while testing the theme compatibility of the plugin), I ended up going with Twenty Fifteen. And I’m liking it so much that I may not even do a child theme (I currently have some custom CSS, but that’s it). While I’m not happy with every component of the theme, the biggest things that made it my choice are its strong, scalable typography and its sticky sidebar functionality. CelloExpressions.com has a global header that’s displayed on all sites in the network, and by having no header and a minimal sidebar for the theme, I was able to keep things simple while still providing means for navigating throughout the site. In fact, I ended up with no menu for the music library, leaving navigation and discovery to search and a widget for each custom taxonomy.

My biggest problems with Twenty Fifteen were lack of color contrast, and excessive whitespace/inefficient use of space in places. For a while I had planned to use Twenty Fourteen, since it provides so much space for navigation and is very space-efficient. But upon further investigation, the only part of the sheet music library requiring more horizontal space is the table view on the homepage, so I just dropped some margins there. The contrast issues were a quick fix with Twenty Fifteen’s custom color options, combined with the dark “global” Cello Expressions header.

I also designed a new logo for myself and Cello Expressions as part of this process. I started out on paper, from doodles that had been done while trying to stay awake during class. As I learn more about graphic design, I’m pleased with my final result, and it works great in vector format. Currently, I’m using it in the header and as the site icon. I’ll use it elsewhere as opportunities arise.

Cello Expressions Logo

Migration & New Content

Once the new plugin was finally complete and I’d settled on using Twenty Fifteen at least initially, I was ready to migrate the 60+ pieces from the old site to the new site and add all of the music from the past two years that never made it into the old system.

Because the old implementation was so bad, and most of the old fields wouldn’t translate cleanly to the new taxonomies for composers, instruments, difficulties, and genres, I had to manually migrate all of the content. This also gave me the opportunity to remove some pieces that weren’t up to my current standards.

I started by moving the entire contents of my old server to the new Bluehost server, renaming the /music/ directory to /music-archive/. Then, once I moved the nameservers, I created a new site in the celloexpressions.com multisite network, at /music/. After putting some text in the homepage and setting up my plugins, I started migrating content.

In the end it took nearly two weeks and countless hours, but I now have 104 pieces in my new sheet music library. About half were migrated from the old library, and the other half are newly-published. At a rough estimate, two-thirds have an audio or video recording, or both. They all have scores, terms in four taxonomies, and publication dates back-dated to when they were created. While it required a colossal effort that’s still not quite complete, this project was very much worth it. And the best part is that all of the work, from the software powering it to the music it contains, is free for anyone to use, in the spirit of open source.

New Plugins: Chromeless Widgets Page and Basic Funding Tracker

I just published two plugins I developed for projects this semester on WordPress.org.

Chromeless Widgets Page plugin iconChromeless Widgets Page offers a quick way to build and iterate on a custom page that’s external to the web portion of a site. I developed it for the USC Annenberg Digital Lounge (where I’m the WordPress Specialist), where we used it to build an events page that’s displayed on large TV screens in our physical space.

Basic Funding Tracker plugin iconBasic Funding Tracker is a widget that displays progress toward a fundraising goal both visually and numerically. It was developed for USC ASCE‘s internal P2, where we’re using it to track sponsorship for our annual conference in April.

Both plugins were cases where the projects required minimal extra effort to write in a way that they could be used more widely. It’s well worth contributing basic plugins with minimal options and niche use-cases back to the community, even if it requires extra time to build the plugin.

Proposed WordPress Customizer Theme-Switching UX

This is a proposal for how theme-switching and theme-installation could be incorporated into WordPress’ Customizer. This will eventually be attempted in some form as a feature-plugin to later be merged into WordPress core. The goal is to soften the distinction between themes and theme options and to make theme switching a fast, streamlined experience built-in with other Customization options in a unified interface.

Themes is a panel, but with backwards-sliding, coming in from the left instead of the right. This implies a new layer of hierarchy above the top-level controls. Switching contexts to the theme-browser is just like switching contexts to a panel, but to exit the themes context, you select a theme. The currently active/currently previewed theme is selected and has an arrow back to the right, to slide back to the top-level controls. All of this sliding can also be triggered by swiping on touch devices.

When a different theme is selected from the theme browser, it instantly slides back to the main panel of top-level controls, but now reflects the controls available in the new theme. This is accomplished by rendering the controls specific to the new theme via ajax and the new customizer sections/panels JS API, and then deleting the controls that were specific to the old theme. This should be doable in a back-compatible way by working some trickery with the existing customizer APIs, caching stuff, and/or leveraging WP-API.

The preview would instantly need to switch to a loading indicator until the front-end re-rendered with the new theme, but that shouldn’t take too long and is unavoidable regardless of the implementation here.

In the theme browser, the add-new-theme functionality would be present via a + new theme tile matching the one in the current interface, and bring up a modal containing the 3.9 pieces of THX. From there, the theme-installer previewer (also containing the theme details) would need to either remain in the (almost-full-screen) modal or open in a new tab that closed on install/close-button-click (or, do a full-screen iframe on top of the customizer and modal with the theme-install-preview, although that might get a bit crazy).

We would need a solution for unsaved changes in previewed themes that are not activated, as theme-specific controls are hidden/removed when previewing another theme.

Prerequisites:

  • JS API for adding and deleting panels, sections, settings, and controls, to complement the existing controls API.
  • Distinction/ability to save changes without publishing and/or the ability to save without activating a new theme. Although, not distinguishing between saving and saving and activating would probably make more sense here.