Figure/Ground 2.0 Screenshot

Figure/Ground 2.0 and the Future of WordPress Themes

Five-plus years after its launch as a bold new typology for WordPress themes, Figure/Ground has been updated to version 2.0. This modern reincarnation maintains the bold design language while taking its functionality to the next level with accessibility-ready support and full compatibility with the WordPress 5.0 block editor “Gutenberg.”

Figure/Ground runs this site, as well as the Cello Expressions index. While I have already designed (but not built) the next theme for this site, with these updates, I plan to keep Figure/Ground around for a few more years.

Modernization

Screenshot of version 1.2 of the Figure/Ground WordPress Theme
Figure/Ground 1.2, with the “orthogonal” graphics mode.

Figure/Ground began as a visual experiment. Its conscious use of only two high-contrast colors places a large emphasis on the animated background graphic. And using a randomly-generated background graphic, technical parameters define the levels of complexity in the visual experience.

Glossy white porcelain tile with gray grout in a rhombus pattern
Rhombus tile pattern in a kitchen

After five years of an “orthogonal” graphic that is organized to 16-pixel intervals, Figure/Ground was ready for a more-unified default experience. The new “rhombus” mode regularizes the solid/void background relationship. Regions of randomly dark or light background are organized into a grid of rhombuses inspired by a wall tile pattern. This new option also chamfers corners on post and widget containers, similar to the existing “circular” mode.

Accessibility

The unification with the rhombus pattern also moves away from the emphasis on animation. This creates an opportunity to turn the animation off by default for improved accessibility.

Figure/Ground is accessibility-ready as of version 2.1. The critical importance of accessibility in digital work is something that I have become more aware of and concerned with since I first released Figure/Ground. And I was aware of so many fundamental accessibility problems in this theme that I did not think that meeting the WordPress.org accessibility-ready requirements would be possible.

But the adjustments required were relatively manageable. In addition to turning off the background animation by default, I added a button inspired by the WordPress header video feature for users to turn the animation off on the front end. I also added proper buttons to toggle post meta information, improved keyboard navigation, redesigned default, hover and focus styling for links, and added verbose screen-reader text.

With the accessibility improvements come inherent improvements to search engine optimization and flexibility to accommodate future input modes. I plan to place a much larger emphasis on the accessibility of my own content and of all of my WordPress themes and plugins moving forward. Optimizing for web standards, machine-readable contents, and accessibility and SEO is the first of my seven keys to sustainable WordPress projects.

Blocks, Embeds, and the New Editor

WordPress 5.0 introduced the new block-based “Gutenberg” editor. WordPress core has not worked through good processes for themes to support block-based content in a portable way. However, core does have several new API options that allow themes to begin supporting this new paradigm as the transition happens.

Figure/Ground 2.0 adds support for the core editor blocks, in many cases applying the theme’s existing styling to the new block-oriented elements. Is extends the customizer color options to the editor, bringing users’ customized options into the text and background color palettes. And it enables the wide and full-width block alignments that the core editor now supports. Building on the theme’s notion that photos break out of the strict bi-chromatic canvas, photos can now consume the entire screen within the context of a post thanks to the new block editor.

Wide orientation photo of a river through a forest with the trees reflecting in the water
A full-width image added with the new block editor.

I also added custom styling for WordPress embeds. Following the belief that in-site embeds should be unified with the site design, and external embeds should reflect the host site’s aesthetic, embeds now use the colors of the theme (as customized). The theme also refines the core spacing styles for improved consistency. See the end of this post for an example.

The Case for Artistic Themes

Little has fundamentally changed in website design since the original release of Figure/Ground in 2014. Many websites are designed to look good and function well, but few make bold or artistic statements. As WordPress seeks to democratize publishing, my goal with Figure/Ground is to make it easier for site owners to present their content in unique and inventive ways. Accordingly, Figure/Ground is highly-customizable; no two sites with the theme need to look alike.

I hope to create more themes like Figure/Ground in the future. Linework is my second-best example of an artistically-driven theme so far. My other current themes are somewhat more traditional, although each seeks to present content in an unconventional way. Lucidus is entirely image-driven and Visualize is hyper-focused on the simultaneous presentation of an image with text. Each of these themes needs an update similar to Figure/Ground, particularly to be fully accessible and support the block-based editor.

My themes are a strong counter to the notion that WordPress themes could be replaced entirely with block templates and style skins. Technical simplification of a theme’s role for a WordPress site is much-needed. And countless existing themes should be consolidated into an experience that is almost-entirely driven by WordPress core, with only a small role for a generic theme. But as  this consolidation happens, I anticipate an increased desire for highly-opinionated and artistic themes.

The importance of a unified, carefully-crafted design language cannot be understated. My conception of themes takes this further to emphasize unique design languages with a highly-creative and artistic flair. Beyond the content “chrome,” I envision each theme as an inspiration for the content that it will present. Fonts, colors, and page templates are a good start; however, they may limit the creativity that themes, and by extension sites, could present. I foresee a specialization of themes in conjunction with an increased emphasis on custom post (content) types as the exception to the reduction in a theme’s role for a WordPress site.

Beginnings

Figure/Ground was originally inspired by a project in my second-year architecture studio at USC. The relationship between solid and void forms and spaces is critical to architecture and similarly applies to any creative medium. The digital derivation of this study is manifested in a constant dynamic sequence of change. In response to the increasingly-banal presentation of digital content, Figure/Ground transforms blogs into disruptively flat, high-contrast, animated explosions of text, icons, and artistic forms. My initial announcement of the theme still includes the raw, unpolished concept:

WordPress itself has changed substantially since Figure/Ground was first created. The post above references a project to improve the theme-browsing process withing WordPress–since then, that project has aged and I led efforts to bring a live-preview-oriented theme browser into WordPress. While the implementation of Figure/Ground has also aged, its fundamental objects remain valid. This update breaths new life into the theme and allows it to once again represent my full creative abilities in website design.

2018 Update on Cello Expressions Projects

