 Thanks very much everyone. I'm just going to jump right into this here. Who am I? Bill Gilmore. I'm Bill Gilmore on Twitter. If you want to help me up, I will 100% follow you back. Get some sort of WordPress community going. I don't want to dwell on this too long, but I just want to let you know who I am, not too big myself up, but more to give you context of why I'm telling you this stuff today, okay? So essentially, I am a front-end developer. I work at Flynn Studios. It's a really exciting development house that we work in. We're currently recruiting and expanding, so if any of you are front-end developers, back-end developers, and you're looking for a new challenge, let me know because we'll be really interested to hear from you. At five years' experience building WordPress themes, I use HTML, CSS, JavaScript, a little bit of PHP, which we're going to look at today, but I'm not a PHP developer. A lot of WordPress API logic is why I...come on in. So I'm also a little bit of an obvious JS application developer. I recently developed a to-do list app, which I released on the App Store, and I've doubled with a couple of other things like search engine, jQuery, power that I made and stuff. So I'm also a huge WordPress family. We used WordPress for a self-posted blog back in 1999 with my boy, Christam here, where we would blog about literally the most uncorrelated stuff ever. I think it was just the excitement of seeing our written word on the Internet was half as a bum. Then I learned a little bit of HTML and CSS, with also some help from my friend Christam here, and also Linda and Udacity. And I began to earn a living just with those quite simple skills and WordPress together. I was able to deliver products that a client would actually really like. So I tried all of the sort of solid difference systems as well, Julema, Drupal, even Magento for my sins. If any of you guys here have worked on Magento day in and day out, you really have my sympathy as a terrible system. WordPress is used by 60% of all CMSs of harmony now, so that's a pretty amazing thing and a huge market share, which is why I love it so much. So as important as who I am, it's who I'm not. I'm not a designer. As you're going to see from this example I've made today, I'm no real passion about design. I'm just trying to show you the functionality of WordPress API. So it's going to look pretty nasty. I'm not a PHP developer, so even though I double a little bit of PHP here and there, it does power WordPress. I would never describe myself as like a talented PHP developer. It's just the WordPress makes it so damn easy for us. I'm not a fan of playing back-end tennis or playing project tennis with back-end. Happens a lot with Magento. We fix something. They break it. They go back to us. We break it. It just goes back and forth and back and forth. That doesn't happen with WordPress. Clive comes to us. They get a really nice design from our design team and I deliver a full stack product. No need for going to back-end because WordPress makes it so easy for us. Importantly, I'm not even smarter than your average bear, just like our friend Yogi here. I'm definitely not. No huge PhD. No master. Just no mad amount of training. Just working kind of with online resources and learning as much as I could. But I'm definitely not any smarter than you will in this room. So everything I can do, you can do better, I'm sure. Just a quick note. I toyed with the idea of doing some light coding to make this more immersive. But if anybody here is familiar with my man, Shikiro Miyamoto, here ahead of Nintendo, created Mario and Zelda. He had an epic fail during a live demonstration of E3 about five years ago, and Nintendo never did one since. So free recording is good enough for Nintendo. It's good enough for me. Let's get into this. We've got a lot of stuff to cover today. I just want to say thanks very much for everybody who come. It's a really great honor to be able to give even something very small back to the community that has made such a huge difference in my life. So let's have a look at the amazing world of WordPress API. Initially I had all of this. I wanted to take you from no code to finished product. I made all those resources, and then I ended up having to download them because I did a time of it, and it was over an hour and a half. So I'm just going to really quickly hammer through the basics because we all use WordPress, and I'm sure you guys all probably know these tags. But let's have a quick look at them anyway. Let's get all of them going. So we've got just PHP times wrapped around WordPress API, and it does that magic for us that we don't have to worry too much about, but it does some really cool stuff. We can call it top to the blog info. So just by your blog info name, blog info description, we can pull out the name of the site, the description of the site. See them with title and content. You're pulling out the title of whatever poster page you're on in the content of your poster page. See them with header, footer, and sidebar. You're just pulling out the contents of your header, see your sidebar, PHP, and footer. So let's scoot past this. So if I give you a quick example here, we have our name, our description, our title, and our content tags there that we just looked up. If we just put them on the page, this is what we would get. The name of our site, our description, our title, and our page content. Simple, simple stuff. So let's have a quick look at the featured image. A really nice feature of WordPress that I have been loving since day one. I'm going to click review for you here. You can see I don't have any featured image here. It's not that it's hidden in the screen options or anything. It's just not there. It hasn't been activated in the theme yet. So we're going to use whether functions.php and say add, need, support, post thumbnails. That's it. That's all I had to add to that. And all of a sudden, just by magic, we have our featured image here. So I'm sure you guys, I'm sure people have done this before, even if you're just a blogger or whatever. You should probably use your featured image. Just going to upload it really quickly. I put in a picture of Queens. This is an example. And I have my featured image. And it gives us a little bit of feedback here. So it started and then we hit update and we're ready to move on. So that's kind of cool. And you can see that on the front end, we don't have anything yet. Obviously, because we have to go back into our theme and then we're going to add the call to that. So I'm just creating a new demo called featured image, a divider, just to wrap it. And then I'm going to put in the post thumbnail. That's it. That little bit of API will now display the image object on our page. And it already looks a little bit nicer with some color. And you can see that I love it designer, right? It's looking pretty nasty so far. But can we make this a little bit smarter? How can we use the image to be a little bit smarter? Heck yes, we can. We're going to use the post thumbnail in URL. So we're going to get the address of where that image is held. And then we can use it to style around it and make it look a little bit nicer. So I've got my banner down here. Just the wrapper is just to hold it in place in the page so it doesn't become the full width. OK, something special there. And then in the style tag, I'm going to pass in my post thumbnail URL this time instead of just the URL. And I've also added a little tiny bit of CSS here just for the banner to make it responsive. It's going to be size hover. And some big colored white for the H2 tag, which is just static content at the minute. And we've put some padding on that to make it look a bit nicer. And hey Preston, just with that tiny bit of CSS and that little bit of WordPress API, we've built a nice feature for every page, a little topper that has like a banner. It's going to pull through every page you go to. It'll pull through the image and it'll bring that little static at the minute title. So the problem with that is when we add features to our site and then we add clients to those features, we get trouble every single time. So what we're going to do is add in a little fallback. You can see this is exactly the same code, except this time instead of having just my thumbnail URL, I'm just using PHP to ask if it has a thumbnail then use the thumbnail. But if not, we're going to fall back to this. This is a really nice API here, our template directory. That gets the URL of our working template, whatever we're using. And then the IMG is a folder that I created, just a normal folder for image. And Fill Murray is a picture of Bill Murray, but it fills in the gaps. So if any of you guys ever make websites on a content client, which they never do, never give you any pictures, we use placeholders. Now we use Fill Murray because it's a lot more fun. So we can see that we have that code in place in our app here. And then if I put it by my inspector to others, you can just see that's nice and responsive, but that's tiny bit of CSS, doesn't matter what size we use it. And then also, if we're a completely dopey client and we remove the image and forget to put it in, we now have our Fill Murray fallback, the beautiful man himself, back over, refresh the page. And there he is. So even the dumbest of clients can't mess that up on us, which is a great feature is exactly what we want. So let's look at Custom Fields next. I said that each two title that was on the top of our banner is just static. We don't want to have the same thing coming in on every single page. So we're going to use Custom Fields to make that different for every page that we're on. So you can see that I have no Custom Fields down here. There's nothing in the panel. That's because I have to turn it on. There's so much screen options. Sometimes it's off by default. And then when I open it up, I'm going to add in two different types of Custom Fields here. I'm going to put in one called Partner Title, which is obviously going to replace that Partner Title. And then I'm also going to use it in a more interesting way. I'm going to put three of the same type in. So this one is called Games. Let's pretend this is a page where I'm making a list of all my favorite video games. So Games Mario, Games Zelda, Games Platoon. I'm going to put in my big Nintendo fanboy as well as WordPress in case you haven't noticed. So this one is going to be unique. It's only going to be used once. But this one is going to be what we would call an array, like a bunch of the same thing. But we're going to use them as a feature on this page. So I hit Update here, and that updates my file or updates my post. And then there's two ways we can sort of tackle this one. We can just use the old simple tag, the meta. And what that will do is literally just dump everything, just like crap it all out on our page. So you can see it's given us both of our Custom Fields. And it's also given us our options from our Custom or our values that we gave into the Custom Field. I think that's cool, but it's not particularly like a great feature, just like that. So what we're going to do is improve this with a little bit of PHP. Very, very simple PHP. So this time we have the same div called meta. But we're going to have a new PHP variable called Games. I could really do with longer arms or a laser pointer. Either lose an option. That's all right. I'll try my best. So what we're going to do this time is create a PHP variable called Games. And it's that Games that can be populated by the post meta that is, I declared, was called Games. If you remember, we called it that for the back end. And then for each of the game in Games, we're going to endpoint one list item, and it's going to be the game. Also, I've put a little bit of CSS in it, just so you can, like, I'm just going to fill it into the side, like it's some sort of beside bar. And then we go back to the front end, and I have my little sidebar here, and I'm just going to leave that aside. So that could be a really cool thing. Like, say, for example, you were doing, your client is looking to make, like, top vibes if they're doing, like, book reviews or something, or anything that they want to sort of group together about that. You can really easily make that, and then just give them, like, a little list of different custom fields that they can use as a feature in each of the templates. There's also a quick shot out to Advanced Custom Fields Plugin, which does this on, like, probably a slightly better way, but I just want to stick to WordPress API today. I thought once I start trying to cover plugins, that's always making my thing so big. Plus, we have our next speaker here. He's going to tell you I'm in a really cool thing called Toolset, which also does this in a sort of higher level, and also gives you custom post types too. So we'll hear about that next, which is going to be great. So at the minute, this is a page template, Jim, but not as we knew it. This is not no longer, like, just a standard page. We're starting to put in extra features that are only going to be unique to this template, or maybe another template that we'll make from this. So what we want to do is start to use WordPress's page templates. This is brilliant. This is something that, like, in other systems, that's not, like, being shamed, but in other CMSs, it's really, freaking convoluted and difficult to do, and WordPress, just like everything, it's really, really simple, okay? So here's my page.php, my standard, what every page should look like on my site, okay? There's some templates in here. That's because I haven't created the template yet, and it's literally this easy. I'm just going to paste in that tag at the top there, template name, custom layout. You can call it custom layout whenever you want. It could be the contact page. It could be bill's page. It could be Pikachu's notes, anything you want to call it. That doesn't matter, but what you do need to do is when you name it, prefix it at the end with dash template. So I called it custom dash template there, and this tag at the top. There are the two key ingredients. So when we refresh, we go back in here, and we're going to refresh the page. You'll see that all of a sudden, we have this new area here called template. And you can see the name, custom layout, is that php tag I took at the top. So I'm just going to keep this on my ph.php at the back. And ph.php shouldn't have all these extra features, so I stripped them all out. I have a really good think about this to make sure I don't miss anything if I remember. I don't know how to hurry up though. You can pass the word, but... So yeah, I stripped all these features because this is my ph.php. It's going to be used just for a standard page, and the client is going to put all the cool stuff they want to in the content area so that we don't have to kind of deal with that later on. And then you can see when I reload it, it goes to a boring page. I want to change back to my custom layout that we just defined. It comes back to our cool template that we're building. So that's a really powerful tool. I want to tell you guys what you want to do, but what I do on a lot of jobs is every page that is unique and has unique features to it has its own template. It means that the user can come back at the end. They're like, I want to make another page just like my contact form. I'll use the contact template and I'll put extra stuff in the content area. It's just a really powerful and simple tool to use. So just to note, post templating is just as easy. We were looking at a page template there. You can use this for posts as well. So we just put the same tag at the top, but this time we're going to put an extra thing at the bottom called template post type and we're going to put in post. Obviously, if I did a comma and put in page after that, I could use that template on a page as well. If I had any custom post types, which maybe I could mention in the next talk, any custom post types, like I made a product, post type or whatever, you just put a product on the end of that, whatever the slogan of the post type is, and you'll be able to call it up. That's exactly the same way. That's that little meta box here and you just change it. So let's look at template parts. What we built at the... Okay, so here's what we built for the banner. This is good because we built a really nice feature for our site. I'm not trying to, like, dig up my own code. Just imagine this is a really well-developed feature. But we've got our banner and we're going to use it not just on the home page template, not just on the about page template, not just on the contact. We're going to use this on 10 or 15 different templates. I'm working on the site at the minute where I think it's pushing about 40 templates at the minute because it's such a huge site and everything is bespoke on each page. So if I wanted to use that and I put that code at the top of every one of those templates, the client comes back to me 80 years time and he goes, I want to change this part of the banner and I'm thinking, oh my God, where did I use that code? I'm going to go through each of these files or search through them and they'll be on this one. Absolutely. So what we do is we see that it's out as a PHP file. It's just called banner.php. So it's just called banner.php and what we're going to do then is use some more WordPress API and call that file in. So all that's done at the top here is put in, like, get template part banner as if I can go back, no it doesn't help. Get template part banner is very top and we don't need to write in that PHP, actually, just that API does that and it grabs that file and puts it at the top. So then when I use that in 10 different files or 20 different files the client comes back in years time I changed one file and all of the templates are updated. So it's just the power of PHP really and I'm not trying to say that WordPress is doing this, like PHP is doing it but WordPress uses that API and just makes it really, really easy to do. So that was quite a lot of stuff and I'm talking fast because I'm worried we're running out of time. So let me do a quick recap and if nobody's enjoying that PHP 2 in a cab you have no souls here. So WordPress API we looked at the blog info using the site name and description so obviously, like, if you make a theme it's not going to... it's not 10 minutes for me. That's 10 minutes for you. You need to find that back. So, yeah, if you need the blog info obviously the next person's logo comes through the next person's title comes through the top, okay? So we looked at the page title and content which obviously will be unique to every page it's loaded on, every post the site bar doesn't mention that one using a featured image as a URL custom fields as well we looked at page post and templates using template parts I would now like to apologize for anyone who is a seasoned developer that was probably a little bit simple for you. The next part's a bit more interesting I think it might actually... it might be something even from Mancrestum here who knows. So the next part, right? Giving the client more control. The client always wants to have control over the sites that we built for them and they don't want to be coming back to us for regular maintenance for really, really simple stuff. So these couple of tools will sort of make things a little bit easier for them. First up we've got short codes. I'm sure everyone's used a short code here anyone who has contact forms on their site in a square bracket we can actually just make our own short codes so that we can have content added in that the client can control over content that is code based without being able to see or more importantly break the code so we can see it by little chunks that the client can use it. So here's an example that I made any designers get ready to cringe when you see this example here's a little example I made of a little offer that the client is going to offer and has a call to action at the bottom so every time they're having a special product they can fire in this and then they can have a call to action. It has some simple CSS it just adds a little thumbs up acronym which get ready to cringe designers. So this is what it looks like our content finishes and then this comes in but the client can't control that they can't put that anywhere they might want it on every single page so if you haven't heard of that expression before just google html identifier and it just takes a lot of html it makes it into one big long line in those spaces Here we go so in fact we've got our functions.php where all the magic happens when we're pressed you can see our first thumbnails is still here and just underneath we're going to add in our add shortcode API and then we're going to call it work camp demo that's actually what the user will use to call it on the other side our function here which is work camp down with shortcode obviously you can tell anything that I call work camp is just for you to name you don't need to use the same naming convention there's no need to call everything work camp and all this does is I think I actually saw this in the previous one it's just going to return your html here at the minute what we're going to do is paste our html code over your html so that's what it looks like we have our shortcode here with our html as the user is they can just put it in wherever they want so it's not going to be below the content now it's going to be part of the content and they can have that lovely great deal called action anywhere they want on their website so you can make that if you had a lot of common features like that in a site what you could do would be a really nice feature it's to make like a little library for them a little short codes and then they can pop them kind of in and out whatever they want so at the minute we're starting to get a bit of a messy functions.php which isn't something I'm not a fan of I like to kind of keep my functions.php super clean mainly because I want to scroll through two cars in line to put it down to a project but also because the next developer who takes it off me doesn't want to do that either they were like okay I have a problem with this I want to replace that, I want to take this out so all I like to do is store everything in the inc folder it's just a folder that I make and then I call that in my functions.php so that's just a kind of nice tip and it uses this include and then we get, we saw earlier on get template directory against our active template and then include folder and short code.php so that just means I'm not looking at all of my code in one place and it means I can keep it separated out which is a lot cleaner so let's start with the widget areas because once we start to add all this stuff in you would see the functions.php just scroll all the way on the page so let's look at our widget areas what we're going to do is add two different widget areas in here, you can add as many as you want the reason I put it in here is just to show you that you can just take this cooking coffee and paste it and put it in as many as you want it's a really good, I'm sure everybody knows what widget area it is here but it's where you can sort of drag and drop with a user interface, different chunks of code in and obviously loads of plugins use widgets as well, which is great so we have our, we're just going to add action here we're widgets in it that's what we need to tell them to fill in a widget this is our, what we define here we're a camp widget in it and then that calls our function up here which registers these, you'll see that these are both the same but they both have a unique name and a unique ID and that's really important the name is for the user so they know where they're putting the widgets the ID is for us the developer so that we can call the right one so back into our sidebar.php we have some other content earlier we have a quick if to see if their sidebar widgets ID is active and if it is we want to display our widget our dynamic sidebar sidebar widgets, those are our ID for that and then as you can see we come back from the front of the site and there's nothing here because I've also separated this item there's two columns now, but there is nothing there because we haven't added them this is a great point to show you that I've separated that mean content area and 30% for my sidebar there's the active code that's going to run here is my sidebar that we just looked at as well where we talked about if statements and importantly the ID you're going to get the ID right, you're going to call the wrong thing or we'll call nothing and then we go back to our WordPress oh sorry the last thing we've got to do always is come back to our functions php and make sure that we call in that extra php file that we put inside the in folder so again I include tag we're going to see it again or get template directory really really good to get our active template and then the actual address of the code that we wrote good time for a water break it seems like I'm typing really slow but it's got them sort of sending freaking out as I'm doing this I'm like people are going to be watching this I'm so excited it's kind of annoying I've been doing this to myself it was actually pretty terrible so we go back to the new area up here which is going to be the custom or our widgets area and that's because we've initialized widgets WordPress is like hey this guy's going to use widgets I'm going to put this new area in here we're just going to drag and drop some widgets in but again widgets are really powerful these are just the default WordPress ones that I've shared everybody's seen but there's also like a whole library of plugins like if you want to pull your Twitter feed in there all you've got to search for is a Twitter widget plugin and there is just an unlimited amount of them so you're just going to remember to hit see is what I've been doing the first time I've practiced it I got very confused then we go back and refresh that and you can see we've got a new sidebar area and we're pulling our widgets 3 and 2 which is great clients love that because then they can play with them and experiment and if you do it not just always in the sidebar but in different parts of the site they really like that the Twitter widget is going to be pulled in there and you can add in just copy and paste that code you can add in as many widget areas as you want so the next thing I want to look at really briefly is menus it's a really nice powerful tool you'll see here that I don't have a navigation bar but I have made a load of pages just like pretty much as lower or maximum of those pages but I want to make a navigation so that everybody can get to those pages and I experienced it when I first started my job people were doing this statically and I just couldn't understand why it's like the client comes back to you and it's like I've made 5 pages I want to put them up so we put in our WP out menu and importantly I called the work hub again this is just a look at the CSS it's going to part, it's super simple there's just a couple of suit elements to make this dropdown that I'm going to show you but very very simple CSS as well but yeah so inside of that client coming back in the morning that they want to see their new 5 pages they've added in the navigation bar this just gives them a really amazing user interface that they can really quickly update their nav so we go back in here we're going to make a new menu from our parents menu we're going to call it work hub because that was the idea that we assigned to it I'm just going to drop in all the pages here so drop in all the pages and then you can see that I can drag and drop these around a really cool feature as well is I can change the tag that was too long for an application I can change it to home that doesn't change the address of the page the URL it doesn't change the title of the page it just changes it for the nav which is a nice feature I can also drag and drop because these are children pages of WordPress so I can drag them in so that they're going to set these children pages and that tiny bit of a pseudo CSS there will allow that to work so you can see we've just pulled up an L there and then we can roll over those really nicely a little bit of CSS3 for transition and yeah those are really nice kind of powerful tools as well so this is the thing that I don't see IGN use it really well although I don't think they're part of WordPress but it's a thing so that whenever you write up a post if you have multiple bloggers like my friend Matthew here everyone does on the website with multiple bloggers on it this is a really great feature that at the end of the post it'll tell you a little bit about that person who's written the article so you can see here this is my information my horrible work photograph they really do it for here it's usually a picture of a pixel bill but they give me put on my professional one this looks like it so this is information about me I've got my bio here I've got my website address I've got my name and I've got my pic so if I go through really really again super simple API code that allows me to do really cool powerful things I've got my id for bio I've got my pic in there and I'm going to grab my avatar using my id or using my email as my id then I'm going to say find out more about the author's name and I'm going to have my author's description which was that bio and then I'm going to have a little thing so you can contact me via and then that link is just wrapping my URL that I put in there around my website so at the end of every blog post every author will have their own unique things show up there find more about Bill find more about Chris find more about Matt remember where it is it'll be there, picture it it'll be there, bio I think it's a really nice feature to use on sites especially if you're using it for blogging so we've got this pretty far through this and the next little bit we'll just recap this I think we looked at using custom short codes we looked at widget areas we looked at WP NAVs we're making nice interactive navigation menus we looked at author details which I also like to call post sign off because it's like a nice way to say have a sign off at the bottom or a call to action okay and now the last thing I'm going to look at is anyone who's a really seasoned theme developer I hope I didn't bore you too much of the simple stuff there as you're really aware there's going to be a different range of abilities here and there's nothing I hate more than going to talk and someone just dives in at the deep end and I'm sitting there going what the heck are you talking about I'm getting nothing from this so thanks for bearing with me if you're a very seasoned theme developer but this should be pretty cool this is being introduced in WordPress 4.5 I think so the WP Customize which is what exists to literally customize everything on our site and it's also going to wrap up all the other stuff we've kind of talked about so far so in our functions PHP we're going to activate this by putting in Add Action Customize Register and we're going to call it again Work on Customize Register which I'm sure you can guess is just a unique name that I made up you can call it everyone then when we go into the background we've got a new area coming up here called Customize so we'll look at it the cool thing about this is everything we've kind of talked about so far is not controllable from one place so the user is going to be able to change their site identity generally we talked about the blog info the title and the tagline and when they update it they're seeing a live update that just happens you know like as we type it in we're going to get to see why this is going to affect our site and then we can hit publish we go back to the front end and that will actually be I thought I would back the front end so now we're going to quickly look at the menus you can control your menus from there the widget areas we just made you can control them from there you can even have a look at the home page settings where you can change it from being blog page to static page at the front which is what I did earlier and then also you can add in CSS here which is really good because a lot of clients are going to want their 15 year old nephew who's a coding whiz to have a bit of a fiddle with their site ok and that's great because you can fiddle away here as you can see I've put in a bonny type and it's like displaying none instantly it takes the site away it's not displaying the bonny it means they can fiddle around in there and they can add new CSS without getting near your core CSS and hopefully be breaking your site and then blaming you for it so it's really good that you can kind of have a quick experimentation there and see a live feedback now what's even cooler than that because that is pretty awesome but you can actually add more features to it so we're going to have a look at the logo here which is a really nice feature this is some not too bad html or not too bad thp and what we're doing here is again adding theme support for a custom header is what they call it and then we're going to do some defaults here is an array of our defaults up here so we have again a lovely filimary fallback just in case someone doesn't put something in there and random defaults at default you can put in a lot of different defaults and have them cycle through that on page load then width and height I just want them to be 150x this time and there's a lot of other things or a lot of other settings you can put in there and you can also put in whatever you want and pull them out of the front end too which I will show you then the next thing we have to do is go to our functions php and call that file sorry completely skip that but we made our new file called theme logo php again inside this ink folder where I like to keep on the code and then we go to the header on php and we call that out so it's just as normal anybody who's done any web development at all this is an img type very very simple it looks very exactly like on the four lines that's just so I can see so I can show you it a little bit easier so we've got our source and we're pulling out php header image that is actually going to pull out the URL of that image we have the height and this is where you can sort of equate anything you want so the height you say echo get custom header and then whatever the value you assigned on that so we have height and width coming out and then alt this is a little tag that I always add just because it's good practice for accessibility then what do we get the front end we have Phil Murray looking a bit grumpy there and he is our logo for the top of our site but the cool thing is we can go in here now because this control has come into the same place where we're going to control everything from so we can go in here we can click add a new image I already have one in here but if it wasn't 150 by 150 it brings up the cropping tool and then you can crop it to be whatever size you want there's another really nice feature for press and then a live puts that in there for us and then if we hit publish up at the top you can see that the changes we've made inside this editor are actually built through to the live site it's like updating our code for us which is quite simply amazing there we go so the next bit is even cooler than that but this is where it's actually getting beyond my area of expertise in PHP I wouldn't call myself a PHP developer as I said earlier but all of this code is all out there for you in the WordPress documentation I'm just there for you to sort of use pretty much I hate the set the copy and paste it's kind of like a funny thing we say I work all the time I copy, I paste, I web developer with WordPress we've got that back to we're going to make a new file here called theme colors PHP so this is broken into two slides here because I couldn't fit all along but I'll show you in the video next anyway but what we're going to do here is this is our function that was called whenever we set up our customize in the first place so we're calling this function we're making an array called colors and each of these is an array item a different color so you'll see there's a slug which is our ID what we use developers to call it we have a default which we can set any color that we like we have a label which the user will see whenever they are sitting in front of them and then WCV if you can guess that's the workout alpha so you can change that label to B so they're grouped together you can change up to whatever you want then at the bottom we're going to loop through each of those so these settings and controls that this is a proper I copy out PSI web developer job just got that straight from the WordPress documentation and everything just works so much easier than other platforms and then the final point of this is the last thing we're going to do is save PHP variables that we're going to pull through from get option header color and then we're going to pass these into your style tag this important issue need below your call to your CSS because it's overwriting the CSS over in the first place so the cool thing is you can kind of concatenate these together as well this one that I gave it an idea of header BG color but the user is going to see the tag main theme color so I can have the header and the side bar like any header if you want to take that main theme we can have them all concatenated there and then we also have just the other two settings as well the header and the footer or the entry A is any link that's going to be in there so just go quickly to the demonstration oh yeah sorry and then one last time we have to include that in our functions to install PHP otherwise it's not going to know that it exists so we go back let's have a look at all of our pages so you know that it's not anything different what we just showed on the screen is actually what we're saying there's our functions there's that split into two slides so where we could fit all the ones scroll down so you can see it all and here's our header with the exact same PHP variables and style tag and then we go back into our customize area we have a new area that's opened up called colors you click into that and then the client can allow I would probably exercise some sort of caution here because you give them the ability to change every color in the rainbow and they will use every color in the rainbow so that would be very since like maybe slightly curtailed like creative control but you can see that they give us a live update just like all of those other feature styles which is a really cool thing and WordPress scroll out of the footer I can hardly see it here but once I change the color it pops in nicely and we can see that so so many controls to change everything about the site and it's all in one place so either the client is going to be looking at a page or a post and that's where they're going to control the content of that page or post anything else they're going to be controlling from this one area you don't have to treat them to go oh when you don't update this go to this part go to this part go to this part everything is going to be controlled from one place which is just a really really good product to give a client as an end product so but wait you may be asking yourself how does all of that work and there is only one answer it's witchcraft well maybe it's not witchcraft and maybe my man Tom here could probably explain how all these features work because you can't believe my mind with your talk there but that's to be about to customize it no the important thing is guys we don't need to know how it works what we need to know is that WordPress has built us this amazing system that we can build really really powerful like interactive websites with and just with some basic HTML CSS and some very very basic PHP there we've built kind of a really cool product that will give the client really good ownership over their site and more importantly if you're selling as a product and not a service there's some really really good features to add in so kind of do more yeah it can do anything you want there's no need to customize it can be rigged to add in anything you want there's an example I found online where we're controlling icons on a page we've got ethos as the web of the company which is every time like they have a little bar that says are ethos they can change it just from here and that will pull through to every page that uses that your head or your foot or your buttons your portfolio, social links like if you rig it all the documentation is all there if you rig it it can do whatever you want it to do so you can control every aspect of your site from WP customize so can we just make a killer theme with a customized UI let's have a quick recap so yeah you can see that we've I'm just going to repeat this now actually you can see that we've got we've got all of our controls as a product this is a really really high end product we've got one place to go to edit our content and we've got another place to go to edit every feature of our website which is an amazing product to give their clients in the end so I just like to say a massive thank you to everyone who came today it's been a real honor to be able to give something back to a community that has absolutely changed my life before I started developing Overpress I had no idea what I was going to do and it's brought me down this wonderful path to a career that I love and enjoy going to work every day so it's really really nice to be able to give something back and something I'd like to give to you if any of this WP customize or anything else you've talked about interest you please go to tinyurl.com forward slash WCB dash scene dash build and you can download all of that code and please feel free to edit and improve it and like if you can make it better and post it back up again I'd be really happy with that I'll keep sharing the link and it'd be great to get some sort of community going I'm at Bill Gill on Twitter so hit me up if there's anything that I can do for you or help you with Right Bill, thank you very much