{"id":25299,"date":"2015-12-08T21:01:57","date_gmt":"2015-12-08T13:01:57","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=25299"},"modified":"2022-10-18T20:12:34","modified_gmt":"2022-10-18T12:12:34","slug":"wordpress-44","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/wordpress-44\/","title":{"rendered":"WordPress 4.4: 10 Coolest New Features You Should Know"},"content":{"rendered":"

WordPress 4.4 has just been released today and we played around with this latest new offering to see what new shiny features we could find. This new version is shipped with quite a few improvements that are set to make WordPress developers go crazy. It may even eventually shape the future of WordPress in the JavaScript-centric era<\/a>.<\/p>\n

In this post we will be looking at 10 new WordPress 4.4 features you should be checking out.<\/p>\n

1. Embed Posts Anywhere<\/h2>\n

For years, you can embed content on your website, like a YouTube video or a tweet via the use of a feature called oEmbed<\/a>. Well, the good news is WordPress has adopted this feature in 4.4 and you can now easily embed content anywhere on your site just by grabbing the URL of a post and pasting it into the content editor. A preview of the post that you embed will appear on your page, something like this:<\/p>\n

\"embed<\/figure>\n

If for some reason, you feel that you don\u2019t want to use this feature, then you can disable it by installing the disable embeds plugin<\/a>.<\/p>\n

2. Work With Responsive images<\/h2>\n

As devices and their screens grow larger, designers must work with larger images as well. The bad news is that this contributes to slower page loading times. So it\u2019s probably good timing that WordPress now supports responsive images on your theme.<\/p>\n

\"responsive
Test image using Responsive Web Design Testing Tool<\/a><\/figcaption><\/figure>\n

In this update WordPress has added two more atributes to your images on top of class attributes for alignment (left, center or right): srcset<\/code> and sizes<\/code>. These attributes allow the images on post thumbnails, photo galleries and other images to be delivered in the proper size based on the viewport.<\/p>\n

Thus, on every image you will see the output source code like so:<\/p>\n

\r\n<img class=\"alignnone size-full wp-image-15 below-entry-meta\" src=\"http:\/\/yoursite.com\/wp-content\/uploads\/2015\/11\/horse.png\" alt=\"horse\" srcset=\"http:\/\/yoursite.com\/wp-content\/uploads\/2015\/11\/horse-300x217.png 300w, http:\/\/yoursite.com\/wp-content\/uploads\/2015\/11\/horse-768x556.png 768w, http:\/\/yoursite.com\/wp-content\/uploads\/2015\/11\/horse.png 868w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840\" height=\"628\" width=\"868\">\r\n<\/pre>\n
3. New Theme: Twenty Sixteen<\/h2>\n
Twenty Sixteen is a brand new default theme for WordPress 4.4. It is designed to take on the traditional blogging format.<\/p>\n
\"tweenty<\/figure>\n
Twenty Sixteen works perfecty for blogs or websites, featuring optional sidebars, custom color options with beautiful default color schemes, harmonious fluid grid, overflow displaying large images, ability to add intro to post using custom excerpt, and other polished features.<\/p>\n
4. Introduction to the REST API<\/h2>\n
WordPress 4.4 brings the REST API infrastructure into the Core. This API handles the routing, argument handling, JSON serialisation, status codes, as well as functions to create custom REST API endpoints. This is fantastic news for developers. With this infrastrucure developers are finally able to build their own APIs for their themes, plugins, even mobile or desktop apps<\/strong>.<\/p>\n
Head over to this page, Adding Custom Endpoints<\/a>, to learn how to register a custom API endpoint.<\/p>\n
5. Custom Term Taxonomy Meta<\/h2>\n
In previous versions of WordPress we can add custom field to the post and pages<\/a> through the term meta. Now WordPress has added this feature to taxonomy objects.<\/p>\n
For example on the Category taxonomy we might want to add a custom field, namely category image<\/code> to feature the post\u2019s featured image on each category. In this version we can do this by making use of the following functions: add_term_meta()<\/code>, update_term_meta()<\/code>, delete_term_meta()<\/code>, and get_term_meta()<\/code>.<\/p>\n
Read more: <\/strong>Understanding WordPress Custom Meta Box<\/a><\/p>\n
6. Single Post Template File<\/h2>\n
In this version, WordPress included a new template file on theme hierarchy to be used as a single post or custom post type. This feature is useful when you are targeting a specific post, to give \u2018special\u2019 styles to that page so it will look different from other pages. You will have a template file with a name like below:<\/p>\n
single-{post_type}-{post_name}.php<\/pre>\n
For example, here I have a custom post type named book<\/code> that I want to spruce up for a \u201cbestseller book\u201d post. So I creat single-book-bestseller.php<\/code> then tweak the style to be applied to this page only. Lastly, I change the post slug to yoursite.com\/book\/bestseller<\/code> to apply the special page.<\/p>\n
\"single
LEFT: Standard book post, RIGHT: Best seller book post<\/figcaption><\/figure>\n
7. Improved Comments<\/h2>\n
WordPress has made rearrangements on the comment form, where the comment field is displayed first, then the name and email fields below. This improvement was the answer to the issue that the comment behaviour is different<\/a> for logged in and logged out user.<\/p>\n
On the backend, the comment now is represented by the WP_Comment<\/code> object. This enables you to output comments in a more object-oriented (OOP) way with more powerful comment queries.<\/p>\n
\"wordpress<\/figure>\n
8. Heading Hierarchy<\/h2>\n
WordPress is improving heading hierarchy on the dashboard screen with the aim to assist users with assistive technologies<\/a> such as screen readers. This is important because the assistive technologies use these headings to find information and the keyboard to navigate to relevant content.<\/p>\n
Suppose they  use the 1<\/span> key  to jump to the first h1<\/code> then press 2<\/span> to jump to h2<\/code>. With the correct heading hierarchy there will be no heading levels missed.<\/p>\n
With this revamp, a page such as wp-admin\/edit.php<\/code> will now have Posts as h1<\/code> , and \u201cFilter posts list\u201d and \u201cPosts list\u201d as h2<\/code>, which are visually hidden with the .screen-reader-text<\/code> CSS class.<\/p>\n
\"heading<\/figure>\n
When the screen reader is activated, then the hidden h2<\/code> will be read.<\/p>\n