 Okay, so let's begin with this video tutorial and some of you might recognize this team because I've used this team for pretty much most of the WordPress tutorials that I've done and if you haven't yet seen them, you can go on my YouTube channel, I've read the brand and have a look at the WordPress section. I have all sorts of useful WordPress development tutorials there. So anyways, this is the theme that we'll be using but the theme is not so important for this tutorial. You can use it on any team, the code that we will be writing, you can use it on any team that you like. So as you can see, I'm already logged in as an admin and I'm just going to navigate to the dashboard. As you can see, I don't have any of the default boxes in here and this is because I've actually turned them off from the screen options. They are all unticked but of course, you can take them and display them and this is what we'll be doing today. We'll be creating a custom box for the dashboard. So let's have a look at how we can do that. First of all, open your project in your favorite code editor and for me, this is Visual Studio Code and I've zoomed in quite a lot so you can see a little bit better. So the file that I'm looking for is functions.php. So let's open that and usually, functions.php will be full with settings for the team but don't worry about all those or that. We're just going to be writing the new code underneath all this. So let's just make some space for the new code and I'm going to close the Explorer for now so it doesn't get in a way and let's start writing our custom dashboard widget. So first of all, let me name it quickly. Just put a comment here so we know what we're doing in this section of functions.php. So we have custom dashboard widget and the first thing that we need to do is add an action and for those of you who don't know, an action basically allows you to run code at a certain point throughout the WordPress core and this makes WordPress so extensible and basically most plugins depend on the add action operations. So let's see how we can add one and it's actually fairly simple. All we have to do is add action and this action will take two properties. The first property will be the name of the action to which the function is hooked and this function is actually called wp underscore dashboard underscore setup and the second parameter that this takes will be the name of the function that we wish to call. So let's create something like custom dashboard widget, let's say contact details for now and obviously you can make this shorter but at least we know what this stands for and let's copy this now and obviously we need to create this function, don't forget to close. To create the function we simply put function and the function name that we just created and this is where we'll be actually registering the widget. We will give the widget a name and we can add all sorts of stuff to it but I'm going to keep it simple but before we add the widget to the dashboard from here what I want to do is I want to make sure that only people that have the access to manage options on your WordPress website can actually access this widget. So let's say you can do all sorts of stuff with this but let's say you might not want some users to be able to access this those options maybe you want just the administrators to be able to change them and this is where you would normally write the code and let me show you a very simple option and this is and yeah let's start writing it and you'll see what I mean. So we can do a simple if statement and we can use another function from WordPress called current user can and current user can then we need to pass let's put manage options and as you can probably tell now if the queue what this does is if the current user can manage options meaning they can go in the in the dashboard here and change some of the options from settings and so on then they should be able to access the widget as well. That's not you don't have to add this but it's nice to know that you can do this and do specific user permissions. Now the next thing that we need to do is we need to register that widget and to do this we will add wp at dashboard underscore widget and then we need to pass the name of the action and for this we can just put custom contact widget then we need to add the title of this widget and for for us we can just add something like we can just put something like contact details and last but not least we need to pass the name of the function that we wish to call again so this one is going to be something like let's put custom underscore dashboard and then maybe contact you can put contact details but that should do the job and let's save this now obviously we need to create this function as well otherwise we will get an error and let's do that in here this is where our form is gonna go or input and we'll be able to see the values as well so if i was to save this now and go back to the dashboard and if i refresh you will see that we're now getting the contact details widget in here and obviously at the moment it's empty and of course if you click on screen options you can remove it or show it so let's have a look at first of all how we can add a few options in here so let's go back we'll just put display form and first of all i want to check whether this function exists or does not exist so i don't want to run this function if it doesn't exist and to do this what we can do is if function exists and because i'm putting the exclamation mark in here it means that if this function does not exist and we obviously have to tell it which function we are looking for and is the custom dashboard contact function and then we need to wrap this function in the use statement and let's save this and see what we get so if i refresh everything seems to be working fine and if this function did not exist basically this will not run which is great now the next thing that we need to do is create or layout for the form to make it pretty we don't have to but it's nice to have a professionally looking so let's do that i'm going to create um first of all because we'll be writing a lot of html let's close php in here and let's reopen php in here okay so just like this and now we can write all html in here so let's start with a div of a class of wrap and and WordPress has a lot of classes and that you can reuse you can have a look at their documentation but for now just have a look at this and obviously we need to close this div and let's now create the form so basically the form will allow us to update and save the details press so let's do that next and i will create a form in here the method of the form will be post because we'll be posting the details and there will be saved to all database to the WordPress database and the action that we want to use is options dot php let's close the form and inside here obviously we're gonna have our fields and i might use a table as well just to make this look presentable but the first thing that we need to do is add a nonce and this is basically a number used once to help protect URLs and form from certain types of missies or malicious misuse or otherwise and let's do that quickly so we're gonna open php in here and put wp nonce field and then we'll put update options okay and then we need to close php and now we're ready to actually write our form i'm going to create a table and obviously and also you can add classes to the table if you like to make it look better okay let's start with a table now and for the table we're gonna have two table rows but let's start with the first one first so open and close table row and inside we're here we're gonna have a th which is going to be all heading and let's close the th as well and basically we need to create a title for this and let's say we want to add a phone number phone number and in for the th we can do a few properties we can do scope equals row then we can do width of 120 we can align it not sure if this is necessary but let's do anyway and we can v-align it to the top and so on save and see what we get okay we got the phone number now and the next thing that we need to add is the input so for this we're going to use a table data and let's close a td and inside here is where we're going to be adding the input so let's start with input and for the input we're going to have a as a type of text the name will be phone number for this example maybe we can give it a size of 255 and now the value and basically we want to display the when we save the form we actually want to display the value as well to do this we can open php in here and echo the option and the option will obviously will be phone number and then we can close php in here but i need to close that okay and then last but not least we need to do we close the td now we need to close the input sorry okay so let's save this and see what we get as you can see the input is a little bit larger than expected what we can do is potentially do a style in here in last style and for the inline style we can do width of 100 percent i've put equals in here that's right and let's refresh again and as you can see now we have the phone number and let's add another one underneath here and now we can actually just copy all this and we can yeah let's copy all this and see what happened and of course we're gonna have to change the name for this one and maybe we can put email address for this one let's copy this and put this into the get option save and let's see what we get so let's refresh and i actually haven't changed the title of this so let's go back and change it in here to email address save this and it's okay so we obviously have the two inputs now but we actually need to create a button for this form as well so we can save the changes or update the changes and to do this we can go underneath the table underneath the table we're gonna have to do some we're gonna actually have to add three inputs and the first two inputs are actually going to be hidden and these input inputs are gonna help us to pass the data so we won't see them and the name will be action for this one the value will be update and the second input that we need is going to be again the type of hidden the name will be set to page options this time and the value will be set to equals the phone number and we separate it with a comma email address and then we need to close this input just like this and last but not least let's create the input the button that is going to save the changes for us and let's put this input in a paragraph so the form looks a little bit more presentable and let's put the paragraph with the class submit we might not need this I think this is a global one but let's do anyway and let's add an input and this input will be with the type of submit then the class will be a primary button primary the value is going to be basically the value is something like safe changes but what I want to do is I want to use the underscore e function which is basically used for localization in more press themes so what that means is if you change your language if you're writing with one language it's fine you can simply write safe changes here and that should work but if you want your team to work with other languages this is the way that you should do it and I can demonstrate this in a second safe changes and obviously we need to close the PHP and also you can have a look at this in a little bit more in more detail if you like on WordPress on the WordPress documentation but I'll show you how it works anyway so let's save this first of all and I think we're done with this for now refresh for dashboard and as you can see everything is looking good so let's add a phone number of 012345678 and let's add an email address of hello and ready.co.uk and let's see if this works so I'm going to press save and as you can see I don't know if you managed to see but the page refreshed and if I refresh again you will see that all details are now here and they are actually stored in the database. Let me show you as you can see this safe changes button is working quite well it's in English at the moment but if I was to go to settings in general and let me open this in a little tab you can change the site language from here and let's change it to something else I'll change it to Bulgarian and let's press save changes and if I go back to the dashboard now and refresh you will see that the button is actually using the language that WordPress is also using so that's why we've done this function here otherwise you can simply just write save changes in your language and that should work too okay so let me go back to English I'll just put UK save and if we go back the button should change back to save changes and now that we have the widget you're probably wondering well how do we display this on our website and this is actually extremely easy all we have to do is find the section of your website where you want to display it so let's have a look I actually don't know where I want to display let's say I want to display mine inside the header for some reason and I can literally display mine here let's see how this looks like let's see how this looks like first of all so as you can see this is where I written the text so I want to display maybe my phone number and my email in here and the way to do that is actually really simple with this all we have to do is we have to echo the get options and that's it so let's open PHP and do echo get underscore options and the first option that we want to get if we go back is the phone number in here and let's close the PHP so hopefully now we should see the phone number if we refresh fatal error and this is because I've actually put options instead of option so it's get option save refresh again and as you can see we have the 12345678 and if I go to the dashboard and refresh this to something else plus zero plus zero zero four four five five two two this is a random number save the changes go back to the website you will see that the changes are saved so let's bring now the email as well obviously that doesn't look pretty but that's not the aim of this tutorial and we can literally copy the same thing in here maybe just like add the line between them or whatever and the next one we want to display is obviously the email address and we can simply do that email address save go back and hopefully we should now see the number and the email address and of course if you want to link your email address you can wrap it in in a link and to do this you can maybe do href equals mail to and then the link will be in here and we'll just actually I need this we'll just close this mail to and and we can say email me or something like that let's save this and as you can see this I don't know if you can see it's a little bit hard but you can see on here at the bottom of the screen this is now mail to link and if we click on there you should ask us do you want to open your email and of course we can actually bring the email in here just by using the same thing as here so we can literally copy this and bring the email as well just like that and now we have this as a link and the custom option is displayed and as I showed you earlier we can update it from here from hello to to I don't know hey at rally.co.uk let's save this let's save and as you can see the changes are made and so on so you can use those custom options to do all sorts of stuff such as global phone numbers for your website maybe email address maybe address of your office maybe links to social media and so on basically you can use it for anything the inputs that I showed you in here you can have as anything as well you can have drop downs you can have radio buttons you can have checkboxes and so on but I just wanted to keep this simple and that's everything from this tutorial I hope you liked it I hope you learned something as always if you like to see more tutorials like this let me know in the comments below what you think of this tutorial if you'd like to see more tutorials like this again let me know smash the like button and please subscribe to my channel if you want to see more WordPress tutorials and that's it for now I'll see you next time thank you very much for watching