Software Development

WordPress 3.9 enhancements that developers and designers need to know

WordPress 3.9 makes editing and publishing in the platform even easier. Read about enhancements in media editing, the theme browser, header and gallery previews, inline code documentation, and more.

wordpressupdatefiga051214.gif

The recent 3.9 update of WordPress (WP) adds many refinements and enhancements to the CMS, including making the gap from editing to publishing seamless. The major front-end improvements provide a smoother media editing end user experience, visual editing with accessibility and mobile support, gallery previews, live widget and header previews, and a new theme browser. Some under the hood back-end enhancements include semantic captions and galleries, inline code documentation, external libraries, improved database layer, and new utility functions.

Media editing enhancements

The streamlined Add Media button from the posts/page editor screen (Figure A) allows you to quickly add media assets with minimal click-through.

Figure A

wordpressupdatefigb051214.gif

In the Insert Media panel (Figure B), you have the option of selecting images, audio, video, or other assets from your media library, or you can drag-and-drop or Upload Files with a maximum file limit of 25MB. (For larger video files, it is still best to host those from third-party locations such as Vimeo and YouTube.) Other options include inserting one or multiple media assets, creating a gallery, and setting a featured image for a page banner or a banner rotation.

Figure B

wordpressupdatefigc051214.gif

Clicking an image will display the associated attachment details, which gives you instant editing options including any metadata and title, description, alt text, caption, display settings options for alignment, link to, and size options (Figure C).

Figure C

wordpressupdatefigd051214.gif

Once the image is added to the post, you can easily go back and edit it by double-clicking it and then selecting the "edit" pencil icon at the top left of the image (Figure D).

Figure D

wordpressupdatefige051214.gif

The Image Details panel (Figure E) allows you to edit the caption, alt text, display settings for alignment, size, and link. Advanced settings include CSS class, any link relevance, and link CSS class.

Figure E

wordpressupdatefigf051214.gif

Image gallery previews are now a part of the WP media dashboard experience. You just select your images and click Create Gallery (Figure F).

Figure F

wordpressupdatefigg051214.gif

Then you can edit the gallery (Figure G), sorting how images appear by dragging-and-dropping to reorder the images. Settings include the link to an attachment page, a media file, or none, as well as the number of columns. You can also check them into a random order, and select from a thumbnail grid or slideshow. When you're happy with your settings, click the Insert Gallery button.

Figure G

wordpressupdatefigh051214.gif

The galleries will display in a grid of images inside the editor panel (Figure H), just like they will in your published post.

Figure H

wordpressupdatefigi051214.gif

Figure I is the preview of a sample blog post.

Figure I

wordpressupdatefigj051214.gif

Widget and header live previews

Widget and header previews allow you to add, edit, and rearrange your widgets inside the theme customizer panel, where you can preview your changes in real-time and save them only when you are ready (Figure J).

Figure J

wordpressupdatefigk051214.gif

Theme browser improvements

All installed themes in your WP implementation are displayed in the theme browser as they have been for several versions. The theme browser has been updated with a new look and feel and a new set of feature filter settings. You can also search for other themes available from the Add New and search text box (Figure K).

Figure K

wordpressupdatefigl051214.gif

Back-end and under the hood improvements

  • Semantic captions and galleries: Theme developers have new options for images and galleries that use intelligent HTML5 markup.
  • Inline code documentation: Every action and filter hook in WordPress is now documented, along with expanded documentation for the media manager and customizer APIs.
  • External libraries: Updated libraries: TinyMCE 4, jQuery 1.11, Backbone 1.1, Underscore 1.6, Plupload 2, MediaElement 2.14, Masonry 3.
  • Improved database layer: Database connections are now more fault-resistant and have improved compatibility with PHP 5.5 and MySQL 5.6.
  • New utility functions: Identify a hook in progress withdoing_action() and doing_filter(), and manipulate custom image sizes withhas_image_size() andremove_image_size(). Plugins and themes registering custom image sizes can now register suggested cropping points. For example, prevent heads from being cropped out of photos with a top-center crop.

Since the 3.9 update, another smaller maintenance release to WordPress version 3.9.1 was added on May 8, 2014 in response to several bug fixes in particular for multisite networks, to the customizing widgets while previewing themes, and to the updated visual editor.

What's your favorite enhancement in WP 3.9? Let us know in the discussion.

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

0 comments