Customizer Typography: A Proof-of-Concept Plugin for WordPress Theme Authors

One option that users often appreciate in themes is the ability to control typography without having to modify any code. Justin Tadlock has been experimenting with adding a typography control class for the WordPress customizer.

Instead of writing a lengthy tutorial, he opted to create a a proof-of-concept plugin that demonstrates how theme authors might accomplish this. Customizer Typography is currently being developed on GitHub and Tadlock said it is “only meant for development purposes and to show one method of executing the idea.”

customize-typography-screen

The plugin was created to provide testing for two things:

  • Testing a customizer control class to handle typography
  • Tying multiple customize settings to a single control

“The most important was not having to add tons of code while still providing the developer complete control over each setting,” Tadlock said. “Fortunately, the Customization API in WordPress is pretty powerful and allows you to tie multiple settings to a single control.”

The plugin currently provides controls for live previewing both paragraph and headings with various font family, font weight, font style, font size, and line height options. Integrating Google Fonts is on Tadlock’s to-do list, but at the moment he’s not working to build out the plugin as the ultimate solution.

“Just to be clear, this is a proof of concept that I put together in an afternoon, not a polished solution,” he said. “The idea, for me at least, would be to eventually extract it and put it into themes.”

I installed the plugin to play around with Twenty Fifteen and found that the experience of live previewing typography changes is very satisfying from a user standpoint. Although many custom theme options panels include basic typography controls, you often have to refresh the page to see how your changes applied. This kind of control is a prime candidate for integrating into the customizer.

Tadlock’s example typography control class gives you a glimpse of what’s possible for theme authors who elect to build their options using the customizer. It’s these kinds of controls that truly solve a frustration and make it easier to personalize themes. The Customizer Typography plugin exemplifies the purpose of the customizer.

You can check out the plugin on GitHub and install it to see the live previews in action. If you’re interested to learn more about building with the Customizer API, Tadlock published a post on the Make.WordPress.org/Themes blog that contains a long list of customizer tutorials and documentation.