Cello Expressions has existed in its current form for nearly six years. After briefly serving as the website for my high school cello quartet, it has been the home of my various digital projects for most of its existence. As this site and its content reach a level of relative digital maturity, it’s time to update the status if its various projects. This post serves a similar purpose to a roadmap combined with an “annual report,” interpreted loosely and without any expectation of becoming annual (I’m in no rush to duplicate the effort that went into the last annual report that I prepared). Read on for insights into the recent work, current status, and future goals for this site and the projects that it hosts (including my WordPress themes and plugins).

Project Updates

Sheet Music Library

The Cello Expressions Sheet Music Library has seen significant growth since migrating to WordPress three years ago. The Sheet Music Library WordPress plugin offers significantly improved content structure, easing navigation and offering better access to audio, video, and imagery for each piece. With the navigational and SEO improvements from the redesign, the sheet music library remains the highest-trafficked portion of Cello Expressions by a large margin (averaging roughly 3,000 visitors monthly).

The Cello Expressions Sheet Music Library home page as of March, 2018.

There are now over 100 compositions and arrangements in the library. I intend to continue including original work only here, with the sheet music library plugin offering a venue for other composers to similarly share their work. A number of pieces are no longer directly available due to  copyright requirements. I do not want to spend time handling copyrights, as the free sheet music format is not easily compatible with requirements that various publishers have. Moving forward, I will generally only arrange pieces that are in the public domain. I will still provide (for free) sheet music for copyrighted pieces on a per-request basis, for groups that acquire the appropriate rights for their usage directly with publishers (by paying them and filling out their required paperwork).

Given the volume of traffic (and demand) for sheet music in the cello ensemble niche, I have considered the possibility of selling some music. This is not an immediate goal; however, building an integration between the sheet music library plugin and an ecommerce plugin (such as WooCommerce) would be beneficial to many, many self-publishing composers. As the plugin FAQ notes, the plugin is designed so that interested individuals or developers could build this integration without my involvement. If that still hasn’t happened in the next couple of years, and I decide to begin charging for some of my (new) sheet music, I may create this integration myself. Given the purpose, this would likely be as a commercial WordPress plugin.

The new “Audio on This Page” playlist widget in the Sheet Music Library.

In the near future, I plan to continue publishing new compositions or arrangements every six months or so. My focus will be on quality over quantity. In addition to reasonable and well-assessed difficulty levels, I want new additions to the library to be particularly well-suited for the medium of cello ensembles. Where possible, new arrangements will have at least a rough recording to accompany the sheet music. I don’t have many technical improvements planned for the library. However, I recently added an “Audio on This Page” feature to the sidebar. Borrowing behavior from the Featured Audio WordPress plugin, this widget automatically assembles an audio playlist of all of the sheet music (with audio) shown in a given view (by composer, genre, instrumentation, etc.).

Photography

I launched my Photography site in 2015 to explore my interests in architecture, construction, landscapes, and landscape architecture. Part photo-blog, part art-project, the site is driven by the immersive experience offered by the Lucidus WordPress theme.

Cello Expressions Photography home page as of March, 2018 (actually a video background, of the USC Village clock tower reflected in the central plaza fountain).

The content has evolved somewhat over time. Most of the content for the first two years became a detailed (and fully-captioned) visual account of the construction progress at USC Village. A few other pieces of content are scattered in with those posts, and have taken greater focus since I graduated from USC (and left Hathaway Dinwiddie Construction) in December 2016. The USC Village series accumulated a substantial following, as it should have, given that it was one of the only public sources of information for the project’s progress. The level of reader engagement through the open comments was encouraging. I’m hoping to continue encouraging viewership by becoming more regular in timing my posts; however, the format of the site does lend itself to, perhaps annual, perusal with an occasional deep dive.

Moving forward, I hope to share more of my work with KPFF through this site. As all of my current projects are under construction, certain particularly-interesting images, and a few more-detailed galleries, will make the cut, along with other relevant content. However, I do not anticipate curating regular, detailed progress posts on any particular projects in the future, similar to the USC Village series. Rather, the primary focus will be on interesting imagery of architecture and structures that I’m involved in, and that I encounter. The theme continues to be quality over quantity–only a small percentage of the photographs that I take make their way to the site, and I will attempt to balance the subject matter between the stated categories where possible.

Ultimately, my objective with Cello Expressions Photography is to provide a collection of visually-stimulating imagery regarding architecture, construction, landscapes, nature, textures, and more; as a stream of content with the ability for viewers to dig into any particularly-interesting elements. I am generally satisfied with the presentation of the content and technical process for managing it. Eventually, I want to build a “full-page galleries” WordPress plugin that provides a more immersive gallery-viewing experience, with some similarities to the Jetpack plugin’s Carousel feature. Otherwise, my focus will be on creating and curating the content (as it should be).

Blog

This blog acts as a catchall for text-heavy content related to my various digital projects. Much of the content has historically been related to WordPress. I do not write nearly often enough to warrant distinct blogs on each of the Cello Expressions sub-sites; hence the mixed subject matter. Hopefully, if you’re reading this, you care enough to skim or skip past any content that isn’t relevant to why you ended up here, and you may even find value in contextualizing the unique perspectives that my diverse interests provide.

Cello Expressions Blog as of March, 2017.

I have made an effort to document most of my major projects here, including a few links to substantial external work. This blog has accumulated a relatively large amount of content. I made the decision, years ago now, to remove some of the oldest, lowest-quality posts (primarily discussing updates to now-closed plugins); retaining the vast majority of the content here, I will do my best to keep a consistent quality standard. I generally aim to only publish content that is worthy of being published online and that provides additional value by being mentioned here, if it supplements another source. Moving forward, I anticipate a continuation of curated update-and-announcement-type posts. However, the primary focus will be on more substantial content. This post essentially documents my goals and expectations for my digital projects over the next several years, for example. Essays with multimedia supplements work particularly well in the traditional “blog” format; as evidenced by my favorite post:

Trust WordPress with Live Preview

I also hope to share more of my (non-professional) architectural work here. I recently published more of the work that I completed during my undergraduate architecture classes. This decision preceded the somewhat-random discovery that this example image from the live preview essay ranks top-five in a google image search for “mixed building floor plan.” I continue to be intrigued by the value that certain projects and ideas happen to provide to certain people looking for specific things. This is a testament to the out-of-the-box SEO power of WordPress, particularly for linked images, which I’ve witnessed in my contributions to sites ranging from USC ASCE to here.

