WordPress 4.4 “Clifford”: New Features + Video Montage

WordPress 4.4 Release - New Features

Update: WordPress 4.4 “Clifford” is now available, named in honor of jazz trumpeter Clifford Brown. Watch the official release video, or scroll down for more videos & detailed write-ups about all the new features.

WordPress 4.4 is due out December 8th, just a few short weeks after WordPress unveiled it’s Calypso project. With Calypso, WordPress is making a huge move to more of a javascript-based application framework. And with the WordPress REST API being added to Core in 4.4, many developers are excited for what the future has in store.

In addition to the REST API making it’s debut in core, WordPress 4.4 includes a solid list of improvements. With over 2,000 commits since 4.3, here are a few things you can expect when you upgrade your WordPress site to 4.4.

WordPress 4.4 Video Montage


Let’s start with the front-end changes that will impact everyday users, bloggers and content producers.

oEmbeds

oEmbeds have been a part of WordPress since 2.9, with new services being added every few major release cycles. There are upwards of 20 services in which WordPress supports automatic embedding of content.

WordPress 4.4 oEmbed Support
Example of an embedded WordPress post

What’s new in WordPress 4.4, however, is the ability for WordPress content itself to be embedded. Essentially, WordPress is being added to the list of 20+ services already supported. Any platform or site that supports the standard oEmbed format can now embed WordPress content by simply copying and pasting the URL of a WordPress post, page or custom post type.

RELATED: A How-To Guide to WordPress oEmbeds

Disable oEmbeds

If you don’t want other sites to embed your content, there’s a plugin that will disable embeds.

You can also selectively add links into the content editor without having them turn into embeds. Watch this 1-minute video tutorial »

Responsive Images

The idea of responsive images has been around for a year or two, and it’s taken browsers a while to support the new syntax. With most major browsers supporting it, and the importance of keeping sites fast & lightweight, WordPress 4.4 will now implement responsive images using the srcset and sizes attributes of the <img> element.

Before responsive images, the code for inserting an image on your WordPress site looked something like this:

<img class="wp-image-1234 size-full" src="http://yoursite.com/wp-content/uploads/your-image.png" alt="Some Alt Text" width="1600" height="1000" />

This would load the full-size image, regardless of what device or screen size was being used. As a site owner, you could optionally choose to insert a large, medium or thumbnail-sized image instead, but you had to show that image to everyone, on every device, regardless of how big or small the device was.

Now, WordPress 4.4 does all the work for you. You insert your full-size image into the post editor, WordPress evaluates the screen size of the user’s device, and automatically chooses the best image size for that device (best = lowest file size, while retaining quality).

Your code will now look like this:

<img class="wp-image-1234 size-full" src="http://yoursite.com/wp-content/uploads/your-image.png" alt="Some Alt Text" width="1600" height="1000" srcset="http://yoursite.com/wp-content/uploads/your-image-300x225.png 300w, http://yoursite.com/wp-content/uploads/your-image-768x576.png 768w, http://yoursite.com/wp-content/uploads/your-image-1024x768.png 1024w, http://yoursite.com/wp-content/uploads/your-image.png 1600w" sizes="(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px">

If a user is viewing your site on a small device with a screen that is 400px wide, WordPress will tell the browser to load the 300×225 image. This cuts down on the amount of data that the browser needs to download, which means the image (and the entire page) will load faster.

Keep inserting images exactly how you’ve always been. Nothing changes on your end. Just sit back and enjoy faster load times :-)

Twenty Sixteen Theme

WordPress 4.4 comes with a new default theme, Twenty Sixteen. The theme was designed by Takashi Irie, the same guy who designed the two previous default WordPress themes, Twenty Fifteen & Twenty Fourteen. Twenty Sixteen is best suited for personal blogging. As with most default themes, it’s design is simple. Twenty Sixteen features:

  • 2 menu locations – primary (top of page) & social media links (in footer)
  • 1 widgetized area, in the sidebar
  • Custom header & background images, via the customizer
  • 5 color schemes, with an option to choose custom colors for page background, text & links
Twenty Sixteen WordPress Theme
Example of Twenty Sixteen theme

It’s certainly nothing fancy, but that’s never the point with default WordPress themes. If you’re looking for a new theme to get your personal blog up-and-running, you might want to consider this one.

Clickable Permalinks

This is a small change, but many users will definitely notice this one. When editing a post, page or custom post type, the permalink is visible at the top of the editing screen (just below the title). In WordPress 4.3, you would also see a “View Post” button, and in some cases (with Jetpack installed) a “Get Shortlink” button.

Both of these buttons have been removed, and the permalinks look a little different. Instead of the “View Post” button, now the entire permalink itself is clickable. The only button you’ll see in WordPress 4.4 is an “Edit” button, which allows you to edit the permalink.

