Way to WordPress 4.9: A New Themes Experience in the Customizer

Way to WordPress 4.9: A New Themes Experience in the Customizer

The official release of WordPress 4.9 has been targeted for November 14, 2017. And with that date coming near, the core development team is really working hard to provide everyone with lots of amazing new features and improvements. Just a few hours ago, Nick Halsey announced in a post that there would be a new themes experience in the customizer in WordPress 4.9.

WordPress 4.9 has introduced a new themes experience in the customizer with which you can discover, install and preview themes in the customizer in a new way. This project has prioritized the user flow, extensibility, and performance improvements. The new flow integrates the theme management into the customization experience by bringing a new theme browsing framework into the customization interface. You will be able to install and get a live demo of a theme in one single click.

Customize themes in a single click. Image Credit: Make WordPress

The new themes experience in the customizer has been designed for extensibility. The third-party theme directors can integrate it with the core experience via plugins. The new browser has been built on the core customize API, and that is why extending it is very much similar to extending any other part of the customization experience. As with every aspect of the customizer, this project approaches extensibility modularly and in terms of both user and developer experience.

The customizer has loaded information about every installed theme every time the customizer loaded since the release of WordPress 4.2. However, in WordPress 4.9, the theme data will only be loaded when you visit the theme panel. This will be effective and result in the performance improvement on every customizer load for those with a large number of installed themes, particularly on multisite networks.

Theme Browsing Improvements

WordPress 4.9 introduces the customizable sidebar that serves as the global index of theme sources (installed, WordPress.org, upload, and any additional sources added by plugins). In the customize preview area, you will notice a filter bar that controls navigation within each of those sections.

There are an instant search filter and a count of the results for the installed themes area. WordPress.org themes also feature a search bar, in addition to the feature filter found in wp-admin and on WordPress.org. Rather than mimicking the existing WordPress.org and wp-admin theme browsers, the customizer in WordPress 4.9 features a simplified filter-oriented approach. The popular, favorites, and (randomized) featured sections are excluded in favor of a single, filter-driven section that defaults to showing the latest themes. The customization team is looking forward to work with the theme review and Meta team to evaluate the process of finding a theme. The main goal is to introduce an improved and unified theme browsing experience to WordPress.org, wp-admin, and the customizer, complete with new tags and other taxonomies. For now, the WordPress.org theme browser within the customizer is a starting point for a user-driven theme discovery experience.

Customize Themes API

Customize Object Structure

The context for the themes experience is contained with a custom customize panel object, WP_Customize_Themes_Panel in PHP and wp.customize.ThemesPanel in JS. The customize panel is responsible for the overall theme browser UI layout, installing themes (via wp.updates), loading theme previews, updating installed themes from WordPress.org (via wp.updates) and deleting installed themes (via wp.updates).

The custom themes panel object joins WP_Customize_Widget_Panel and WP_Customize_Menus_Panel as core examples of the intended use for panels – as contexts for distinct features, rather than as generic containers for sections. It is usually not necessary to modify the core panel object when extending the themes experience.

The theme browsing is done within the custom customize section objects that are instances of WP_Customize_Themes_Section in PHP and wp.Customize.ThemesSection in JS. In WordPress 4.9, there are two sections for browsing themes: Installed Themes and WordPress.org Themes. There will be an addition of Upload Themes section in a future release. Themes Section is responsible for searching and filtering themes, loading themes, rendering screenshots for theme controls as they become visible, and opening and navigating the theme details.

In WordPress 4.9, the core team has completely reworked the theme section. The most notable change is the addition of built-in support for loading theme data from WordPress.org.

Each theme within the browser is represented with a customize control object, instances of WP_Customize_Theme_Control in PHP and wp.customize.ThemeControl in JS. Theme controls:

  • Display information about a single theme
  • Provide contextual buttons to install, preview, or install and preview themes depending on whether the theme is already installed
  • Contain an internal filter (and sorting) method in JS, which can be used for searching and filtering all the theme controls within a section

WordPress 4.9 has completely restructured the control to use JS templates for rendering. This facilitates the updated themes section’s ability to quickly load data for large numbers of themes within a fully JS-driven experience. Hundreds of individual theme controls are dynamically created and deleted as users navigate the theme browsing interface, leveraging the customize API’s ability to scale by building on functionality initially introduced in WordPress 4.3 for the interface of the menu.

Extending the Core Experience

The modular structure of the customize API allows any aspect of the new themes experience to be modified or extended. The extensions will modify the themes section object or will create custom themes section instances or subclasses.

There are two types of WP_Customize_Themes_Section: those that load all the themes at once and search/filter theme locally (like the core installed section), and those that search and filter themes remotely, replacing every theme control object each time a search or filter changes. This distinction is managed with the filter_type parameter.

When this is set to local, all the themes are assumed to be loaded from Ajax when the section is first loaded, and subsequent searching/filtering is applied to the loaded collection of themes within the section. This is how the core “Installed” section behaves – third-party sources with limited numbers of themes may consider leveraging this implementation.

When filter_type is set to remote, searching and filtering always triggers a new remote query via Ajax. The core “WordPress.org” section uses this approach, as it has over 5000 themes to search.

Halsey said that with this parameter, it is theoretically possible to create a plugin that adds an instance of WP_Customize_Themes_Section that will browse themes from a third-party source. The customize_load_themes filter facilitates loading themes from third-party sources (or modifying the results of the core sections) within an Ajax call triggered by a themes section. In practice, it may be desirable to create a custom themes section object (subclassing WP_Customize_Themes_Section) to further customize the experience of browsing third-party themes within the Customizer.

According to Halsey, most of the work for WordPress 4.9 has been completed (#37661), with several follow up tickets to polish the feature. There are also some improvements that are planned for future releases. With a new themes experience in the customizer, it is suggested to test it in the 4.9 betas and share feedbacks or bugs that you find on WordPressTrac.


Source: Make WordPress
Featured Image Source: Patikli Penguen

Leave a Reply

Your email address will not be published. Required fields are marked *