 So first of all if you have a question you don't want to wait at the end please treat it with such type and we'll try to get back to you after the talk. So let's jump straight into it. Before talking about the customizer I want to have a look at what we had before. So before we had theme options which were pages they used settings API to create like custom solution for managing the configuration and look in the field of your website and they can they could be like this this from the 2011 theme or if you have built custom theme options pages you might have come across the relax framework which is a frame that allows us to create more advanced theme options and as we can see here we have hundreds of options hidden away behind those tabs or under menus we have also like different CSS styling and this takes away the user from a creative experience in WordPress and it's really confusing. So some of these disadvantages of these theme options pages are the user can get confused by all these user interfaces settings are not updated in real time and this means that the user needed to change the settings save them then constantly switch back and forth between the front and the back and to see changes and this also means that if someone was browsing the site with the we were making those changes they will see these changes too so this is not ideal and for some changes they might need a developer. Because it's easy for us it doesn't mean that it's easy for customers as well to use theme options and so they might eventually give up and call you and then take time away from you from building features. So as of WordPress 3.4 which was back in June 2012 I think we have a new site editing experience. The customizer has been introduced to WordPress and so what is the customizer? The customizer is basically a single page application inside the WordPress install and this basically split into two different sections. On the left we can see the control spanner where all our settings lives and on the right we see the preview of the website. The great thing about the customizer is that we can edit our website in real time we can see what we're changing where we're changing it and also we don't need to switch back and forth to see these changes apply this means that we don't need to save them and the end user won't see them until we're happy with them and we publish them. So as we said we have the live preview. This also helps with the same surprise feeling so user might not know what they're changing but with the customizer we actually see what they're changing or that changes affecting on the website. So we can track schedule and publish changes. We have a consistent user interface and user experience because we can switch themes and our users don't need to relearn how to use their theme options and how to change their configuration. Now the cool thing is that we can add necessary options and we will see this later on. Basically we can show only what's relevant. So we need one F so too many tabs and the user will not get confused and get a pretty straightforward and easy to implement. And also if you didn't know that they are mandatory if you want to publish your theme on work so forth. And personally I think it's good for premium developers as well because they can use it as a selling point so they can provide their users with the free version within all theme options and a page and then say like look you've got the pro version which gives you this fantastic experience for editing your website. Okay so we've seen what the customizer is. Let's see how it's made out of. So the customizer uses the object oriented programming and this allows us to make it more flexible and extensible. You don't need to be familiar with the object oriented programming to use it but obviously the more you know the easier it will be for you to understand what's going on and how to extend it or to fix bugs in your product. So these components are panels, sections, controls and settings. They are each managed by a class and we also have our class which is the WP Customize Manager which is basically our wrapper on top of the other components and it allows us to easily extend the customizer. And as we can see here the Customize Manager class gives us a few methods, one for adding a component, one for getting a component, one for removing a component. Okay so the first component are the settings. Settings are basically the data that we store in the database and they are managed by controls and we can find them in the WP Customize Setting class. So out we are the setting we hook into the Customize Register action which provides us with an instance of the WP Customize Manager which has a hard setting method. We pass the setting ideas the first parameter and the second one is an array of arguments. These arguments can be the type which can be theme mode or option. We'll see the difference shortly. We have the capability so basically we can restrict the access to our setting to specific users. The theme support as well flag is basically test the customizer to show that setting only the current team supports a specific feature. So for example if your team supports the customizer feature, the customizer will run the customizer section to allow you to manage your customizer. Then we have the default value for setting the transport method which is basically awaited by the customizer which tries to do to use to update the preview when our setting changes. And we also have a callback for validation and sanitizing. So yeah one thing to keep in mind is that these prefixes are reserved by call so we can't use them. And yeah as we said there are two setting types. One is theme mode and one is option. Theme mode basically uses the theme modification API and it stores your data into a serializer as a single entry in the WP option table. They both save our data in the WP options table but in two different ways. Yeah theme mode are specific to theme with options can be used with any teams or planning and they are saved into a test type on the slide but they are saved into separate entries. However the customizer allows us to pass key value arrays for options as well so they can be saved as a single entry. But even if you stick with those you can also add your own types either by subclassing the WP customized setting class or more easily you can just pass the type when you register in your setting. But you should know that if you pass your own type you need to handle the preview and the update of your setting by yourself. And WordPress helps us with these two books for reading news where the setting type part is the name of your setting. So how can we retrieve data? Basically it's the same part we actually use two different functions. So if you use theme mode you have to get the mode function otherwise you have the more familiar get option. They both accept the idea of our setting at the first parameter and the default value for the second one. Okay the next component are controls they are managed by the WP customized control class and they are basically a user interface for our settings and they must be associated with settings. So where these are controls we use the out control method we pass the setting idea as the first parameter and the array of arguments. These arguments can be the type which is basically any html5 value input type. The priority in which they will be rendering the customizer inside of sections capability again the section which is required and is the section the control belong to. It can be a core section or your own section. Label and description speaks for themselves and the choices can be used with the radio type or the select type. We can pass a key value array where the key is the actual value that we can store in the database and the value is the label that's shown in the drop down. If we need to pass custom html attributes we can use the input attributes flag. The allow addition is only used with the drop down pages type which is basically our setting with all the pages we have on our website and if we set this one to true it will allow us to create a new page directly from our control instead of going to pages in the admin. And then we have a active callback which basically can we can show our components only when they are relevant. Okay so yeah this is the time since basically as you can see all html5 input type is accepted and you can also extend them. Core already provided us with a field and there are more at that link and you can also create your own custom control. If you create your own custom control the way to register your control is a bit different so this time we still use the add control method but we pass the a new instance of the control class which accepts the customized manager instance as the first parameter set to make yes the second one and the array of arguments as the third one including custom one and this is how the code is found on the frontend. Okay next component is sections which are basically containers for controls. They are managed by WP Customized Section and one thing to note is that they only appear if there are controls related to it and we use the add section method we pass the section that is the first parameter and the array of arguments is the second one. Again the priority in which they will be shown in that controls panel. If they belong to a panel we need to specify the panel id here capability, theme support, title description as we've already seen. The type I think it's only used by custom sections I've never used it with a reactive code again the description isn't flat basically it does the customizer to if set to true it does the customizer to hide the section description behind the help icon so we can make more room inside the section. Last component is panels and they are containers for multiple sections or and or like entire different functionalities for example the nav menu's panel or the which is panel. It's described by the theme and look to use panels to group different sections but I actually used them to to group all my sections I think. So I think our panel is pretty easy and it's a lot different from sections the only thing that changes is the method that we use this time is our panel the panel id and then the array of arguments pretty much the same as the sections. Okay cool so we've seen what the customizer is how to extend it and so now we we might expect that everything would be like real time and when we change the settings it would be instantaneous but this is not the case and this is because of transport methods which are basically a way to to tell the customizer how to re-render your changes. By default they are set to refresh which as the name may suggest is our full page reload and this can be pretty slow as we see here because we need to reload and type page every time we change a setting and it's not very real time and also you might get away with it if you have a small site if your site is bigger and there would be more installers of experience with this lower. So to overcome this issue we could use the post-message method which is basically a method to enable communication between the controls panel and the preview panel by JavaScript as we can see here when we change our site title it's pretty instantaneous. Unlike the refresh method there are a few additional steps to follow to enable the post-message transfer method so in PHP we need to set obviously the transfer method flag to post-message then we need to use JavaScript and it's not nothing more difficult than this little snippet which basically binds our setting to our specific element on the page so for example in this case when our blog name which is the site title changes the element with the class of site title we allow the instance and we also obviously need to queue our JavaScript file we use the customized preview in it action and we need to make sure that we pass the customized preview and jQuery scripts as dependencies. Okay so this is great it's real-time it's instantaneous it's cool but there's a caveat for us developers and the problem is that with post-message we need to duplicate our logic both in JavaScript and PHP and this means that we are violating the fly principle to repeat yourself. And a bigger issue is that let's say for example that you all set things as a filter applying to it or your content comes from a WP query this kind of stuff are really difficult to reproduce in JavaScript that's why as of WordPress 4.5 a new framework has been introduced in the customizer and this has been selected refresh framework which basically allows us to render specific part of our site and so we just need to run those parts and not the old page and this is done by Ajax so we make Ajax calls to fetch the render PHP so the advantage is that we have a clinical base because we are expecting the fly principle our code is more readable and maintainable we have a more accurate preview preview update because as I said if sometimes with the post-message the result that you see in the customizer is not actually the result that you will see on the front end and this is because as I said your setting might have a filter applied to it and yeah we can also associate parts of the preview with the related controls so we can see it we have a little icon next to our description and we click it we are taken to the right section in the customizer and we can start and this is so cool that it's it's also used by widgets so before seeing that we have a look how we register our patient so we use the app partial method we pass the setting it is the first parameter in the real arguments as a second one which accept the selector which is basically the element on the page so it can be a class or an id or a time whatever you want the container inclusive flag each set to two tells the customizer to refresh the old container each set to force a real refresh on the content the render callback which takes care of rendering content and the fallback refresh which is set to true by default and basically that's the customizer that if anything goes wrong it will actually load the whole page so as I spoiled before we widgets are compatible by default you just need to add support to your team and all of course we just rework out of the box however if you have a custom widget you will need to do a few stuff the first one is to set the customized selecting refresh meter flag to two when you are constructing your MVP widget class and you also need to make sure to and queue your scripts unconditionally so that the page don't need to reload the page the customizer don't need to reload the page to fix the CSS changes it's easier about it okay so that's more than we can do to enhance the experience of our users we can make our components contextual by this I mean that if we have options that are dedicated to specific pages we can show them only when the user is previewing those pages or if we can create dependencies between those options so we can see here on the 2017 team we have these controls on the on-page and if we switch to the about page they will be in a way the same with like on the on-page we have our work and prone custom section custom balancer and then when we switch to the about page it's gone because it's not relevant anymore you can use basically any core function or your custom function that's one thing to note is that the active code that receives the customized manager instance has the first argument so for example if you're using this class in each page which accept the page ID or title as a first argument you need to use either an anonymous function or create your own function to wrap that core functionality another good thing that we can do is validate settings so before WordPress 4.6 we only had sanitizing for section this means that with sanitization we clean the values that the input of the user just before we are saving into the database and if something goes wrong the user is not notified so it might not know what went wrong as a WordPress 4.6 as I said we have validation and the validation takes place before setting the state if the input is not valid the same request is rejected and I know this has been shown to the user to tell them what went wrong we can see here that we have custom control we only accept integrals so we see you must apply a value here we can add a value here if our value is less than 1900 or greater than 19 there is two new or two old and when we publish the customizer projects are changed so we know what we need to to fix another thing about the customizer and the one covered this today is that it has a really robust JavaScript API you can basically do whatever you want for example you can dynamically show a nine controls based on another setting value so let's say for example you have a slider and you have a flag to say activate slider when it's set to yes you can show control for the image or one for the text when it's set to no just controls will be hidden away another cool thing that you can do is you can navigate to a URL when you click on section or you can focus parts of the preview area so here is the JavaScript API section in the customized API handbook or if you want to take it to the core to the code you can go there and that's this talk by western router which is basically the lead developer for the customizer he gave this talk at work on qs last year and it's we're really cool i highly recommend you to watch it so now i just want to show you a few feature of the customizer so one thing that we can do is we can change and preview these either install teams or things from the word festival river example you can start this theme and preview it here we can see that thing you can start editing if we don't like it we just go back another cool functionality is that we can preview a sign up on tablet and mark on this little icon down here you can for example create new pages directly from the customizer and add a new item new page and add it note that these are just stops so you will need to add the actual content later a cool thing is the css section where you can basically add your css this can be dangerous so i usually disable it because end user don't need it but if you need it's there and the cool thing is that now it has um house complete it also has a linter so it says unknown property background yeah yeah yeah that's because i wanted to show you the linter so it tells us what's wrong and we can change it one thing that's been added by on the WordPress 4.9 is the change set so we can now save our changes as drops we can schedule them the cool thing is that we if we for example save this change we can use the this url to show our website with the actual changes to a client this is good because for example if a client asks us to to make a change we can do those changes show them with this link and wait for their their program to actually publish them we also have the the log feature so for example in post you know the one someone is editing a post you see a little notice look and set your post now we have the same for the customizer so here we have a few resources which uh the link is like on twitter after the little so you might be wondering should we use the settings api or the customize api but i'll say useful because they this are different purposes so if you don't need if your settings don't need to affect the front end or quickly settings api otherwise always use the customizer that's it from me thank you very much