How Bruce Wampler Migrated 600 Theme Options to the WordPress Customizer

photo credit: Matteo Bagnoli – cc

When the WordPress theme review team announced it would require theme authors to use the customizer to build theme options, many voiced their displeasure in the comments. Bruce Wampler, lead developer of the Weaver Xtreme WordPress theme, commented that his theme received a death sentence due to the requirement.

Eight months later, Wampler has changed his tune and is now in favor of the customizer to display theme options to users, “I must admit that I was among the many objectors to this requirement. After all, my theme has over 600 options, and that is a lot of code conversion,” he said.

In a case study published on the Weaver Xtreme website, Wampler describes why he’s now a fan of the customizer and explains the process of migrating 600 options to it.

Live Updates

One of the most compelling reasons he adopted the customizer is experiencing the live preview feature, “It is the WYSIWYG design paradigm, especially with ‘live update’ options, of the Customizer that have become totally compelling to me. Moving the mouse over the color selector and watching it change instantly on the site preview is just something you can’t give up once you’ve seen it,” he said.

Serious Performance Improvements

During the migration process, Wampler discovered two serious speed issues. Since the customizer processing uses JavaScript, loading hundreds of options took 30 seconds or more depending on the user’s browser and CPU.

The second issue involved overriding original theme setting values versus new values. The customizer used a WordPress filter for each option. Unfortunately, the filters ran every time an option was configured creating an exponentially negative impact on performance. If 40 options were processed, it resulted in 1,600 executions of the filters.

Wampler worked with Weston Ruter, lead developer of the customizer component, who changed the algorithm to allow multidimensional settings to be scalable. Once the change was made, Wampler was able to load his theme options in one to two seconds. The fix is included in WordPress 4.4 and will help other theme authors who have more than 20 options in the customizer.

My Experience Using Weaver Xtreme

I installed Weaver Xtreme on a test site running WordPress 4.5 alpha to see what it’s like using the customizer when it has 600+ options. It took 6-10 seconds to initially load the customizer. Subsequent loading takes the same amount of time.

Weaver Xtreme’s Customizer

I expected to see a lot of panels expand horizontally into the theme’s design, but Weaver Xtreme only uses one panel to prevent that from happening. Limiting options to one panel helps to prevent feeling overwhelmed.

Color changes happen instantaneously while other changes require the preview pane to refresh. Some of the refreshes take a few seconds to load. Overall, I found the experience to be better than configuring the theme from the WordPress backend using an options panel.

The Customizer is a Great Way to Learn JavaScript Deeply

The customizer is one of the newest components in WordPress. It uses object-oriented PHP and is primarily a JavaScript application. Ruter says it’s one of the best ways for theme authors to learn JavaScript deeply, “There is a lot to the customizer. It is a unique application with a lot of complexities. It uses JavaScript in some very unfamiliar ways to us who feel most comfortable in PHP, but this is good because it’s not just PHP written with JavaScript syntax; It’s a completely different language with different paradigms and ways to do things,” he told the Tavern.

Unlike many other areas of WordPress, there are not a lot of copy and paste solutions for the customizer. As a result of the WordPress Community Summit 2015, Ruter is making an effort to publish more articles on his company’s site that explain how to leverage specific features. For example, he recently published an article that explains how to implement selective refreshing.

Give Weaver Xtreme a Try

I encourage you to read the entire case study as there’s more to it than what’s written here. You should also try out Weaver Xtreme on a test site to experience what it’s like using the customizer with 600+ options. Wampler has proven that not only can the customizer scale with hundreds of options, it can do so at relatively fast speeds.