 Y gyflawnio wedi fally'n achos y cefnodd maen nhw'n gwybod wedi'i ddefnyddiannio'r ysgolodd, ond iawn mae'n ddiwrnod yn hi yn gwisio arall. Fodol ythyniad ddweud yn ystyried gynnig ac mae'r perthynadau yn ei dweud. Mae'r admonio, a hynny mae'n bwysig panel a maet yn gyffredinol gyda'r adonai. Felly mae'n amser. gan ydych yn y gyfriseid, yn y cyfraseid yma ychydig yn y gweithfyrdd, yn y position ar gyfriseid yma, a dydych yn wych yn rwyf am y cyfriseid yn y dyfodol. Ac allaf yn gweithio ar y cyfriseid yn 10,000 cyfriseid y hwn o ddiogelau, yn yr un o ffordr o'r cyfriseid, y gallwch chi weithio allu chi'n gweithio'r cyfriseid page by mistake. So, customizer to the rescue. The customizer is a much better way, a much better user experience when you want to edit your theme, edit what your site, preview it instantly and then be able to make changes before they actually go live. So I'm not going to go into all the details of the customizer today, but I'm going to talk about how you, with a few simple things, you can make the editing experience better. So, first of all, widgets. Most themes have widgets or support for widgets and especially, I don't know, how many of you have tried a Genesis child theme or some other premium theme that had like 10 widget areas. I see a lot of premium themes they play with the fact that they've got lots of widget areas so you can put lots of different things in there that the theme developer maybe didn't think about in the first place. But editing widgets in the admin with 10 widget areas can be pretty messy because then you need to figure out which widget area controls which part of your site and then if you do the change in the admin, the same thing again that I just told you about, you have to go to the front end and then you might break something. So cool, but in the customizer you can edit widgets, but it can also be messy in the customizer if you've got 10 widget areas and you have to figure out which one is which and then there's no correlation between, you don't know whether widget area one is this or maybe it's in the footer or you know. So, with one simple change to your theme, you can improve the experience significantly. Only in recent WordPress versions you've been able to do this, simply add theme support for customized selective refresh widgets and if you're running WordPress 4.7, when you've done this, the experience will be something like this. So, we have nice shortcuts next to the widget that take you straight to the widget in the customizer and now it doesn't matter anymore whether you've called your widget areas just you know, sidebar 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 because you've got nice shortcuts and it takes you straight to the widget. Actually, I found out that apparently in already previous WordPress versions you could shift click on the widget and it would take you to the customizer but how many of you knew about that? No one. Sami knew, yeah. So, one out of, what, 200. Okay, so widgets, okay, widgets are cool but let's, you want to see more, more stuff about the customizer. So, I've got this example related posts component. I've decided to write my own related posts code because I wasn't happy with all the 100,000 related post plugins that are on the WordPress plugin directory. The code could be something like this. I've got, getting the categories for the post and then three posts, displaying three posts that are related to the categories on the current post and then I've got a nice loop there but I want to be able to edit the number of posts that are shown in, at the end of each post because I might have, I might want my theme to apply to different sized sites and it might be appropriate on some sites to have just maybe three and somewhere it might be appropriate to have 10 related posts so I want to be able to edit that. The customizer is built around objects so there's panels, sections, controls, each control is linked to a setting and then optionally, partials which we are going to talk about a little bit later. If you're building a theme, you usually don't need to worry about panels but you do often need to think about having a custom section for your controls and then building a control and a setting. So all the magic happens inside this customized register hook and all the code I'm going to be showing in the next slides goes inside this function, customized test, customized register. You can call your function anything you like of course but you need to hook it into the customized register action and we get this WP customized object that has methods for manipulating the relevant objects, other objects in the customizer. So first let's add a section. WP customized add section. We give it an ID that has to be unique, related post section and then we can pass in an array of options. You've got to pass in a title because otherwise the section won't have a title but the priority is optional but often you want to define a priority because it will affect whereabouts in the customizer pane it will be shown. So we have a section then we need a setting to store the number of posts. WP customized add setting is the way to do that and you can get away with just giving it an ID in this case related posts number but you should pass a sanitize callback which in this case is absent which is a built-in WordPress function that turns the number into a positive integer and then you can give a default value which is a good idea to do in general and there are lots of other options too but I'm not going to go into them right now. So we have a setting and then we need a control to make it visible in the in the user interface. The control takes the same ID as our setting in this previous slide related post number and then some options of its own so it has a type. The type can be anything any valid HTML5 input type so you've got number, text, check box anything and it can also be select text area and then there are loads of custom controls that are built into WordPress like color controls and then you can build your own as well but I'm not going to go into that today. Then you need to define the section so that's the section ID that we had here post section and a label for the control so we need a section, a setting and a control and that's all you need to build a customizer control of your own. Getting the data is straightforward so in this case by default each customizer setting is a theme mod which is different from an option in that it's stored with a theme so you can switch themes and the settings go along with a theme and it doesn't if you change a similar setting in another theme it won't affect the setting in the previous theme. You can also use options you can define if we look at our setting here, there, no sorry there you could add a type here to define that you want it to be an option but that's a good idea if you're building a plugin but maybe not for themes. So back into our original code we're getting the number of posts slapping it in the related posts query and now we have a working customizer control and there you see I'm editing the number of posts and the preview is refreshing but there are some issues with this. For one thing there's a full page load every time we change a setting which can if you've got a really heavy site it can be actually pretty annoying. There's no visible editor shortcuts and the setting is visible on all pages which doesn't make sense if we're in a list view but now I'm going to present a solution to the first two points and the third one will be an exercise for maybe tomorrow's workshop. So we just register a partial. It takes a little bit more code than registering a setting but otherwise it's pretty similar. WP customised selective refresh add partial. We pass it the ID of the setting related post number and then some options. It needs a selector because the customizer needs to know where on the page that control where the data lives. Whether container inclusive just defines whether when we refresh it whether we're refreshing the what's inside the selector or the whole thing and the most important thing is the render callback which actually then does the refreshing and the cool thing about this is that customizer test display related posts the function in this case is exactly the same function I'm using in my template so you don't need to duplicate the code or the logic for displaying your component. One more thing you need to do to the setting is change the transport option from the default is refresh but then that will it will give you a visible editor shortcut but it will refresh the whole page so we want it to we want it to only refresh our component so you need to change the transport option to post message and then we have something like this. Now it's only refreshing the related post section and everything is fine and dandy. So what's next? This is a quote from the mate WordPress org blog. There's a lot of you might know that there's a lot of things happening in the customizer development at the moment in addition to the editor and those things probably going to mix at some point but I found this very interesting that this might be a step to eventually just editing things directly in the customizer and not actually jumping into the edit pane so I think we have cool times ahead of us. This is a screenshot or a video from customized post plug-in that you can actually download from the WordPress plug-in repository which allows you to just edit post directly in the customizer. I don't know if the core is going to go this way or whether it's going to be more kind of block oriented which is what I've heard but nevertheless you can try this out today and it works pretty well. I hear there's still room in my workshop tomorrow so if you don't know anything about the customizer this workshop is definitely for you if you want to go through again what I just showed you today and then a few some extra examples but if you're already like advanced you have advanced knowledge of the customizer then probably tomorrow's workshop is not for you. I should probably attend your workshop if you have advanced knowledge of the customizer. So thank you. We are hiring by the way. I work for Zealand family so come and chat to me if you're looking for a job. Thank you very much.