VIDEO: WordPress 4.4 Permalinks Change

WordPress 4.4 - Clickable Permalinks
4.3 vs 4.4 comparison

Comment Fields Re-ordered

In all previous versions of WordPress, the comment form fields were listed in this order:

  1. Name
  2. Email
  3. Website
  4. Comment

In WordPress 4.4, the comment field has been moved to the top.

  1. Comment
  2. Name
  3. Email
  4. Website
WordPress 4.4 comment form order
The comment field is now displayed first

Most users & theme developers seem to be in favor of the change. The ticket that prompted this change goes on to explain why it was made.

Clicking reply should take the user to the field they can leave their reply, however for non-logged in users, this means they can miss the other fields, especially if they are vision-impaired users, and/or using a screen reader.

For Theme & Plugin Developers

This change means that some filters & actions will be run in a different order, and the HTML output of comment_form will be different. If you use any hooks inside comment_form, especially comment_form_field_comment and comment_form_after_fields, you should test your themes & plugins.


Now we’ll take a look at some of the more developer-heavy features in WordPress 4.4.

WordPress REST API

The long-awaited REST API is finally here… well, at least the first half. We’ve had a plugin for many months now, that has allowed WordPress developers to utilize the REST API (and build some pretty cool things). But now the foundation for the REST API has been added to Core.

WordPress.com Mac App Login Screen
WordPress.com Mac app login screen

This opens up a world of possibility for developers who want to tap into the increasing number of WordPress sites on the web. The API makes it easy to create, retrieve, update & delete data from a WordPress site, using almost any platform. With your WordPress data in JSON format, you could build mobile apps with WordPress, create a custom WordPress admin area, completely abandon the typical WordPress “theme,” and pull WordPress data into any application you can dream up.

I won’t cover the REST API in full detail, as it would take several articles to cover it in its entirety, but WPMU DEV has a nice, introductory write-up about it, and why it’s the most exciting new feature in WordPress 4.4.

If you’d like to learn more about the WordPress API, or start using it for a project, consider these resources:

Term Metadata

This one has been in the works for 6 years (not a typo). It moves WordPress even further into the realm of a complete CMS, and not just a blogging platform (are we even having this debate anymore?). Justin Tadlock wrote an awesome introduction to term meta that you should definitely read. A brief quote from his write-up, to help explain what WordPress term meta is.

Terms are individual objects within a taxonomy. For example, the category taxonomy can have many categories (i.e., terms).

Meta (short for “metadata”) is simply additional data that can be tied to an object. This data can pretty much be anything.

Term meta, therefore, is additional data about specific taxonomy terms.

In Justin’s post, he outlines a handful of real-world scenarios where term meta might come in handy, and provides a tutorial on how to get started working with it. Seriously, go read it.

WordPress 4.4 Term Meta example
Example from Justin’s blog. Adding a “color” to Categories.

wp_title() NOT Deprecated

For almost a year now, theme developers have been instructed not to include wp_title() in their themes. This is still the case, but the wp_title() function has NOT been deprecated just yet. The following is still required for all themes submitted to the WordPress.org directory.

add_theme_support( 'title-tag' );

You can learn more about this code being required.

WP_Comment Class

WordPress 4.4 adds a new WP_Comment class, allowing for more powerful queries to be run on comments. This lays a solid foundation for further expansion into the flexibility of the WordPress comment system. For more details, check out the post on Make WordPress Core.

WP_Network Class (for multisite)

Four new functions have been added in WordPress 4.4, associated with the new WP_Network class.

  • add_network_option()
  • update_network_option()
  • get_network_option()
  • delete_network_option()

A handful of other actions & filters have been added, in addition to a few other nice multisite enhancements.

  • The plugin administration screen has been improved for network admins
  • Language selection is now available for new sites on a multisite network
  • Network user searching has looser matching, providing better search results

For a full list of multisite changes, check out the article on Make WordPress Core.

Changes to Admin Heading Tags

This change is intended to help those users with screen readers better understand the structure of the admin screens. <h1> tags are being restored for the main page title, and all subsequent headers should follow in order. Please do not skip levels with your heading tags. Highlights of the changes:

  • A couple new post type & taxonomy labels have been added
  • Screen options removed the <h5> heading and now use the fieldset & legend elements
  • Changes to list table headings
  • Dashboard widgets & meta boxes headings changed from an <h3> to an <h2>

For a full list of updates, and how to fix theme/plugin settings screens, read the post on the core blog.

Other Random Features

For anything else I might have missed, WordPress has put together a 4.4 Field Guide.

What feature(s) are you most excited about?

What Are Your Thoughts?

All fields are required. Your email will not be published.

You can use standard <code> and <pre> tags to post code examples, or a service like codepen.io.