Building themes with the WordPress Customizer

WordPress NYC Meetup at New Work City NYC on May 19 2015
http://www.meetup.com/WordPressNYC/events/222345560/

Last month, the WordPress.org theme review team made a new requirement regarding theme options. They are going to be requiring use of the customizer for all options from now. This applies to all new themes, submitted after April 21. Existing themes at WordPress.org have until October 21 to make the change.

In this presentation, you'll learn just how easy it is to integrate the WordPress customizer into your themes. We'll also explore ways to extend the customizer to make it do more than what's available out of the box.

PRESENTER: Thad Allender

Thad Allender is the founder of Graph Paper Press, a WordPress theme design and development studio, and has been working with WordPress since 2005. His themes are available on WordPress.com and WordPress.org. Previously, Thad worked for USA Today as a photographer and multimedia producer. He is a native Kansan who currently lives in Brooklyn with his wife Abby.
https://graphpaperpress.com/

More videos: http://wpnyc.org/video/

Hello everybody.

I am going to speak about the WordPress

customizer. My name is Thad Allender.

I am from a very small town in Kansas that I

guarantee nobody has ever heard of. So, I won't even

[audience: Unclear...so small...it's so tiny.

Sorry. Is it really?

[audience] What is the town name? It's so tiny I can't

see the town name.

Speaker: Yea, it is not on there.

[laughter] Speaker: Very clever.

I was the director of photography. So, my background

is in photography.

I moved to DC and was a multi media producer for

USA Today. At the same time I founded

Graph Paper Press which is a WordPress theme

company. We make minimalist stuff.

for photographers and the creative community.

We just launched a new thing called Theme Works.

I am going to use what I've learned over the last few

years and talk about the customizer, why it is pretty

awesome and why you should use it.

How many people started building static website

as their first foray into the web? Ok, as we know

static websites suck, right? They were horrible to

update. They take a really long time to change

navigation links and this kind of stuff. So, some smart

people got together and started making dynamic

websites. First, it was pearl websites.

Who used Movable Type back in the day?

Ok, so me and you, we knew about Movable Type.

It was a dynamic website. All of the sudden my website

froze one day. I started exploring other options. Some

of my friends were into python and they

said, "Hey, you should check out this new thing

called WordPress." So, there was this big mass

migration 2004-2005. Everybody started loving

WordPress. Well, as websites became dynamic

people wanted to make all aspects of the site

dynamic. Their logo easy to update and their fonts

easy to change. All these developers started to

roll their own code. They made these huge

verbose theme option pages, right? Who all has

either rolled their own theme option page or have

used one that looks nothing like the WordPress

admin interface? Ok, so a couple of us. Let us take

a look at what they look like. This is an admin

interface for a theme option panel that is crammed

into WordPress. This is probably what some of us

remember or some of us might even use in some of

our themes. It is bad, right? It is like an admin panel

inside of an admin panel. Here is another one.

We've got DV business line options and a bunch of

text and it is a proprietary theme option page that

a developer built because there was no consistent

way to roll theme options into WordPress.

This last one is my favorite, right? "Don't panic!!"

Well, if it says panic it is don't panic.

It is right on the very fist page that you land to start

changing elements of your theme design. All this stuff

is really bad. It is kind of like inception. You are in

a website that is making changes to your theme

on a theme options page that is changing the front

end of your website. It is very difficult to understand.

There are many different layers of admin panels

that make the whole process of updating your

website confusing.

A theme that builds other themes is kind of bad.

So, it all had to stop.

It all stops with the customizer.

The customizer is a new thing.

Who has used the theme customizer in WordPress?

A quick show of hands. Ok, 10-20% I would say.

So, customizer kind of hits on a core principle

related to code that is true just in the real world.

Why reinvent the wheel? Mark Twain said, "There is

such thing as a new idea." That's very true.

So, instead of rolling all these new proprietary theme

option page let us just make one thing and have all

theme developers use the same approach?

So, there is no such thing as a new idea.

It is impossible. We simply take a bunch of old ideas

and put them through a new sort of mental

kaleidoscope, he said. We give them a turn and they

make new and curious combinations. We keep on

turning combinations indefinitely. But they are the

same old pieces of colored glass they have been

using throughout the ages. So, Mark Twain said

that. Around 2012 Daryl Koopersmith, a really

smart developer and a core developer started working

on this consistent customizer api. Developers like me

were very eager because of all the themes that

we make, we wanted to have a consistent user

experience. And we didn't want to rebrand the

WordPress admin interface to make it a confusing

experience for users and developers. The customizer

is a couple of things. It is an api. It is a set of

standards that developers can build and customize

theme options and add to WordPress. It is

sanitizes your data so there is a lower risk of

vulnerabilities that Steve was just talking about.

It is extensible so you can add to it if you'd like.

The best thing is that it is really easy to build untop of.

It is really easy to integrate into themes and it is

incredibly easy to use.

This little customizer link, if your theme supports this,

you will have this customizer link underneath

appearance inside WordPress. Once you click

on that, depending on the options that your theme

supports, you will have a lot or a few options

show up. And this is the customizer.

OK. On the right we have a live preview of your

website. On the left we have all the options that

are available within this theme that control the design

aspects of your website. Before we go into show

code examples. and how to actually get this stuff

working if you want to build a theme I think we should

all step back and ask ourselves, "Should we even

do this?" Because, as you know, as Steve was saying

every line of code is a liability. It has the potential for

a security vulnerability. Our goal is to write as few

lines as code and manage as few lines of code on

our websites as possible. There is a that, "We should keep

it simple, stupid." KISS is the acronym.

Awareness of long term implications of verbose and

lots of code goes a long way, as well as knowing

you can hard code things into your website. It will

save you a massive amount of code overhead.

Here are reasons why I think you should integrate with

the customizer. If you are going to release public

themes. Who has released a public theme? A theme

for public downloads. Two, if you are making client

themes, if you are going to have consistent changes

to your website such as a slide show. It probably

makes sense to not go into code and cowboy some

approach, it probable makes sense to integrate

some programatic approach to your theme and

integrate with the customizer. Or, you could have

an undefined scope for a project you are working on.

Your client really has not been able to pinpoint

exactly what they want. You are kind of left guessing.

And because you are left guessing you give them

options. Here are some reasons you shouldn't.

On your person theme, there is no reason to integrate

the customizer on your own personal theme. You can

hard code that stuff and it is probably easier to

integrate. There is also a 'no' argument for client

themes. You could have a relationship with a client

where they come to you because you control code

quality and you don't want them tweaking things.

If the site you are building doesn't require any

changes and there is not need for the customizer.

And if you have a very clear scope and everything is

button down and there is not reason to integrate the

customizer. There are four basic building blocks

for using the customizer in a theme or project that

you are working on. The first one is panels.

The second is sections.

Then settings. And controls.

So, what you are looking at on your left are

six different panels. There is a general panel,

topography panel, colors, headers, sections and

widgets. You can see that it is a panel because

the arrows are on the right.