WordPress 4.5: New Features, Tutorials & Videos

WordPress 4.5

Update: WordPress 4.5 “Coleman” was released today, April 12, 2016. Scroll down to see all of WordPress 4.5’s new features, a fun video, and detailed write-ups about all the changes.

Use these links to jump to specific WordPress 4.5 features to learn more:

WordPress 4.5 Features Video


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

Up until WordPress 4.5, editing links within your content was done in a modal window. You would highlight your text, then either click the chain link icon in the toolbar or use the keyboard shortcut Ctrl or Cmd + K, and you could search for existing content, or input an external URL.

WordPress 4.4 edit link modal
Editing links in WordPress 4.4 (click to play animation)

WordPress 4.5 introduces inline link editing. It’s a bit simpler, but it does change a few things that are important to be aware of.

You no longer have the “or link to existing content” section. Now, regardless of whether you’re linking to existing content on your site, or an external URL, you do so from within the same input box. Use keywords to search for existing content, or enter a URL starting with http://.

With the inline link editor, once you’ve entered your URL or clicked on your existing content, you can just hit the ENTER or RETURN key to return to editing your content. There is also a blue button with an arrow that will apply your link.

If you’d like to access more options—such as, open a link in a new window/tab, add rel="nofollow", etc.—you click the “link options” cog icon to the right of the blue button. This will open up a modal window that looks very similar to the one in WordPress 4.4.

WordPress 4.5 edit link animation
Editing links in WordPress 4.5 (click image for animation)

Personally, I think the new link editing experience is a good one. It’s a little simpler, but still provides enough instruction to make things obvious for the less-technical user. Ticket #33301

Here’s the WordPress 4.4 edit link modal:

WordPress 4.4 edit link modal

Here’s the WordPress 4.5 inline edit link experience:

WordPress 4.5 inline link editing

Here’s the WordPress 4.5 edit link modal (advanced options):

WordPress 4.5 edit link modal

Read our full article on how to add links in WordPress 4.5.

Inline Text Patterns Shortcuts

Inline text patterns are keyboard shortcuts to add formatting to your content. In WordPress 4.4, you could type 1. or 1) and WordPress would automatically start an ordered list (<ol>). Similar patterns exist for unordered lists (<ul>), blockquotes (<blockquote>), and heading tags (<h1><h2>, etc.).