Technically, this blog uses WordPress in the most out-of-the-box form of the Cello Expressions sites, and is resultingly low-maintenance. I recently, finally, added footer widgets to improve more-targeted navigation through what is now a reasonably large collection of posts. Notably, this includes a “Featured Posts” section, which will be used to organize what I see as the most important and highest-quality content that I publish here (using a WordPress menu). I also incorporated a more-comprehensive index of the Cello Expressions projects.

While I still like the artistic statement that the Figure/Ground theme makes, I recognize its functional limitations. Especially as I focus on longer-form and higher-quality content, readability and accessibility should become the primary focus of the design. I have already completed the concept design for the next graphical design for this blog. It will strive to make a similarly-bold artistic statement, but one that better lends itself to content consumption. Given my preference for focusing on content creation, and the disruption of WordPress’ ongoing “Gutenberg” project, a new design will likely launch sometime next year. Figure/Ground will have had an impressive five-year run here by that time, and will continue to be available on WordPress.org.

Halsey Themes

My WordPress themes are no longer part of celloexpressions.com, having moved to http://themes.halsey.co/ last year. However, they are still one of my digital projects. The move to a dedicated site is related to the decision to begin offering commercial themes. I still haven’t formally announced this project. One more theme is under development; once it is complete, there will be a good mix of target user types and I’m planning to market this project more broadly.

Halsey Themes home page as of March, 2018.

My themes focus on simplicity and usability. Prioritizing user-first, out-of-the-box design, their unique and opinionated designs provide visitors with unforgettable experiences. The themes implement core WordPress features along with efficient custom options so that user can get their site up and running, or switch an existing site to one of these themes, with minimal effort.

Starting with the free Figure/Ground blog theme, each theme features a unique design approach. Currently-complete themes include:

    • Lucidus: an innovative photography theme featuring huge, layered (parallax) featured images and stunning post formats
    • VisualizePerfect for pairing poetry with photographyillustrations with essays, or showcasing mixed-media works, Visualize features a clean and simple design showcasing an elegant two-column layout
    • Classic ArtisanA modern expression of a timeless design—with a traditional layout meeting bold typography, high contrast, and an elegant background, Classical Artisan is ideal for artistsdesignerscraftspeople, or small businesses
    • Linework: A clean small business theme, Linework is a dynamic, highly-customizable canvas for your content to shine
    • Figure/Ground: An eccentric free blogging theme featuring an animated background graphic and extensive customization options

Each of these themes is now available either free from WordPress.org or for purchase (licensed GPLv2 or later) on Creative Market. Check them out now if you’re interested. These are the types of design-focused themes that cannot be replaced by WordPress’ Gutenberg project. They allow your content to shine regardless of the editing experience and feature unique structural elements that cannot be duplicated with a block-based editor and a generic theme. As Gutenberg moves closer to inclusion in core, I plan to evaluate its integration with each of these themes as a measure of compatibility, contributing issues back to the core project. Look for a formal launch of Halsey Themes in six months or so.

WordPress Plugins

The Cello Expressions WordPress Plugins site largely exists for posterity, as all of its content is pulled directly from WordPress.org. Unfortunately, the “I Make Plugins” plugin that powers it has been partially broken for some time now. This site will likely continue to exist with minimal changes until https://profiles.wordpress.org/ becomes more useful as an index. It does run a fun interpretation of the Twenty Thirteen theme with the Thirteen Colors plugin.

Cello Expressions WordPress Plugins home page as of March 2018.

I currently have 25 plugins available on WordPress.org. A few are formally “abandoned” at this point, while a few others need some updates that I’m planning to make in the next few months. The majority of these plugins do not require regular or extensive maintenance and remain actively supported (indicated by bumps to the “tested up to” field in the readme). I try to answer questions in my plugins’ support forums every few months.

There are several more small plugins on my list to eventually build. Moving forward, my goal is to create plugins with little-to-no UI, and to publish as many plugins as possible that are built for a particular site. As with most of the plugins now in my library, it’s usually not much harder to build custom functionality in a generic way so that your work can be used by anyone needing that functionality, rather than restricting it to your project.

Pseudo-random Experiments

One of my earlier projects, pseudo-random experiments remains a good example of the type of work that I want to share with Cello Expressions. The various experiments hosted here have inspired WordPress themes and created graphics for Chase the Music concerts. I do not have any specific additions planned; however, any new experiments in a similar theme will be added as they’re created.

Pseudo-random Experiments home page as of March 2018.

Interactive Geometry Apps

While this project has not been active since 2013, it is the newest addition to the Cello Expressions site. Originally intended to be published as standalone mobile apps, these projects are pseudo-educational and present advanced geometric concepts in interactive and uniquely digital ways. Future updates are not likely; however, there is useful existing content here that will continue to be presented along with the active Cello Expressions projects.

Interactive Geometry Apps site as of March 2018.

Geometry of the Twisted Savonius Wind Turbine

This is my oldest project, and the only project that predates the Cello Expressions site. Documenting a high school research project, it continues to receive a small, regular stream of traffic. Given the specificity of the research and lack of other online sources offering information on this particular type of wind turbine, it remains an important resource to have an online home (some of the graphics have even made their way to Wikipedia).

Geometry of the Twisted Savonius Wind Turbine site in March 2018.

While the content here doesn’t necessarily fit with the other Cello Expressions content, hosting it on an archived site in this network is the best way to keep it in a stable, secure framework. The last updates were a conversion to WordPress in 2013, and the content was last updated in 2011. No further updates are planned, but the site will continue to remain publicly available.

Infrastructure

After several different iterations in both design and structure, Cello Expressions is now in a reasonably stable and tenable state. Most of the sites run on a WordPress multisite network. These run a mix of custom and public WordPress themes and share a common administration interface. A few projects are on a basic HTML & CSS setup.

The WordPress sites each make use of a single post type. This suggests an alternative implementation where Cello Expressions could run on a single instance of WordPress, organized by post type, rather than several distinct WordPress sites. However, the current strategy facilitates unique graphical designs for each site. Given the diversity in content types and the unique themes and visual customizations provided for each, the multi-site approach has been relatively easy to maintain. In fact, while all of my other complex WordPress projects have used several post types within a single site, the multisite approach is worth considering more often. The “global” navigation bar and the few manual cross-site links would benefit from further iteration on this approach. For example: could the homepage be managed by a cross-site menu that renders dynamic multi-part content instead of being hard-coded?

