 campingu na wajadikwa wajadikwa maia tahitaka kwa wajadikwa wajadikwa na ula kwa poula, isu, na iroduwe nubiduwe, iroduwe nulistu ula kwa ula ka made yu niloka. Daji wajadikwa hiru wa kwa nisi kwa ula, joinedi numbiawa. Kiliangu wa kiki nuu nikwia maia yu nil Xiaufney kwa wajadikwa, So if you're ready, let's jump into the code. So today I'm going to show you how to make your content in your a widget dynamic. So what we're going to do is we're going to create a little plugin for ourselves in another website or maybe this is our service center or our service website. We're going to create an arrest API endpoint and I've done this through a widget that I've actually written and that will allow us to have dynamic content that changes on our server and this information will be picked by our service tag, save data transient in a database and then the customer can be able to consume it in their website in the event that they lose our contacts but they will be able to find it in their website dashboard. So if you're ready let's jump in. So what we want to do today is we want to make this data actually quite dynamic because telephone numbers change all the time, we have emails changing all the time and maybe we want to assign different, let's say, different tech people from our tech team to support a different website. However, we might not require to go into the client site and always change this plugin or maybe even send out updates to them. So having a arrest API do that and send that data off actually would be a better option for you. So what I've done is I have actually written a small plugin and you can see in these few lines of code I've been able to leverage the WordPress rest API and I've added my own namespace, I've actually added my own contacts endpoint on there. So when you look at this in this local website that I've created I have a new namespace in the routes which is called lab version 1 because the LAB is my own initials and then I've used the version 1 so that I can maybe version this over time. So we have an endpoint right here and if we go to the different endpoints that we do have we have one called contacts and right now it's just echoing out the information that we set out which is return and active. So what I'm going to do is I'm going to just add the information that we wanted to have here. So I'm going to have an array which I'll call array very uncreative of me but this will allow us to see what we need to do. So we're going to have the name of the tech let's say I wrap this under brackets and then of course map and then what I'm going to do is I'm going to get Kelly Max who is our our specialist and then I'll wrap um of course what I want to do is a add a drop line let's say this is our contacts content that we want to have so just description would be the best thing to do so we have a description here and then we'll just wrap this under this and then the next thing that we need to do is have a telephone number of course which are going to cut from here put a comma and then we'll add phone then last thing that I need to wrap is an email address from from Kelly. Now of course we can do this we don't have to manually add this content maybe we have millions of tech support that we want to add to this array we could do a custom post type as you can also make your own I'm sharing the video up in the little card that has just popped up you can make your own custom post type and then you can actually route all those you can do a wp query I show you how to query a custom post type also in the video that's linked above and then you can end up having this information dropped into an array like this one and then you just return this so we're going to save this let's go back to our endpoint and reload and we'll see that we actually have information coming out here if we wanted to let's say have more people I'll just wrap this inside another array this is the new way of writing arrays in php as we keep on growing so I'll just add a comma to this and then I'll duplicate this and take away this so maybe I'll just change this to Gloria just to show you a little bit of difference so if I go back here and reload you will actually see that we have two people Kelly max and Gloria max so for now what I'm going to do what we have these two people so let's say we wanted to assign one to each website we could easily add a different key let's say we're going to assign this person to a website let's say we'll call this maybe kauton.com now the beauty with having this added into our our endpoint is that we can always query this particular endpoint and then as we look through different contacts we'll just look for the website and then get the different names and then throw that in the particular widget that we've developed so right now what I'm going to do is just go back to the one person that we did have and I'm just going to clean this up a bit so the possibilities are many so we'll just have this coming off now what I'm going to do is I'm going to request for this particular endpoint to bring in the information into our widgets that we did have so we are right now we are good so we're going to go back to our endpoint here now I have a video that shows you how to query external APIs right also in the video that's linked here I'm not going to go into the details of how to do that but we're going to quickly use a very simple embedded wordpress function that is already in the code so when we use wordpress our wp remote request it allows us to safely query particular apis and the first thing that it requires is actually this URL which is our api URL that I'm just going to post here and then the next thing that it requires that it requires an array of arguments are you posting are you getting information are you sending information into the head so for now what we're going to be doing is we're going to be passing our method that we want to do so all this come in an array of data so what the first thing we do is that we want to add our method which is a get it's going we're going to be getting information so we need to wrap this in wrap this into those small quotes so it's a get method so we're going to be retrieving information and once we we get that back we're going to be able to use another wordpress method which wraps and that information so we use wp remote retrieve the body now of course as you're thinking right now we are retrieving only the body however we can also retrieve the headers if need be so I'm just going to wrap this into a variable called a response so that when we query this api endpoint in our get method we shall the next thing we shall do is we are going to overdump our our our response that we do get so we're going to overdump the information that we get here so I'll save this and then I'm going to go into our dashboard and I'm going to reload this now you can see that we actually get back information we have the name Kelly max we have a description of course with our html that is escaped but we have all the information we have our phone number we have our email and we have the website coming in so that is a good start for us at least we're getting back our information so when we've add up that information we actually see that we get back a string of information here and it's all wrapped up in jason so what we are going to do is we are going to actually just jason decode it this information I'm just going to wrap it under this functionality what press coding standards require us to actually put spaces in between there so what I'm going to do is I just do that and then I'll reload this and you'll actually see that now we have all of this in some neat php we have all our strings escaped we have our bold in our bold max right here and if I quickly go to the code there you will see that we have our strong tags actually wrapped there so we're not having that messy jason thrown into php but right now what we have is a php object that we can look through so what we are going to do is is we are going to actually just come here and say so we're going to look through our object that we do have to get these individual pieces so what I'm going to do is for example I'm going to get this name here and I'm going to just dump this here so first of all instead of bad dumping this we're going to wrap this into our response and I'll call this response decoded just to wrap that properly and I'm going to copy this particular variable that we've saved here and I'm going to wrap this under php and then I'll echo this put a semicolon and then wrap this in a closing tag for php now what I'll do here is just cut this and then I'm going to throw this into the kelly just to see that we that we get her name I see I have a little bit of error here let me see what did I do wrong this is just when the code open the response is wrapped in the remote body I think I have an extra have something extra in there so I'll save this come back reload I have an encode so the error making in outputting my code is that I am using this as a variable my mind is locked in two loops but if we actually just come here and map this information I see an error okay so I have mapped this to name which is wrong but if I save it and remove all the quotations and come back to my widget here and reload it actually going to see that we have our kelly max here now in the event should I decide to let's say go back to my api here and change this person's name and we are no longer having kelly max there but we are having brian for example brian max who is the other partner in the business we our api has already changed here we have brian and if our client actually logs in here they're going to have a new brian max who is showing up inside as they are contact personnel just go and make an edit here to have brian in kaps lock but we can also use our php to make sure that we always have the the names capitalized the moment they are putting so what we're going to do is we're going to just actually duplicate this copy this and throw this in proper html so we'll wrap this into a paragraph tag doing it to do that I'll just use a span tag that we can always close off and we don't know how the paragraph is going to represent us so what I'll do is change that to the name and here we had a description and then the other thing that we're going to make dynamic is we're going to come here change this change this to phone and then we're going to of course change this also this email into a dynamic one and we'll call this email so what we do have here is we'll go back to our widget and reload this and we'll actually see this works out well so at any time if we decide to change this information if it will try to change anything that is on arrest api we can maybe we made an error in adding this we are able to just make edits and then once we save this uh we'll always know that when we come to arrest api and reload we'll see that have been changes made to that and our client will of course be able to also have those changes represented inside their service tag so maybe we change the picture we can always have also a link to the picture of um the particular person so that we have this as dynamic as possible so i'll just drag this particular link let's say that's our URL for image and then i'll just do this and call this picture for now and then i'll i'll save this in there of course at the end add a comma so if we come back here and then just copy this some code because we are trying to reuse everything if i paste this close off this php and change this to picture and save it uh of course when we reload this this will work my internet is broken but i'm trying to i'm going to just show you if we inspect this you'll actually see that we are having this showing up and our code is no longer broken now i've showed you how to make this content more dynamic for your particular uh let's say your widget however this is not the best way to do this it would be good for us if we actually made sure that uh the client is not always going to the server to check this because it's not every day we are changing this information so what we can do is we can actually wrap all this information under what we call a transient and say maybe this information changes the the the user should query our server for this information maybe every 24 hours or maybe every 12 hours just depending on how we do work but that will reduce the number of network calls to our server to check for this new information that might not change in months or even in years um so the best way to do that is actually to wrap this information in a transient and once we have all this information in a transient of course the user will be able to get it but it will be saved in the database in their website database and that will allow it to change or make that small call every maybe 12 hours or 6 or 48 or in a month however i think it would be a bit misguided if you leave it there for a week or a month what if you change some stuff who has gone rogue today you would want that information to be changed as quickly as possible so maybe 24 hours would be a better guess so uh i'll just show you how to do this quickly how to wrap that information into a transient so in order to have a transient come for us what we're going to do is we're going to actually register that transient however if we have to first check for it whether it is available now what i'm going to do here is i'm going to start by coding here and say if our transient is not empty this is me querying for the transient and i'll use the word press or the classic press get transient function and i'm going to query for a particular token uh which we shall decide to call maybe lab lab contacts details so that is our transient uh we're quickly querying to see if it's available if it's not empty then we should be able to get that particular information and throw it out but if it is empty then we are going to go and query for this information so else else we go and do this whole query i'm going to just move this information here so we can query that and then we shall also just move this information up here and then what we are going to do is we are actually going to save this information in our new transient so what and to do that we use the set transient function and the set transient actually requires just three arguments the first one is the token name which we which we set up there which we're getting up there the next is what kind of data are you going to be saving so we're going to be saving this particular information so we'll save our variable in there and the next thing that we are going to do is actually set for how long do we want to be which could be let's say we want to save it for five minutes in seconds if we want to do that but there are other ways of saving this information you could have days in second so let's say we want to save it for one day we can do that we could even have hours in second let's say we wanted to have 12 hours so you changes to 12 and then you will save this for 12 hours in a second so we'll just leave this in for a day and what this is going to do is that it's going to run every 24 hours this transient will expire and then of course that means it will be empty and so we have to query for this information yet again now that we've managed to set this we're going to just choose this variable I'm just going to copy it here and I'll say if get transient is not empty then we are going to set our content as this so I'll save this and what I'm going to do is I'm going to actually open up our php my admin just to see what's going on there when we do that so I'll go to I'll go to my database and if I go into the wp options which is where all our our transients would get stored if we show all and we quickly look for lab we'll see we only have label and label there so we don't have a transient of sort however once I save this and then I just come I'll just clean this up a bit once we save this and then go to our dashboard and reload this information here we'll see that we have an undefined constant it should be day my I made an error it should be day so it's supposed to be day in seconds I'll just save this and then I'll reload this and we'll see that this works out well however if we reload this we'll reload our database here and look for lab again we'll see that we have four matches here and if I quickly run here you'll see that we have a transient called lab contacts detail which stores all the information in here this will expire every 24 hours so let's see what information is stored there we'll see that we have our name brand max description phone and website and all of that so that is available for us to use so we can quickly get that information it's stored and so on so what I'm going to do is I'm going to change my rest api here and change this to mica max as a name and if we go back to our rest api of course automatically this will change but if we reload our dashboard icon we'll see we still have brand max it's because our transient has not yet expired so what I'm going to do here is I'm going to manually try to delete this for my database to show you what would happen so if we go here and look for contacts we'll see this is available so I'm going to just delete this so if I reload this information here of course the transient will not be will not be available but now we have mica max who is our new contact person and if we reload our options table here you'll actually see that our transient was yet called again and we have mica max coming in there so of course after 12 hour period that we've set on our widget this transient will expire and we'll have the new information but I just wanted to show you what it looks like in the reality so if you enjoyed this video and you really really loved it please give it a thumbs up subscribe to the channel if you've not yet subscribed so that you don't miss any new information that comes out and if you have any ideas that you would like us to work on please leave that in the comments and then we'll see how we can be able to work that out and I could show you a good example the other way of actually having this information non-static is to use something that is best in an options page but I realize that using an options page would have to be inside the client's website and you don't want to go into the client's website every other time to change that you actually that is illegal you would be intruding on their privacy however with this you could be you could be able to let them know that I'll be sending you the contact person and they will be able to change and you explain to them the process and I'm sure they would say you know what that's okay go ahead allow that plug into work in my website and then they would be able to reach you in case of any trouble or in case they lost your contact details so thank you again for watching please subscribe to the channel like the video if you do like it and check out the other stuff that I do have in this channel for you thank you for watching and happy coding