WordPress 4.5 is adding a few more text patterns for inline code blocks (<code>) and a horizontal line (hr />). Ticket #33300

  • ` backticks will surround the text with the <code> element
  • --- 3 or more hyphens/dashes will be converted into an <hr /> element

The idea of adding text patterns for bold and italicized text was discussed, but ultimately rejected, and is not part of WordPress 4.5.

Here is a handy list of all WordPress text patterns & formatting shortcuts and examples of how to use them.

Login with Email Address

Logging into the WordPress Admin area used to be accomplished solely with a username and password (unless you used a plugin). A person’s username is a unique identifier which is often separate from the person’s email address. Many users have their usernames created for them, and they are not always the easiest to remember. Some usernames are publicly accessible in an author’s archive page URL, thus more vulnerable to attempt a brute-force attack.

WordPress 4.5 now allows you to login using your email address (or your username). Your email address is not accessible to a hacker, and you are less likely to forget it when attempting to login. This is a huge win for usability. Ticket #9568

WordPress Login Screen


Comments Updates in WordPress 4.5

Comment Moderation

For comment moderators, on the “Edit Comment” screen, a permalink used to exist for ALL comments (even pending, spam & trashed). Clicking it would take you to the top of the post because the comment doesn’t really exist on the page. Now the permalink only shows for approved comments. Ticket #36161

A few other changes were made to the comment moderation screen, shown below:

WordPress 4.5 Comment Moderation Screen

Max Lengths for Comment Fields

The WordPress database already has limits for the standard comment fields, but now they will be enforced when users are entering comments on your site. The following maxlength attributes are now being used on the comment form fields:

  • Comment: 65,525 characters
  • Name: 245 characters
  • Email: 100 characters
  • URL: 200 characters

For custom database schemas, you can override these lengths using the comment_form_default_fields filter.

Comment Error Screen

A simple back link has been added to the comment error screen to assist with user navigation.

WordPress 4.5 Comment Error Page

Other Changes to Comments

  • The rel=nofollow attribute and value pair will no longer be added to relative or same domain links within comment_content
  • WP_Comment_Query now supports the author_url parameter
  • The new pre_wp_update_comment_count_now filter allows you to bail out of updating the comment count for a given post

For a recap of comment changes in WordPress 4.5, read the original post.


WordPress Customizer

Several notable improvements were made to the WordPress Customizer, along with quite a few bug fixes. I’m pretty excited about these updates shipping with WordPress 4.5. Let’s take a look.

Some themes have been providing support for custom header & background images, but WordPress has never provided a default way to add a custom logo. With WordPress 4.5, themes can now declare support for custom logos, much like they have been doing with header & background images.

Video Tutorial: How to Add a Site Logo in WordPress

WordPress Custom Logo Support
Example of how the custom logo features works in the Customizer

To register support, themes should include the following code in their functions.php file (replace “theme_prefix” with your actual theme’s prefix):

function theme_prefix_setup() {
	add_theme_support( 'custom-logo' );
}
add_action( 'after_setup_theme', 'theme_prefix_setup' );

The Jetpack plugin used to provide this functionality, but after WordPress 4.5 ships, Jetpack will automatically fallback to using custom logo support in WordPress Core. As long as you are using version 3.9.3 or higher, Jetpack will seamlessly integrate your the custom logo functionality.

The Twenty Fifteen & Twenty Sixteen themes have been updated to include support for custom logos.

Also, a <body> class of .wp-custom-logo has been added when this feature is used, making it easier for theme developers to add styles.

Selective Refresh

This might sound like a fancy term, but essentially it means that when editing your site in the customizer, your live preview will be much faster. Changing your site title, description, colors, widgets, menus, etc. will all happen much faster now. Only the specific part of the site that you’re editing will update, instead of the entire page getting refreshed with every single update. Learn more/developer notes »

You can also now SHIFT + click elements in the preview pane to open up their options in the customizer’s sidebar.

Customizer Device Preview

WordPress Device Preview in 4.5
The device preview toolbar in Customizer

WordPress 4.5 introduces device preview with the click of a button. In the bottom-left corner of the Customizer, you’ll now find 3 icons: desktop, laptop, and mobile. Easily switch between devices to see a preview of your site on small & large screens.

The following sizes are used:

  • Desktop: occupies 100% of preview screen
  • Tablet: 6in x 9in
  • Mobile: 320px x 480px

Don’t forget you can use the “Collapse” link next to the device icons to collapse the side panel.

WordPress Customizer Device Preview
Device preview in action (click image for animation)

For a complete list of Customizer changes in 4.5, read the original post.

Embed Changes in 4.5

Support for Twitter Moments & Timelines

oEmbeds got a makeover in WordPress 4.4, adding support for WordPress sites themselves to be embedded throughout the web. WordPress 4.5 is bringing us the ability to embed Twitter Moments & Timelines onto our posts & pages. You can see an example below:

RELATED: A How-To Guide to WordPress oEmbeds

WordPress 4.5 Twitter Moments Embed
click image for animation

Dailymotion (dai.ly) Embeds over https

You can now securely embed Dailymotion videos over https. Ticket #36189


Now we’ll take a look at new features in WordPress 4.5 that developers will love.

Script Loader in WordPress 4.5

Individual Stylesheets for /wp-admin/

Instead of using the 235kb wp-admin.min.css file, the admin will now use the load-styles.php file to serve up 4 dashboard.css files, weighing in at 72kb. Plugin developers who register admin styles should read this post.

HTTP ETag Header

Both load-scripts.php and load-styles.php now send an ETag header which includes the WordPress version. This improves performance since browsers won’t re-download styles & scripts that they don’t need to.

Inline Scripts

You can now add inline scripts in much the same way as you add inline styles (wp_add_inline_style()). Use the new wp_add_inline_script() function to add inline Javascript.

“Alias” Handles & Dependencies

There are a few other changes for handling scripts. Check out the full post on wordpress.org.

Embed Changes in 4.5 For Developers

Embed Template

A few small changes were made to the embed template. Everything from minor bug fixes to accessibility enhancements to a completely new way to load the template.

Smaller Changes

  • The <iframe>‘s title attribute was updating for better accessibility
  • The <iframe> is hidden with a different technique, to work around a Firefox bug
  • Better discovery of embeddable content when pasting URLs into the editor
  • You can now embed the front page of a WordPress site when it’s set to a static page

Template Changes

/wp-includes/embed-template.php has been deprecated, and there are now 5 template parts that load the embed template. These are located in /wp-includes/theme-compat/ and can be easily overridden by themes.

  • embed.php
  • embed-404.php
  • embed-content.php
  • header-embed.php
  • footer-embed.php
WordPress Embed Template
Image borrowed from wordpress.org

Template Hierarchy

Theme authors can also customize embeds for different types of content using the same, familiar template hierarchy that they’re already used to:

  1. embed-{post-type}-{post_format}.php
  2. embed-{post-type}.php
  3. embed.php
  4. wp-includes/theme-compat/embed.php

The Theme Handbook has a new template hierarchy reference for embeds.

For a complete list of embed changes, read the wordpress.org post.

jQuery Updates

jQuery was updated from version 1.11.3 to 1.12.2. Also, jQuery Migrate was updated from 1.2.1 to 1.4.0. Please test your themes & plugins that use these libraries. Learn more »

The Backbone & Underscore libraries were also updated. These were major updates, and some breaking changes were reported. If you use these libraries in themes or plugins, please test thoroughly.

Customizer Changes for Developers

In addition to the general user improvements to the WordPress Customizer, there are a few things that developers should be aware of.

Setting-less Controls

All theme developers who use the Customizer for theme options should take note of the changes in ticket #35926. You can also get a recap of the developer-focused Customizer changes here.

Selective Refresh for Widgets

If you’d like to utilize the new selective refresh feature for your sidebars/widgets, you need to enable theme support:

add_theme_support( 'customize-selective-refresh-widgets' );

There’s also a few things to check out if you’re displaying widgets in a unique way (i.e. using Masonry, or some other layout technique).

Term Edit Page

The URL structure has changed for terms to fix some inconsistencies with other admin pages. The /wp-admin/edit-tags.php page used to serve as the list table AND the term edit page. A new /wp-admin/term.php now exists for editing single terms. There are a few other notes that you’ll want to read through here.

Multisite in WordPress 4.5

Most of the Multisite changes in 4.5 are developer-focused. There weren’t many huge updates, but steady improvements were made to continue evolving Multisite as a leading platform for hosting a network of sites.

  • Introduced a new global object, WP_Site, which replaces $current_blog. Ticket #32450
  • Several new hooks & filters were introduced:
    • network_user_new_form fires at the end of the network’s Add New User form. #15389
    • network_site_new_form fires at the end of the network’s Add New Site form. #34739
    • network_allowed_themes and site_allowed_themes allow for more granular filtering of the themes allowed for a site. The legacy allowed_themes will continue to do its job. #28436
    • pre_network_site_pre_created_user fires right before a new user is created during the Add New Site process if one does not already exist. #33631
  • Better redirection for subdomain installs when a user tries logging into a network to which they don’t have permission
  • An “Edit User” link was added to the screen after you add a new user to a site

A few other small changes were made. For a complete list of Multisite updates in WordPress 4.5, read this post.

WP-CLI

In order for WP-CLI to work with WordPress 4.5, you must upgrade to WP-CLI version 0.23.0. More details can be found in the official release post on the WP-CLI blog.


Other WordPress 4.5 Features

  • 3 new Dashicons added (move, paperclip, laptop), and the Google+ icon was updated. Ticket #34221
  • WordPress image quality changed from 90 to 82. This applies to WordPress-created image sizes, not the original upload. It improves page load speed without negatively impacting perceived quality. Developers can override with wp_editor_set_quality filter. Ticket #33642
  • A few other image performance improvements

For anything else I might have missed, WordPress has put together a 4.5 Field Guide, to go along with their official video.

What WordPress 4.5 “Coleman” 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.