Features for Theme Developers (WordPress 3.9)

WordPress 3.9 will be released this month with some great new features. I think the enhancements for media (drop-in image uploading, audio/video playlists, and better editing options) will get a lot of attention in this release- but there’s also a ton of hidden gems.

I went through 582 tickets and picked some of my favorite enhancements, focusing on the ones I think will be most interesting for theme developers.

Media Features

WordPress now has support for audio and video playlists (and audio/video thumbnail images) thanks to work spearheaded by Scott Taylor:

playlists

Audio, video, and gallery previews are available in the editor and themes can add styling to better display them.

fourteen-gallery-3-editor-selected

You can now drop images directly into the post visual editor. This ticket has been brewing for over two years. Konstantin Kovshenin and Andrew Ozz put lot of time into working out all the browser bugs and bringing this great feature life.

drag-drop

Editing images has also become easier thanks to a new UI in the media modal. You can even crop images from the theme customizer.

Thumbnail Images

Thumbnail images received a number of surprising improvements in this release. The biggest is the ability to choose the crop position for the images. Featured image sizes are generally registered like this:

add_image_size( 'screenshot', 300, 300 );

You now have the option of passing crop parameters as an array:

add_image_size( 'screenshot', 300, 300, array( 'left', 'top' ) );

Other crop anchors are (top, left, right, bottom, center).

Theme and plugin developers can now remove_image_size() and check has_image_size().

Post classes also now display a “has-post-thumbnail” class if a featured image is set, which is something I’ve needed several times. It’s great that it’s now part of core.

HTML5 Support for Galleries and Captions

The gallery shortcode has traditionally produced definition list markup and a mess of inline styles. With WordPress 3.9, you can now get rid of that by declaring support for HTML5 galleries.

add_theme_support( 'html5', array( 'gallery' );

ThemeShaper has a great write up on the new feature. You can also look at the ticket.

Similarly, there is also now support for HTML5 captions. This removes the 10px padding on captions that has “vexxed theme developers for years”, and frees us from the encumbering weight of those additional pixels. Andrew Nacin’s comment here is rather poetic and worth reading.

Theme Install Screen

A new theme installer UI is being developed by Matías Ventura that makes filtering and discovering new themes an awesome experience.

theme-ui

Theme previews, infinite scroll, and filtering seem lightning quick in this new interface (powered by backbone). I believe end users will especially appreciate this update.

Widget Customizer

Customization options in WordPress have been been moving to the front-end, and this release is no exception. The Widget Customizer started as a core plugin conceived and developed by Weston Ruter, but dozens of other contributors tested and polished the feature as it moved into core.

widget-customizer

Filtering Page Templates

Page template filters is something I needed for one of my themes a couple months ago- so it was exciting to see it get traction in this release.

If you need a child theme to remove page templates set by the parent theme or want to show page templates only if certain conditions are met, that is now possible. Here’s an example of how I’m using it in Portfolio Press:

/**
 * Filter Page Templates if Portfolio Post Type Plugin
 * is not active.
 *
 * @param array $templates Array of templates.
 * @return array $templates Modified Array of templates.
 */

function portfoliopress_page_templates_mod( $templates ) {
	if ( !class_exists( 'Portfolio_Post_Type' ) ) {
		unset( $templates['templates/portfolio.php'] );
		unset( $templates['templates/full-width-portfolio.php'] );
	}
	return $templates;
}
add_filter( 'theme_page_templates', 'portfoliopress_page_templates_mod' );

Script Updates

Do you use the HTML5 Shiv in any of your themes? (Come on, we all do.) You may want to follow the lead of core and update it.

Same with the popular masonry.js script. Konstantin Kovshenin wrote a good post about this update and theme compatibility issues.

Grab Bag

These are some other minor features and enhancements I thought were worth highlighting:

  • Widget areas are now ordered the in the order that they were registered (27401).
  • Large performance improvements for shortcodes (23855).
  • Allow rewrite endpoints to specify a query variable name (20905).
  • Filter for set_theme_mod() (14721).
  • get_the_date() accepts optional $post argument (13771).
  • New “exclude” parameter to “wp_list_authors()” (9902).
  • Pasting from Word no longer so horrible (27160)

Final Thoughts

There’s more going on in WordPress 3.9 than you thought, right? I even skipped over a few hundred other improvements.

WordPress 3.9 will be a really solid release with all the UI enhancements and minor feature adds. If you want to start testing now, download the latest from the GitHub mirror or SVN. The target release date is currently April 16th– though that can always change if new bugs come up in testing.

About Devin

I am a developer based in Austin, Texas. I run a little theme shop called DevPress and help manage a WooCommerce shop with Universal Yums. Find me on twitter @devinsays.

8 Responses

  1. Really awesome round-up, Devin! As an aside, though, I don’t actually think it’s necessary for theme developers to use `add_theme_support( ‘widget-customizer’ )` to utilize the widget customizer. I believe that was only for the plugin.

  2. Harish

    Thanks for sharing this Devin. It’s hard to stay in touch with so many things going on. WordPress really is progressing faster than it ever had.

  3. A few nice media enhancements are on their way then, I remember seeing the audio player mentioned at the end of last year in a WP article. The widget customiser looks interesting and will be good to have a play with.

  4. Thanks for the roundup. Looks like we need to do something for HTML5 galleries and masonry. I need to find some tutorials about masonry, it’s rarely written about :)

  5. Was super pumped to hear about the addition of declaring crop alignment positioning for add_image_size but my early tests are really hit and miss…

    In most instances it doesn’t do a hard crop and still tries to maintain a proportionate resize without a true hard crop.

    I’ve been a timthumb guy for too long and some of my early tests with all of the various combinations are not as one would expect… perhaps I’m over expecting its true capabilities?

    for ex. I did a test on a (center, top) alignment I set my width dimensions to half of what the actual images width size was and set the height to 100… I was expecting the width to hard crop in the middle leaving 25% of the image unseen on the left/right and at the top of 100px down it would crop… instead if just resized the width of the original image to value I set showing the entire width of the image and trimming height wise properly… this to me feels misleading… I had many other issues with the bottom alignments as well.

    would love to see a full demo example to either confirm or debunk my findings, cheers.

Leave a Reply to Devin Cancel reply