24 Comments


  1. Realise this is a proof of concept but would refer to Themes with Visual Editors and in effect customisers without code that already are quite sophisticated in Theme frameworks aka HeadwayThemes and others. It provides for extensive typographic controls is very user friendly etc.

    To do all of that within the confines of the ‘Customizer’ seems a shame not to learn from existing editors that already do this quite ably in existing solutions. I do of course defer to Justin’s superior knowledge on these matters. But just a thought.

    Report


    1. Any developer building such a feature in the customizer would want to learn and copy from existing solutions. It’d be silly not to do so. However, just because a solution exists doesn’t mean you stop trying to innovate and build better (or just different) solutions. That’s half the joy of programming.

      Report


      1. But who has ever said the customizer is better than any of the comparable solutions from Wix, Squarespace, Tumblr, Clickfunnels, for WP Headway and the rest of them?
        I have honestly not seen anyone write that the Customizer is better than anything, except better than not having it. Being different is not good in and of itself. Innovation means innovating, the Customizer is not an innovation, it seems to be more like an improvisation.

        Report


      2. Personally I like Customizer, I do there a lot with my theme what fully supports that. Customizer is my favorite, maybe number one feature in WP.

        Report


      3. Of course Justin but would be good if the article maybe cross referenced to plugins that exist and themes that have related capabilities. It’s the wider debate about shape of the future re WordPress as well as the Customizer that I was concerned about no criticism of your experimentation was meant or intended. Thanks for your response much appreciated

        Report


  2. Why are you bringing down something that I have built? If you don’t like the solution, go build something else or use a different solution.

    Our community should be about uplifting people and providing a positive experience for developers. Imagine if you had wrote your reply to a new developer (and not someone like me who’s been around for a while). This thing this new developer built might have been what they consider their greatest creation yet. It doesn’t matter if it is the best thing since sliced bread. The important thing is either helping them to improve the code or just saying, “Awesome!” so that they will feel good about what they’ve built.

    Report


      1. Understood. I think Andreas Nurbo is just criticizing the Customizer in general, which is fine but there are much better posts where that comment is more applicable, as this one is simply introducing an interesting new approach for devs who want to support typography controls while using the customizer.

        Report


    1. It was a general remark about the Customizer as a tool which it self is a couple of years old. That you are working at showing how to use it is all fine and dandy and my remarks had nothing to do with what you had done with the example. I do wish Core itself had more default controls it would help with the adoption since that seems to be the goal.

      Report


    2. Ignore the haters!
      I love this work, Justin. I can’t wait for it to be a little more than proof of concept and a plugin we can use easily. Typography is super important and being able to customize it more or less on the fly is a great additional functionality!

      Report


  3. Sweet proof of concept, Justin! Thanks!

    Sorry that your work on this plugin is getting pulled into the bigger Customizer debate. The backlash from the Customizer stuff is getting out of hand – it’s like watching Fox News. :)

    Report


    1. Agreed.

      It seems as if some folks want a fight. The loudest voices of opposition are the ones that are least informed.

      Attacking Justin as if he were Lennart Poettering is not going to get WordPress improved one bit. Leave the drama at the door.

      Report


    2. I’m glad you like it. I’ve been meaning to put together some more customizer tutorials and examples. I’ve finally found the time/motivation lately to get to work on them. Let me know if you have any ideas.

      Report


  4. I like the idea of adding typography to the customizer and taking the burden of loading the font resources off the developer or end user. Controls like this, though, tend to lead me to wanting to write a more robust solution which, in this case, would be a control for modifying virtually any css property on a given target.

    Here’s how my brain usually goes: You’ve got this control with font family, size, weight, style, and line-height. Ok well then, text-align and text-decoration is certainly related so lets add that…and we should probably include color, cause that’s the text color after all. Then aren’t color and background color choices usually related?….and now we’re looking at what a true background control would look like, and so on. Ultimately what I arrive at is a control that takes a CSS selector to target the element, and offers groups of controls to modify virtually anything css can do to an element. The theme may choose to disallow certain groups of properties on certain elements. The bottom line is, when I open customizer I don’t want my themes to have 6 font controls for my headings and 6 color controls for my headings. I simply want to style my headings.

    Understandably, this is MUCH more complex and quite an undertaking but isn’t that ultimately a more future-focused conclusion than adding another simpler to the customizer? Perhaps this font control could be thought of in the context of a larger-scope control. That aside, Justin, I really do appreciate the work you guys are doing in core to move the customizer along.

    Report


    1. Ha, this exact thing was going through my mind while building this. I was like, wait, I can add text-transform and font-variant too. :) I had to stop myself from going down that path.

      For my own personal use, I’d probably allow a few font-family choices for entire groups like body copy, headlines, etc. Maybe add some limited font-size choices. I don’t know for sure though until I utilize it in a practical application.

      Report


      1. I guess the real question is who are you designing the customizer experience for? I’ll be the first to admit that just mirroring API out to the UI is not a solution (you really want your users seeing floats? display: table-cell? pointer-events! no way…).

        But I also know that out of the ~100 websites that I currently help design/build/maintain for my agency’s customers, less than 15 of those customers actually go edit their website themselves (that’s what we’re there for), and they certainly aren’t messing with customizer. Instead, I need to make it easier on my team of designers/developers to construct and maintain these sites for our customers. Right now, neither the WordPress theme format nor the customizer is really focused on making WordPress a great place for designers and developers to do their work.

        Btw, maybe a way to approach the whole “one control to rule them all” concept without diving into the deep end is to design a parent control that can have these “groups” of simpler controls added to it using actions/filters so that you can continue working through the typography idea on its own, but with a broader scope at the back of your mind. Personally, I wouldn’t mind working on a more comprehensive set of background controls.

        Report


  5. Great stuff, Justin. I’m looking forward to a future where the customiser is king and I don’t have to deal with silly bespoke customisation panels anymore! Keep up the good work.

    Report


  6. I love how Justin understands when it’s more appropriate to write an example than it is to try and describe everything in detail. Some tutorials are a nightmare to follow, Justin’s always make complete sense, particularly in this case where it’s not much more than an example of how to do it.

    Report


  7. Awesome job Justin with the type plugin concept; I would like to see that integrated into the core or more themes. Seems like a great feature that’s helpful.

    And thanks Sarah as always for writing. I really enjoy the posts on this website from yourself and the other guys. Helps me feel less isolated from the rest of the WP community, and helps me to stay aware of what’s happening and what new features become available to use.

    Report


  8. Where did my comment go? I was simply suggesting a plugin that might do what Brent is describing and letting Justin know that I really appreciate when he makes proof-of-concept plugins like this. Oh well…

    Report


  9. For those that don’t already know there is also this free plugin to add Customizer Typography Controls (already supports Google Fonts) – Easy Google Fonts -https://wordpress.org/plugins/easy-google-fonts/

    I’ve found it to be quite easy to integrate into Themes and consistently awesome, reliable and stable. Typography in the Customizer is an excellent concept which this plugin proved (to me anyway).

    Report

Comments are closed.