22nd April 2016 in Wordpress

WordPress Theme Customizer Builder: The Story

I am Alok Jain, co-founder of WTCB and here is the background and story of why this tool can interest WP community.

WordPress Theme Customizer: History and Pain Points

Before WordPress introduced the Theme Customization API, in WordPress 3.4, the WP programmers used to create a Theme Customization or Theme Options section in almost every theme (particularly in Pro themes). It allowed theme users to modify common theme settings for color, fonts, copyright text in footer, etc.

Gradually, these theme customization sections or pages became really extensive and powerful. This became so important for Pro themes that developers started talking about it as the most important feature of their theme, while selling themes at marketplaces.

However, there were issues. Users cannot preview the changes as they can see the changes only on the live website. So, experimentation for styling was always time consuming and annoying because of absence of live preview.

Theme Customization API: Opportunity and Problem

The Theme Customization API solved the issue by helping users see a preview in real time, within admin area. And it was welcome by the WordPress community.

The Theme Customization screen (i.e. “Theme Customizer”) allows site admins to tweak a theme’s settings, and see a preview of those changes in real time. But there were still some concerns. For instance, writing the code for Theme Customizer is time consuming, you need to write code for panels, sections, and settings and controls. And repeat the code for different controls and settings.

I struggled like any other WordPress theme designer, and soon, the idea of Theme Customizer Builder was shaping up.

WordPress Theme Customizer Builder

I started exploring an opportunity to automate the process for creating theme customizer. I discussed the idea with a few WordPress specialist friends, and they found it a worth-trying effort. So there was a plan where I will work with my wife Jaspreet, to give some shape to “WordPress Theme Customizer Builder (WTCB)”.

01 - Theme List

This WTCB allows you to create Panels, Sections, Settings, and Controls, just by clicking on what you need, and filling up small forms for the control name, description etc.

As you create the Theme Customizer, you can see a real time preview of how the Theme Customizer looks like, when implemented in your theme. (Thanks to AngularJS.)

More coffee and more code and I see this tool coming up with the right purpose. We are hopeful to launch beta version in start of May 2016. A quick recap of what WTCB is:

  • Helps WordPress theme developers build a Theme Customizer by using a UI
  • See a preview of Customizer for how it will actually look like in real website
  • Option to add/update a variety of common controls that we see in WordPress themes
  • You can continue your current coffee or beer intake as the tool is absolutely free for basic and important features

Future plans for this tool

We start with the basic controls that WordPress offers. Soon we plan to add more powerful controls to help users develop extensive Theme Customizers.

Since this tool is for WordPress community, we will ask people to vote or advise what next they want — for more controls or features. Our roadmap may be shaped by what the community needs.

When I see how the tool is developing, I am happy to see that it will solve my own Theme Customization problems. I hope that it does the same for any WordPress programmer. You try it and find out yourself, particularly when it does not cost you anything.

Write your questions or comments below. If you think that WTCB has solved your problem too, or if you like this story, I will appreciate if you can share it in your community.

Originally published on Medium.

About the author

Alok Jain

Alok design digital experiences to help businesses achieve their goals. He is passionate about designing right User Experience for their customers. For over 15 years, he have worked with small startups to mature product teams. Whether it is designing a WordPress product, a frontend experience, WooCommerce, Shopify, he follow the best product development practices for design and code, for desktop or mobile.