 Welcome back to the channel. Today I'm going to share with you a plugin that I've found that is quite interesting and it's a WordPress customizer UI plugin written by Chris Parker and I'm going to show you a couple of things that it makes really easy in terms of development and that is our web development. So if you go to any of your themes inside your WordPress or Classic Press and you go to the theme and you choose to customize it, you'll see that in the customizer we have a couple of things that allow you to change things quite easily. So if I decide to take this out you'll see that down here on my site I'm making some really big changes. So I can take that out easily. I can even change the title on my site to that. I can add of course a logo if I need to. I can change the background colors and the theme colors. I can add a new menu and I can even change other settings inside. Let's say if I was using a wu kamas or Classic Kamas it's very easy for me. Now creating more of these simple tools that will allow your site manager to make it easy for them to change is quite an appeal task. For example if I wanted you to just change this bottom pattern. In most cases in the footer we have a copyright and copyright statement and a couple of things but that's hard to change. You have to go inside the code and actually physically change it. Now as a designer I think this is the tool that literally leverages everything so I'm just going to I'll leave this link inside the description so that you can download it and try it out. So I'll download this as a zip and that is automatically downloaded. I'll go back in my backend and then go to plugins to add a new plugin and then I'll go to upload it, choose browse and then I'll quickly go to the downloads, have it there, install, then activate the plugin. So on installing this we realize we have an error so in order for this plugin to work right now as we are trying to install this we see that we actually had an error here and that is because we did not install Composer and we are supposed to run Composer on the plugin itself. So if you don't have Composer you just need to go to Composer.org and then download it and install it. There are very clear instructions on how to do this and then you can be able to quickly get up and running. So I'm just going to run Composer on this particular plugin. I've dropped it in here inside my editor and then I'm going to use the terminal in there and I'm going to run Composer, install and then Composer will install all the required dependencies and how it knows what dependencies to install is that it uses this Composer.json file and you'll see that there isn't so much for it to install apart from the auto load that comes from PHP. So let's go in and install our plugin. So I'll come back here and then I'll activate our customizer user interface and now it is working. So on install you'll see that it actually has an admin section here so let's visit admin section and you'll see that it asks you to add particular section titles that you want. Now I'll explain what the sections are as we use them. So I'm going to have a section which I'm going to call the footer and then I'm going to create the section, the click of the button and inside that it's going to ask me for control. Now for the control inside my footer I'm going to say I want to add credits or I will say the footer credits and I'll use an underscore. Either I'll use one word without a space or I'll use an underscore. You can clearly see that's what it's shared in the placeholder or the field as you put it. So either you have one word or you use an underscore. I'll leave this as one word with a pasco case and then I'm going to just add the label footer credits or I'll just make it credits for us to quickly identify that it will be a type of text or it can be any of these other pieces of information. So it can be a text I'll leave it as a text and then I'll not give it a default value or I'll say let's have copyright in here. So all I need to do next is just click create new control and we have it. So we have our idea of footer credits here. We have the label of credits and we have the text in there. Let's go back to our customizer to see what has actually happened. So I'll open this up in a new tab and you're going to see that inside here we have a footer section that has showed up right here. So inside the footer we have our credits which we can change going on from here. So how do we use this inside our theme? Currently I'm using the 2017 theme and as a developer I'm going to just insert one piece of code that will allow my website user to reuse this over and over with ease. So first things first is I'm also going to go back to my editor and I'm going to import my theme. So I'll go to wp content go to the themes and I'm going to get my 2017. So after importing my 2017 in here I'm going to go to the footer section and we'll see that we have just a couple of things in here inside our footer section. So the part that I really want to affect is probably right here at the end of the footer. We have the footer here and we have this showing up or we can add it just after the wrap. Under the wrap I'm going to add a new div that I'm going to give a class of credit and then inside here is where I'll write our PHP to allow us to use that particular customizer item. So I'll write PHP here and now it would have been really nice to have in the documentation here on how to use that particular customizer piece but I'm going to just quickly look it out and say how to use customizer wordpress programmatically. So there are a number of pieces that can help us figure that out but I'm just going to go to the codex of the wordpress and in here we'll see they talk about the setting, the section and the control. Now what we're going to be looking for is actually how we throw this on the front end and we just need this simple piece of code right here so you get the theme mod and then you add the id of that theme mod so that's what we're going to pick and we're going to throw on our front end. So after creating all of this let's explain this on the front end and what it means. The footer section here is what we have as this showing up here and if we go into the control the control is the little piece that we have here so we have the credits and we have the field that adds content here so inside this same foot I can add a new control and I'm going to say let's call this the year count here for this number and then I'll put a default value and say maybe this is 20 20 and create a control that is all done for us here so if we come back and reload we're going to go into our footer section and you will see that now we have two pieces of content here so we have the 2020 we have also our credits which is a field so we can add as many fields using the different control types that we have here we can have an email drop down pages radio select buttons color pickers images and uploads so we have the standard pieces and we have the media pieces showing up here and all this can be inside either the same section or we can choose to add another section so if we were doing maybe a one page site this would be quite easy for us to structure everything here to allow users just get all their content from here and edit it on the fly right on the front page so let's see how we can actually add our footer and our year into our section here at the bottom so we're going to go to our editor and we shall open up our 2017 theme inside our editor and then I'll go to the footer inside the footer I am going to look at this particular file and go for the div at the end and I'm going to create a new div which I'll give a class of credits I'll give it a class of credits and then inside here I'm going to start writing some PHP that will allow me to echo the particular piece of information we've added so the first thing that I'm going to do is I'm going to check if we actually have that particular piece of information fielding so we will say if get underscore theme and we're going to go for mode now that's a function of wordpress and it has either you have to feed in the name the name is equivalent to the ID of what we filled in here so for example I'm going to use our footer credits here I'm going to come back and I'm going to change this and put it inside single brackets and then we have a default here which I'll leave as blank so I'll leave this as blank and say if this actually exists if it is true then we shall echo out the particular this is so we shall echo and then we shall just duplicate this this the mode itself and then we shall echo the footer credits and terminate this with a semicolon so once we've done that let's see what happens here at the front end so I'll reload this and scroll the way down and we'll see that we have our copyright showing up right here so all that is left is for me to just style it up so I can actually just come here in theme customizer run to credits that's our class and then I'm just going to say let this be a display of block or flex or whatever that makes it easy for you will text align and say this is in the center I'll put a semicolon here to make our code valid it's in the center and you'll see it right here and then all I'm going to do is add some padding and I'll say the top and bottom should be 10 pixels and then the sides should be zero so once I we can look at that and see that it's actually working out fine so maybe I can just add 40 pixels and zero to allow this to fly off the bottom and make this zero so we have our copyright actually showing up right here and we can publish this so we can also choose to actually concatenate the two footer credits and also we can choose to get that it's off if we concatenate them so I'll copy this concatenate using spaces and a single code so I'll add period here put a space in here another period and then of course paste this and then I'll choose the year count which was the other idea that we have so I'll save this come back to our phone page reload this scroll down and you'll see we have our copyright here 2020 there and we can always just if this was given to the end user they can always just come and change this to 2021 and you will see that it automatically changes when they do so there is no need for the client to call you anymore to make this possible for you to do you can easily get this and remove this just say let's have just uh because we limited the if statement to having the footer credits with a thin mod um if we took this out then we can have both of them showing up I can even decide to just flip this around cut this and paste this here and then we can eventually just publish and see how that looks for us on the front end so reload this come scroll down we have that and we can always just add a footer and say copyright and then just do our name business name website full stop so our client can do this easily for themselves and they can have the content fresh out of the box so I really think this was the missing piece inside um what price this plugin is going to do really really really well and it's so easy to use so you can even edit the section and say I don't call it footer anymore and call it footer copy writes save changes come back to the front end publish to sort of reload reload this and you'll see that it changes here quickly our information is still showing up nothing has changed but everything here is actually working out well we can choose to delete this and everything will still be fine so this is the missing link I really enjoyed using this tool and I'm going to use it to do a fully fledged outside I'm the near future so please go try it out I hope soon it will be in version one and ready on the wordpress repo so check it out and later Chris know how you're enjoying the tool and let him know how you're using it let him know what you would like to see in the added experiment on it try it out and enjoy it so thank you for watching and enjoy your coding