The HTML & CSS projects are difficult to maintain–for example, the recent transition to SSL rendered them unusable for several months (all of Cello Expressions is now running on SSL (https://), after a series of transitional issues). However, these projects are generally simple, feature hard-coded scripts as content, and are rarely updated. For these reasons, it still seems to be best for these to stay out of WordPress

Other Goals

My extensive contributions to WordPress core are directly related to my goals with Cello Expressions. There is direct overlap in some of the more specific projects, such as default theme and feature plugin development. This blog has content related to WordPress core development. And, most of my contributions have directly improved my ability to publish my various projects online.

Moving forward, I plan to focus more on my own projects, here, than on WordPress core development. For a variety of reasons, I usually do not have enough influence for my contributions to create the level of impact that I’d like to have. I have also repeatedly had bad experiences with the way parts of the project are managed, and how decisions are made. Ultimately, the community seems much more receptive to my efforts as a plugin and theme developer.

As WordPress evolves, I expect to contribute opinions and (maybe) design much more than code. In fact, steps are being taken that will effectively prevent me from contributing code. Given that I now have much less time available for any digital projects, I’d rather focus on my own projects anyway. My perspective as someone that does not use WordPress professionally, and has no interest in doing so, remains generally underrepresented. I hope that other WordPress contributors respect and seek out this perspective more frequently, as it represents the silent majority of end users.

Overall, Cello Expressions has evolved into a stable home for a number of my projects. I might add more projects here in the future. I definitely want to generate more content within the project frameworks that are already established. Technical improvements will also come, albeit at a lower priority. Perhaps the biggest unknown is the level of interaction that my projects will see. Interest expressed via comments (or reviews, or direct messages) is likely to generate more focus on a particular project. That part is up to you.

Small Plugins, Big Impact

As I create and publish more and more plugins (I now have 25 on WordPress.org), my increasing focus is to keep each plugin as simple as possible. My first few WordPress plugins suffered from bloat from the beginning and are still paying the consequences, including poor usability, untenability, and a likely path toward abandonment. With simplicity as the priority, a plugin is smaller, more efficient, and easier to use. Each plugin should do one thing and do it well. “Well” means that it works as-out-of-the-box as possible, is compatible with as many site configurations (themes, other plugins) as possible, and can be customized in a variety of ways to fit a given site’s needs.

This post features case studies of five small plugins that can make a big impact on a site. All of these plugins have been published for over one year, allowing time to evaluate the levels of support and maintenance required and any community feedback via reviews and active installation data. Somewhat coincidentally, each of these plugins includes only a single file of PHP code, a single readme text file (that is generally larger than the actual code), and no additional assets (images, CSS, JavaScript, etc.). At this scale, the tiny size of the plugin download bundle is irrelevant; I will instead report the number of lines of code, including inline comments, but excluding my typical 32-line plugin header and license statement. I will also summarize the usability (configuration and customization requirements), maintenance (number of updates required, for any reason), and support (via the WordPress.org forums) requests for each plugin.

If you want to learn more about a particular plugin, click through to the WordPress.org listings, which will also show the current reviews and active installation counts. These five plugins have a diverse set of functions, adding features, modifying the admin interface, and more. A common theme is extending existing core WordPress functionality, exposing it in new and useful ways.

Chronological Posts

plugin iconGlobally reverses the post order to be chronological, so that your site can display a journal or a book in chronological order.

  • Lines of code: 6 (PHP)
  • Configuration: Activate the plugin, and you’re done
  • Customization: Fork the plugin and add any required conditionals to the code
  • Updates Required to Date: 0 (public for 2 years)
  • Support: 7 forum posts / 1,000+ active installs ( < 0.7%)

Front Page Custom Post Type

Select a custom post type to be displayed in place of latest posts on the front page. Allows custom post types to be featured on the front page out-of-the-box with most themes.

  • Lines of code: 47 (PHP)
  • Configuration: Select from additional front page options in the customizer
  • Customization: Additional CSS or theme CSS edits may be required depending on the theme’s use of post-type-specific selectors
  • Updates Required to Date: 0 (public for 1.5 years)
  • Support: 0 forum posts / 100+ active installs (0%)

This plugin is my fastest-ever to be approved, going through the plugin review queue in a matter of hours (the same day that it was conceived, written, tested, documented, and submitted). It received a shout-out from plugin reviewer Mika Epstein, and could make a good candidate for core inclusion.

Login Site Icon

plugin iconDisplay your site icon instead of the WordPress icon on the login screen. Particularly helpful for users with multiple WordPress sites.

  • Lines of code: 19 (PHP)
  • Configuration: Activate the plugin, and set up a site icon if you haven’t already
  • Customization: Install additional plugins or custom code to further customize the login screen
  • Updates Required to Date: 0 (public for 2 years)
  • Support: 0 forum posts / 100+ active installs (0%)

Multisite Custom CSS

plugin iconAllow multisite site admins to access custom CSS (via the core feature in the customizer) by trusting them with unfiltered CSS.

  • Lines of code: 7 (PHP)
  • Configuration: Activate the plugin, and you’re done
  • Customization: Additional plugins or custom code if further user role/capability or security adjustments are required
  • Updates Required to Date: 0 (public for 1.3 years)
  • Support: 1 forum post / < 10 active installs ( > 10%; notably, there are three five-star reviews for > 30% engagement… the active install data appears to be incorrect; perhaps it doesn’t correctly account for multisite installs)

Multisite Site Index

plugin iconDisplay an index of all sites on a multisite network with a widget or a shortcode.

  • Lines of code: 162 (PHP)
  • Configuration: Add the widget and/or shortcode, and customize its appearance
  • Customization: Custom CSS strongly encouraged, with examples for common layouts available in the plugin FAQ
  • Updates Required to Date: 1 (public for 1.3 years)
  • Support: 3 forum posts / 60+ active installs (5%)

This last plugin is roughly three times larger than the next largest plugin featured in this post. However, its ability to remain relatively streamlined while providing a substantial amount of functionality on the site is significant. Plugins that display content on the frontend typically feature extensive administration interfaces and frontend styling. This plugin instead prioritizes smart defaults via semantic markup. Given the target audience of multisite network administrators, some level of advanced appearance customization should be expected regardless, and is best served via the core custom CSS feature.

Good plugins don’t have to be small. But small plugins are much more likely to serve a majority of users’ needs well, require fewer maintenance updates, have minimal support needs and conflicts with other plugins, and remain relevant for a long time. Simplistic plugins that work out of the box for a majority of users, make more decisions, and present fewer options observe the WordPress Philosophy. All plugins should adopt this philosophy to optimize their potential and longevity.

Customizer Themes in 4.9

WordPress 4.9 includes a new experience for discovering, installing, and previewing themes in the customizer. It is now possible to set up every aspect of a site except for content within the customization workflow with live preview.

I’ve been working on integrating themes with the customizer for several years. Back in 2014, when I was deep into the process of bringing menu management into the customizer, I posted some initial thoughts on the UX and technical prerequisites for an improved themes experience:

Proposed WordPress Customizer Theme-Switching UX

We ended up shipping a minimal interface for switching themes in WordPress 4.2, in early 2015. This grew out of a small weekend project and was severely limited by its restriction to themes that were already installed on the site. While this project was an important step in the development of the customizer, looking back, it should not have been shipped with WordPress core.

In the summer of 2016, as I prepared to take on a larger contributing role for the development of WordPress 4.7, I decided to tackle the more-impactful challenge of theme installation. Many of the technical barriers noted in my original idea post had been resolved. I had also evolved the conceptual interface to a more unified experience. Given the limited volume of contributors and the number of active projects at the time, I spent several weeks designing, developing, and marketing the feature with little help. Despite extensive efforts to follow the “best practice” core development processes, the project lacked community interest and momentum. The feature was merged into WordPress 4.7, only to be painfully removed during beta due to anonymous feedback provided to the release lead. The exact reasons for delaying the feature remain unclear.

I continued pursuing a path forward for a new customize-integrated themes experience. Instantly previewing a new theme on your site and with your content is a powerful concept. I persistently requested additional feedback and rephrased the project goals in an attempt to get enough buy-in to continue improving on the feature. Finally, there was a breakthrough when it became clear that the new user experience could be shipped with a few minor changes to the visual interface.

The broken process of actually finding a WordPress.org theme was stripped down to the bare minimum in the new interface. A future project will focus on improving the way that users browse and find themes in more detail. In WordPress 4.9, users get the best theme-browsing experience currently available, in a drastically improved workflow integrated directly with the process of customizing a site.

For more information, check out my feature post on Make WordPress Core:

A New Themes Experience in the Customizer

Timber in the City: Cedar Commons

The capstone project for my Bachelor of Science in Civil Engineering (Building Science) was a semester-long team project to design a mixed-use development featuring mass timber. Our project was formulated around the 2015-2016 Timber in the City competition, which prescribed a mid-rise development at a New York City site (that will actually house the Essex Crossing development). The program included affordable housing, a public market, and a branch of the Andy Warhol Museum, totaling 300,000 square feet.

Our project included a conceptual architectural and structural design, including high-level consideration of MEP systems and facade detailing. We conceived a bold and distinct parti for each program element, drawing on the foundational design principles taught by Mina Chow in our first year of studio study. We selected structural framing layouts ranging from traditional to highly conceptual, developing a reasonably-complete concept design as taught by Tigran Ayrapetyan in our second year. And we developed an enclosure strategy with guidance from Michael Ellars, who oversaw this final project. We built a Revit model to produce a drawing package and renderings for the competition boards.

Presentation Boards

We submitted four design presentation boards for the competition portion of the project:

Design Narrative

Cedar Commons showcases the structural and sculptural potential of wood with a series of dynamic timber structures that reflect the ever-evolving cultural fabric of the Lower East Side. The weaving form of Williamsburg Apartments references the intersection of diverse cultural paths in this community, where a rich regional heritage has developed. The new Essex St. Market similarly emphasizes the power of community connectivity by anchoring the residential massing along Essex Street with monumental solid and glazed blocks. At the center of the site, the Andy Warhol Museum sits as a jewel, emphasizing the narrative on popular culture that is central to Warhol’s artwork. Its form is a three dimensional study of the repeating quadrature that frequents his work, making the museum itself an artistic commentary on the traditional design of space. Expansive open space in the form of both public plazas and shared private rooftop gardens underscores the project’s goals to provide a vibrant environment where the community can flourish. And with timber as the primary structural and finish material, the heterogeneity of natural wood expresses the diversity and humanity of the local community, creating an architectural landmark that contrasts with the historic concrete and masonry vernacular of the neighborhood. 

The residential structure features horizontal cross-laminated-timber (CLT) floorplates. The horizontal use of structural timber is reflected in the façade with fully-continuous strip windows around the building, creating a horizontally-striped solid/void reading. The solid portions of the façade are comprised of vertical CLT cantilevered off of the horizontal floor plates, finished with horizontal cedar siding. For the double-cantilevered floorplates, even-ply CLT is uniquely suited for this two-way-slab application because the laminations in both directions are leveraged structurally. Every two floors, composite transfer slabs with 10-ply CLT and 4” of reinforced concrete transfer loads between the column grids as the building massing alternates. 

The Andy Warhol Museum contrasts with the residential structure by highlighting the vertical application of CLT, as exterior and interior shear walls. Verticality is emphasized with vertical strip openings for windows that run the full height of the building, with a rhythm of solid and void based on a 2’ grid that is fully rendered in the curtain wall at the main entrance block. Glued-laminated timber beams at 6’ on center throughout the building carry floor loads from tongue-and-groove sheathing run at a diagonal to the CLT walls and glued-laminated columns. 

Flanking the main entrance to the site, the new Essex St. Market draws inspiration from both the horizontal residential structure and the vertical museum structure, offering enormous openings at each entrance and the central dining area and solid structural CLT walls elsewhere. Specially-designed exposed timber I-beams rhythmically located every 10’ enable wide structural bays that maximize the open space inside. 

Leveraging the sustainable and humanistic benefits of timber to create a stunning new space for the community, Cedar Commons restores the heritage of community synergy in the Lower East Side while showcasing innovative new ways to build with wood. 

Drawing Package

In addition to the highly-curated  presentation boards and design narrative, our capstone project included a more-traditional drawing package. This set contains schematic-level plans, sections, elevations, and details. Some parts are more complete than others, as the drawing package became a secondary deliverable as the final focus shifted to the competition submission.

Timber in the City – Cedar Commons – Document Package

Design Team

I teamed with Erin Yamashita, Kelly Lynch, and Lucy Egbe for this project. We had also worked closely together on a number of academic and extracurricular projects throughout our undergraduate experience. Erin and I both went on to complete a M.S. in Civil Engineering at USC before working for KPFF (in different offices); Kelly and Lucy both work for contractors now. Our team comprised half of the 2016 graduating class in the USC Building Science program. This final, semester-long project concluded a three-year architecture studio with a structural emphasis, which we completed alongside a traditional civil engineering degree.

USC Civil Engineering (Building Science) Class of 2016.

Annenberg Digital Lounge Tutorials

As a student at USC, I worked at the Annenberg Digital Lounge for the first two and half years of its existence. Coinciding with the opening of Wallis Annenberg Hall in 2014, I served as a WordPress expert in the development of training programs for students and the organization’s online presence. In addition to master-planning online content strategy and building the current iteration of the website, I authored a number of WordPress tutorials. These are primarily aimed at communications and journalism students; however, many are more-broadly useful for newer WordPress users. Check out my tutorials here.

Pico-Union Mixed-Use Project

For the final individual project in my undergraduate Building Science studio program at USC, I designed a mixed-use building on a constrained site in Los Angeles. The program includes twelve studio and one-bedroom residential units, parking, and a small retail/commercial space. The project meets the zoning requirements for the actual site and considers the context of the surrounding neighborhood. Project scope included programming studies, floor and ceiling plans, elevations, sections, renderings, and conceptual structural design.

Given the site’s limited opportunity for creative massing, with the required program and height limits prescribing a full-lot three-story building, my design addresses the street frontage as the primary focus. The residential units step back above the glazed retail space, creating planters and providing overhangs that shade the south-facing windows. A row of trees sits in a rooftop planter along the front facade, providing greenery for the neighborhood, screening the rooftop mechanical equipment, and conceptually elevating the few existing trees on the site above the new construction. The brick facade draws inspiration from the neighboring historic building, with larger windows and plaster pilasters and bands adding a more contemporary interpretation.

Interior Renderings

Renderings representing the interior design were created directly from the 3D Revit model that was built to produce the drawings. These views seek to showcase the interior experiences made possible by the shell design—with window sizing and placement, room shapes and sizes, and conceptual layouts considered for interior impact. Five of the six units are rendered, including an unusually long and narrow one-bedroom concept.

Drawing Package

The primary deliverable for this project was a conceptual drawing package. The floor plans and elevations are the most developed, with initial sections and RCPs also included.

Pico-Union Mixed-Use Project – Drawing Package

Architectural floor plan showing a proposed apartment building layout
Typical floor plan on the residential levels.

Building and Managing Dynamic Multi-part Pages with WordPress

Twenty Seventeen is the first bundled theme to provide a way to create multi-part pages with WordPress, via a front page sections option that features multiple pages on the front page. This is useful for largely single-page sites, but limits the functionality of a front page as a showcase for and gateway to content throughout larger sites.

For sites with more content, and even multiple post types, there isn’t an established pattern for building pages that feature multiple pieces of content. Core archives exist for single taxonomy terms, authors, and post types, but widgets or custom implementations are needed to tie these pieces together. Twenty Fourteen explored strategies for high-content sites by providing numerous widget areas, specialized widgets, and featured content on the front page. The featured content concept provides two major benefits: visitors are exposed to a diverse array of content that would otherwise be buried deeper in a site, and the featured items are updated automatically as new content is created.

WordPress is especially strong in its use of taxonomies to group content together. Extending this functionality one more level to allow terms and posts to be grouped into navigational indexes provides immense power to build complex pages that can be managed within WordPress rather than being defined in code. Featuring taxonomy terms in addition to single posts makes these multi-part pages dynamic, with featured content updating automatically as new items are published.

It can be difficult to visualize the end goal for these types of pages, so here are a few examples of dynamic multi-part pages that should be possible to build and manage with WordPress:

Suggested Solution: Menus

WordPress menus organize navigation to different elements of a site. This is traditionally handled as vertical or horizontal lists, often with hierarchy. Recently, themes have expanded this concept by presenting additional layouts such as social menus that display icons in place of text labels. Some themes show the menu item’s description (a core feature) for additional context.

From a technical perspective, menus have a dedicated post type with a post for each menu item, and a taxonomy term for each menu to group the items together. I became far too familiar with the benefits and challenges of this approach in the year that I spent bringing menu management into the customizer with live preview. The potential to do more with menus struck me as the biggest opportunity for themes (and plugins) to innovate site management without major core changes.

The basic concept of a menu is a way to organize content on a site. And in core, menus can contain items for posts and terms of any type (that supports it), as well as custom links. What if we took this concept a step further, encouraging themes to pull additional elements such as featured images or even post excerpts or content from the objects associated with menus?

While this may seem like an odd proposal if you think of menus as primarily useful for navigation, setting this up in a dynamic way actually preserves the organizational intent by providing navigation to content within the site. The difference is that more context is available for each item, and some items may be presented largely in their entirety without linking off to a single post view, perhaps enabling the option for more of a single page site feel. Taxonomy terms featured in a menu could display the first few posts within them as well as any taxonomy meta and the term description, opening the doors for a deeper showcase of content with a menu and introducing dynamic hierarchy by showing content within terms.

Perhaps the biggest advantage of this approach is that it can be implemented right now with the support of a robust management interface with live preview in WordPress core. You don’t need to build any backend functionality – core provides it already with the ability to select any content from the site to add to a menu, reordering with drag and drop, and live preview of the end product in the customizer out of the box. Everything is easily portable across themes, with menus needing assignment to the appropriate locations but otherwise persisting across theme switches. There are things that core can do to improve the experience further for developers and users, but it works today. If theme developers begin to experiment with using menus to build and manage multi-part pages, users stand to benefit significantly in their ability to control how they present their content.

I should note that this is not “content blocks.” While that term typically refers to improved management of content within a post object, this proposal is intended to improve the way that different pieces of content can be organized.

Proof of Concept: Dynamic Seventeen Theme

To showcase this concept, in both code and a functional theme, I’ve created the Dynamic Seventeen theme. A child theme of Twenty Seventeen, it replaces the static page-based front page sections with dynamic menus-based content. It also adds a page template that turns any page into a dynamic content page, automatically creating an associated menu location for each page with the template. Page templates are not a fantastic experience currently, but this is a good example of how they can provide useful functionality.

Dynamic Seventeen sticks with the base design of Twenty Seventeen, featuring a list-type layout interspersed with large featured images. It also extends the concept of the two column layout by providing the ability to add subtitles or descriptive text to each section, under the post title. Leveraging the menu item description field for this is an example of how menus can provide additional functionality over other approaches without custom admin UI.

The child theme is available on WordPress.org repository. The code is not particularly complex, using a custom nav menu walker to retrieve information about objects associated with menu items and display templates matching the rest of the theme. I encourage theme developers to take this first example and adapt it to their themes, adjusting exactly what content is shown, what content types are supported (for example, not showing custom links), and the markup and styling of the results as needed.

Gif demonstration of setting up the Dynamic Seventeen themr in the customizer with menus.
Dynamic Seventeen dynamic content management with menus demonstration.

The Future of Dynamic Multi-part Pages in WordPress

Dynamic, multi-part pages are an important aspect of many larger sites because they offer a gateway to a diverse array of content in the site. But if site owners are unable to manage their content without hiring a developer, WordPress is only realistically useful in the long run for businesses with in-house development teams. Empower users to organize and showcase their own content by creating usable interfaces with live preview, allowing them to trust that their changes work as intended.

While the menus approach works without any core changes, there are several things that would make the user experience better for this and other innovative uses of menus:

  • #38957 – Customize Menus: Menu locations should be able to opt-out of menu item types that can be added to associated menus
  • #38956 – Customize Menus: menus assigned to locations with limited depths should not allow deeper depths
  • #18584 – Nav menus need more hooks for extensibility

There is also a core ticket to expand the functionality of static multi-part pages like Twenty Seventeen’s front page. I remain skeptical of this approach because of the significant technical debt and future maintenance associated with the major additions proposed, and the redundancy with the existing functionality of menus. Let’s improve what we have and build on it rather than turning to new features that duplicate functionality and ultimately further fragment the user experience.

Trust WordPress with Live Preview

When most of us walk into a building, we assume that it’s safe. We trust that it’s built to code and structurally sound. And we trust that the engineers and architects behind the building know what they’re doing.

If a room is too hot or cold, bright or dim, spacious and sprawling or tight and cramped, many people are uncomfortable and may even complain. Human comfort is the most important aspect of the design of physical space, yet it is nearly impossible comprehensively assess the experience of a space before it’s built.

The disconnect between designing a space and experiencing the end product is the biggest challenge in the building design industry. Digital products face similar challenges in bridging the gap between designing something and publishing it, but physical constraints pose fewer challenges here. WordPress has evolved to provide the potential to close this gap all the way to an end user managing content, by providing a framework for live previewing changes to a site before publishing them.

To fully understand the significance of live preview in the WordPress context, it is informative to consider examples of similar challenges and solutions in other industries. We’ll start with a few examples before returning to the topic of live preview and WordPress, and examining the importance of trust.

Previews in Structural Engineering

Most people trust structural engineers to design safe buildings and bridges. And engineers work diligently to consider every possible scenario that each structural element and connection may experience. But at the end of the day, most structural engineering problems are ultimately educated guesses.

In structural engineering, the governing equation is design < capacity. In other words, the load on the structure, from its own weight, the weight of its occupants, and environmental forces such as wind, snow, and earthquakes, must be less than the amount of load a given element can support. But both sides of these equations make numerous assumptions. Vertical loads are typically estimated as distributed area loads based on the design usage, while the capacity of a structural element is based on the expected properties of its material and shape. Demand loads are amplified and capacity reduced by safety factors to account for the potential uncertainties in both estimates; these factors of safety help engineers trust their designs despite these uncertainties.

In addition to making significant assumptions at every step of the design process, structural engineers are limited in their ability to preview the performance of a structure before it’s built. Small scale tests can be performed, and newer digital tools can apply known forces, such as historical earthquake data, to digital building models. But it’s impossible to know exactly what forces a structure may encounter throughout its lifetime, or how exactly the structural members will react. At best, structural engineers can be confident in their designs based on the relative safety factors between the estimated demand and capacity of a structure.

Animated gif showing a building frame bent in different vibration modes
Animated modal analysis demonstrating the potential (exaggerated) vibration modes of a building structure during earthquakes. Created with SAP 2000.

I have personal experience in the challenge of previewing the performance of structural designs via my work with concrete canoes. Last year, our team spent three months researching, developing a new design based on theoretical principles, and conducting tests and small scale experiments, to create a new structural design for our concrete canoe. We even built a full-size practice canoe with the new design and tested it in the water before finalizing the design. But despite hundreds of hours of work, our canoe failed during the race competition. We had not considered the ultimate failure mode in our evaluation of structural theory and small scale tests. And despite full scale testing with the practice canoe, this oversight combined with construction variances between the two canoes to result in the failure. Even building and testing a copy of a full structure does not guarantee that the final product will perform as intended, meaning that true previews of structural designs are not possible to create.

Two concrete canoes with three paddlers racing them in the water
USC’s colorful 2016 concrete canoe, That ’70s Canoe in competition at the American Society of Civil Engineers Pacific Southwest Conference, prior to the canoe’s structural failure.

Previewing Architectural Designs

As I mentioned earlier, architects face immense challenges in previewing the experience of the spaces they design. Working with consultants to design every aspect of a space from the shape, layout and dimensions, to the lighting, climate control, and finishes, architects typically draw two-dimensional representations of their designs so that they can be constructed. Technological advances have enabled three-dimensional modeling, from which two-dimensional construction documents are produced, along with more-fully-rendered images that convey the appearance of the finished product.

While construction drawings and renderings provide a visual preview of the appearance of a design, they do not offer a way to experience the space before it’s built. Full-scale mockups of smaller spaces can be built, but they can’t fully represent the context – views, natural lighting, etc. – of the final product. Walkthrough videos rendered from digital models and virtual reality experiences further the ability to visually preview designs, but lack comprehensive consideration of context and environmental comfort factors.

As building information modeling (BIM) evolves, the building design industry will continue to work toward an ability to preview designs as accurately as possible before they’re built. But the biggest challenge is the effort required to preview changes to a design. Current standard procedures for producing high-quality renderings can take weeks and thousands of dollars to produce updated images to reflect design adjustments. Changes can’t be previewed live, maintaining a disconnect between the design process and the finished product.

Live Previewing Music Compositions

Music composition and the design of aural space present similar challenges to the design of physical space. However, with music, every performance and recording will be different. Each group of musicians will interpret the music in their unique way, and the acoustics of the space they perform in will drastically influence their sound. These differences are actually welcomed by musicians, as every performance of a piece is unique.

Despite these challenges, composers have the closest thing to live preview of the examples I’m presenting here, via music notation software. Modern notation software, which typesets music much like Word does for text documents, typically has the ability to play music back after it’s written. Much of this already happens within a composer’s head, or as a piece is composed at the piano or another instrument; the playback functionality is a way to validate that everything comes together as it’s intended. A composer can change a note and immediately play back any part of the piece as needed to evaluate the impact of the change in context. Here’s an example of how this playback sounds, via a woodwind quintet I wrote last year:

Of course, this nearly-live preview is quite helpful but leaves a lot to be desired. Compare it to the following recording from a reading session. There are of course mistakes as it’s a first reading, not a performance. But the music really comes to life with the complex textures interwoven between the different instruments combined with the interpretations of the musicians:

With no two performances identical, the ability to fully preview a work before it’s first performed is limited. But composers can preview their work with a high degree of accuracy via digital playback, in an experience that’s almost live and ultimately does an excellent job facilitating the creative process. Live preview provides composers with instant validation that their ideas are correctly represented in a written piece, building trust that the work will be performed largely as intended.

Live Previewing Digital Publications

Working our way back to WordPress, let’s look at what’s possible with digital works. Many programs enable content to be created and previewed simultaneously by presenting an interface where content elements are directly editable. PowerPoints, PhotoShop projects, and even (to a high degree) Excel spreadsheets offer a preview of the final product as you build it. Other software for creating digital content has (sometimes necessary) disconnects between making changes and previewing the results – video and audio editing software, or things that can’t be immediately rendered such as sharelatex.com show how disruptive this can be to an end user.

Despite technological challenges, most publications intended to be distributed digitally should be able to be previewed live as they’re created. Considering a diverse array of content types on the web and elsewhere, this can certainly be challenging but is possible. Physical constraints such as the context of a particular building site, musicians’ unique interpretations of a piece, or fundamental uncertainty in the estimation of structural demands and load capacity do not apply to most digital works. In designing digital interfaces, software used to publish and distribute content should prioritize providing users with a live preview of changes as they’re made, at the expense of potential technical complexity, because live preview builds user trust in their work.

History of Live Preview with WordPress

As a platform whose goal is to democratize publishing, live preview is imperative to the usability of WordPress. Back in WordPress 3.4, a first attempt to incorporate this functionality was introduced with the theme customizer, Over time this evolved to support widgets (3.9), strategically expand in scope to become a framework for live-previewing any change to a site (4.0), support menu management (4.3), add selective refresh and device preview (4.5), and continue expanding its capabilities as a framework for live preview in 4.7. User trust is the core goal in providing live previews in WordPress.

The WordPress editor has also evolved to leverage live preview (as long as themes provide editor styles), with inline media/shortcode previews helping users trust that pasting a link on its own line creates an embed, for example. The biggest problem here is that the content is taken out of context, making it difficult to accurately preview the results. Opening a static preview in a separate window is the unfortunate current solution, creating an unnecessary disconnect between the writing and previewing processes. Bringing these together in a unified live preview experience would allow users to trust that their content will display perfectly, helping to stimulate their creative process as they publish content with WordPress.

Themes and plugins can extend the core frameworks for live preview that exist currently in WordPress. Implementing features like selective refresh in the customizer is critical for ensuring that the preview is as fast and preserves as much context as possible. Themes and plugins can also leverage live preview for managing dynamic portions of complex sites, extending menus or widgets to control the content featured on a page, for example. These implementations could eventually lead to improved core functionality for site management or even more direct site building with live preview.

Future Potential

As live preview becomes more integrated into the everyday workflow of publishing content with WordPress, users will become ever more confident in the publishing process. Trusting that the end product will match what you’re creating as you make it offers a faster workflow for everyone and improves the quality of content published with WordPress.

There are many ways to expand the scope of live preview in core, plugins, and themes. I see the most substantial potential in content editing – integrating it with the functionality currently in the “customizer” to offer a unified interface for live-preivewing most aspects of a site as users build content. This will surely take substantial effort from core contributors but if more volunteers continue stepping forward to contribute, we could conceivably see content editing with live preview in core within the next year.

Themes and plugins should also continue expanding their use of live preview as a mechanism for managing their functionality. Custom sites with complex frontends are great places to implement live preview – give your users confidence to manage their own content by letting them do so with the context of live preview.

In closing, I want to highlight that the customizer is WordPress’ framework for live-previewing any change to a site. With over four years of development to date, the customize API is already the easiest and most powerful way for developers to extend WordPress, and it’s getting even better with every release. And it supports live preview for any option. Let’s build on that framework, rethinking elements (such as the interface) that should be improved, to make WordPress better for everyone that uses it. With live preview, users can truly trust WordPress.

Joining KPFF Full-time

I’m excited to announce that I’ll be joining KPFF‘s Portland office full-time starting in January doing structural engineering. If you’re familiar with my work in WordPress or music composition, you may be surprised to learn that I am not pursuing a career in either field. I enjoy making things; software development and music composition are both ways that I can quickly create and iterate on projects (and I’ll continue to do so in my spare time). Building design and construction requires a much slower and more complex process, but the creation of physical space is ultimately the most rewarding design process I’ve experienced. For that reason, I’m trilled to embark on my full-time career designing building structures.