 so we are going to attempt or rather we are going to make a dashboard widget that will allow us to put our contacts maybe a picture of our logo and different items maybe it's the sales team person that will be assigning to this particular development of the website all right welcome back to the channel this time i'm going to be doing something that i've been thinking about doing for a while now and it's about the wordpress or classic press dashboard widgets that we do have here now wordpress or classic press comes with a default api that allows you to add your own dashboards for example we see this dashboard widget that is added by wukamas when you install it so it's able to show your net sales your orders the products and what is loan stock depending on the settings that you add to your wukamas now in most cases i design websites for clients and sometimes they get into trouble or they might have lost their mobile number or lose my email which is kind of funny um losing an email however you want to make it as simple for them to be able to reach out to you and to maybe even recommend your services to other people so we are going to attempt or rather we are going to make a dashboard widget that will allow us to put our contacts maybe a picture of our logo and different items maybe it's the sales team person that will be assigning to this particular development of the website now i was searching online and i know you can use the default wordpress widgets api documentation in here and it will allow you to add the widget just fine but i found also a very interesting article from a codportant on codportant.com and then of course you would add the extra url or you can just search in the sidebar search for dashboard widget he has an interesting article on how to do this so he has a picture here um the name the project and it's beautifully designed so he gives goes in detail about doing uh looking at the different dashboards what we what's the win uh how do you make it work and he has a few cod snippets in here however i'm going to actually just go to um the dash the dashboard widgets api and we'll start from there so we can see here he actually has some statically input information but we can make this even dynamically generated maybe we can throw this off a particular api on our website let's say we have a million and one websites and we can decide to assign different service people to the different websites so we could develop an api that is queried and will assign the right person via the widget or maybe if we change contacts we don't have to go in every client's website uh we can just do that on our own endpoint and we'll make that work out so let's jump into the code itself so i'm going to go into my local installation or wordpress or classic press in that matter and then i'll just create a new folder in my plugins file and i'm going to call it a service widget and this is the the file that i'll just add to my editor and uh from there i'm just going to add a new file which i'll call service editor service widget dot php and what you need to do actually is you need to first go and find out from um let's say from the wordpress plugins and find out wordpress.org so got wordpress.org go into plugins and then you can check whether service widget service widget if i type this well um we'll find out if service widget exists because what will happen in most cases is you'll have your plugin updated by someone else if this name already exists so what i'll do right here is i would actually just go back to my plugins so i'm going to rename this and maybe make it service widget omuchigai service widget and that's what we'll use as the name for our widget okay so after renaming our widget again prefixing it we'll just add it back to our our editor and then i'll just do the same thing for this and change the file name so that it's it's already um we've already added what we need to do so for now we're going to add the default pieces that we need so we'll just open up php and then we'll do add the information that's necessary to get our plugins started and that is by adding in the plugin name and we shall call it a service tag or service widget the reason why we add this in the plugins is because plugins usually add more functionality they tap into the functionality of a word press or classic press and that's the best place to do it so we'll give it a name then we'll give it a description description is a service tag information for web designer the other thing that we can add maybe is a author the plugin author we'll just add this then we'll add in the plugin uri which is basically just our information all right so when we finish setting this up all we need to do is go back into our dashboard i'll just use this other page go to the plugin section and we'll see that our plugin is already available we have a description we have a uri author and then we can activate this there's more information that you can add into this little piece here like for example the the author uri which is essentially the same thing so if i just did this author uri you can add a text domain and that will allow us to essentially allow our plugin to be translatable so we can add in a text domain and we'll call that service widget so for now we'll just we'll just leave it at that so the next thing that we need to do is go back to our widgets api here and on looking at it they share with us how we can use this so i'm just going to copy this code straight up and just add it to our widget then i'll be able to explain what it does so the widgets api when we want to add a dashboard widget we need to add a unique widget id we need to give it a name we add a callback function and then we add the different arguments and the control callback you'll find how these can be used most times these are optional because we don't use them a lot but we're going to see how we can use them in a different in different way but we have a brief explanation for what they do here so we need to tap into the WordPress actions and that's the WP dashboard setup now essentially this will allow us to run a function that hook that is in the hook so we are going to have a hook we have already we already have a hook in WordPress by default which is at the WP dashboard setup and what we need to do is we'll run it with the function this very function and all our code this code that we have here actually needs to be moved and added here so we're going to have a widget id which we are going to call om service i'll just copy this from here because we're going to use it so many times so we'll give it om service let me just make this clear om chiga service widget is right here we're using it as our id and the way the id is actually in our dashboard is you can actually come and right click on any of the dashboard widgets that we do have here and you can come and see what it's called for example this has an id of dashboard activity dashboard underscore activity if we looked at this one we can see that it's called a dashboard underscore primary and if we look at the one from wukamas we'll see that it's called a wukamas dashboard status so we're able to tap into this for example when we want to remove the particular widgets let's say we want to have a clean dashboard for us here we don't want our customer to see all this because it can be confusing we are able to use one of the functions that are in wordpress again tapping into the wp dashboard setup we we are able to see that we can actually remove some of those for example let me just copy this whole code here we're going to go for a clean dashboard so before we we do all the other before we add our new dashboard in there i'm just going to comment this out so that it doesn't affect the code so we're going to remove all the other panels that are already existing in our wordpress install so if i reload here you'll actually see that we now have a clean dashboard apart from the wukamas widget that is here that is still here so what i'm going to do is just copy this name uh which is i'll just get the id and then i'll go back to to our editor i'm going to duplicate this and just change only the id uh which is this so if i change it if i duplicate this and then add the particular id that i need to do and save when i reload our page here we should be able to see that actually go away so if i also choose to inspect this i'll find that this is called a recent reviews wukamas dashboard recent reviews so i can just duplicate this again replace this save when i come back to our dashboard reload we'll actually see that our dashboard is actually clean however i'm now going to add our new dashboard widget and i'll just tidy this up a bit so we have our new dashboard widget which we have given an idea of umchiga service tag service widget and we'll also do the same uh in this event i'm just going to put this in quotes and i'll call this a web developer service tag so that's the client when the client for example wants to know what's going on here let me just cut these others let me just remove those just to show you if i reload here okay we have a few errors going in here because we have too few of our arguments so i'll just add a callback function here to to to make that possible uh to remove our error so i'll add the function here the callback function but functions don't work well with uh dashes so we're going to add a proper uh php name for our function so we'll have that function these other arguments are optional so i'll just remove them for now and what i'm going to do is i'm going to copy this and then make a new function down here which i'll uh i'll just add we have that as our function and then we'll just add in some information where we we just echo out something like uh voila if i remember my french properly so then we'll terminate that with the the semicolon now when we go back and reload our page our error is gone and we can see we actually have a new dashboard widget here that we can move it has our special service tag it has a voila in there and we're able to add more information so what i'm going to do just like what quad potent actually had here he brought in some html and fixed all this information here so i'm just going to copy some information here just to allow us to quickly add that information in there i'm just going to copy the i'm just going to highlight that and then paste in our information and tidy up a bit i'll just tidy that up a bit so we need to escape our php here leave some space there for to make it clean and then open our php down there so what we are doing is bringing in some html and let's see how this looks like so i'll save this and then i'll come back to our dashboard and if i reload here we're able to see our information coming up so we have the picture we have the information just like what the article was telling us here of course there's a little bit of styling that's missing but we can always add that in our widget we can add some css through our php and we can make this even look better so right now we have this information that is static but we can afford to make it actually more dynamic so the next step that we are going to do is actually create an options page and we shall be able to update our information from there and then we shall take it at step further by having an external API let's say that has the URL embedded in there and when we do a quick search on our end point we find out which URL are we using this site and then we are able to find out the different information that we can quickly fit in here in our page so if you want to see how that looks like please please please subscribe to the channel and turn on your notification so that you don't miss when that update comes out so i look forward if you want to try this out please make it your own um try it out go read godpotent's um documentation and his articles he has fantastic information about how to make this even cleaner uh for example he tells you about name spacing which allows you to to escape the issues we've been having of trying to just add everything into our name space where we are adding umchiga through everything so you're able to see how to make this a lot cleaner of course you can you can use this very action to have only a function that is only removing meta boxes and then a function that's adding meta boxes so in the next edition of our in the next video that we'll be having we shall be making this information very dynamic so that you don't have to always come into the widget itself and edit this information so keep your eyes peeled thank you for watching and happy coding