Part 49 - WordPress Theme Development - Create a Custom Widget

hey what's up guys Alex here thank you for checking this video and welcome to the episode number 49 of the series of tutorial on how to build a premium theme for WordPress welcome again in this tutorial we're gonna continue our work on the sidebar so right now we have basically to style all the widgets that we have in the sidebar we have to create the scrollable options we have to block the scrollable option of the index because if we have the sidebar open I don't want to scroll also the body content and plus we have to print our custom information of our custom adder that we defined in the sunset option administration panel so first thing first let's print all the information that we already have so first let's access our administration panel and in the sunset sidebar admin option you will notice that in previous lessons we are really created this section so the easiest thing to do is just access this code and copy paste it in our sidebar and it's gonna be really simple to handle let's access our ink folder inside the templates part we have the sunset admin where we handle the first page of our administration option and you will notice here we have the sunset sidebar preview option sunset sidebar image container all this kind of good stuff basically what if we were to do we have to copy these things and also the Declaration of these options so let's do that let's open the file Seibert dot PHP where we are printing our dynamic sidebar so what we're gonna do now we're gonna start creating and seeing how to create a custom widget for us because what we want it's actually the administration panel in the appearance widget section our custom widgets here with sunset information that the user can drag and drop and put wherever he wants in this sunset sidebar section that access our editor and inside e-ink folder let's create a new file called widgets dot PHP let's access our functions dot PHP in our pace folder and let's include also this file let's require it by duplicating the last line as just including the widgets dot PHP file we can close the functions of PHP and the sidebar we don't need this and let's open the widgets dot PHP in order to create a widget we have to use a class of WordPress that works pretty much but really similar to the default class of the Walker enough to edit the menu or the structure that WordPress prints for whatever menu we define to use this class of course we have to start our PHP tags let's copy package sunset to have all the others pretty much identical and let's change the style to widget class here we have to create a class in PHP that is part of the object-oriented programming the type of parameter is not procedure Abba if you don't know anything about classes and different between object-oriented programming and procedural programming don't worries like you don't need to know this stuff in order to follow this tutorial let's follow along with me and we're gonna take care of everything without getting confused so first we have to declare a custom name for our class in my case is gonna be sunset profile widget and maybe all upper cases I want to keep it consistent you can call these whatever you want you can give it your name you can give it like my custom widget whatever it doesn't matter what you cannot change its what this class is gonna extend from the default library of WordPress so we have to write extends to access a default class of WordPress and the default class is WP all uppercase widget open and close the curly bracket so now we have this new class and we Claire that is extending the default widget class of WordPress in order for us to create our custom widgets that's right a little bit of comments and here we're going to use this section to set up the widget name the description etc all the stuff that we want so now we have to declare a public function and the public function name is gonna be hundred score underscore so double in this core construct open and close the simple bracket open and close this curly brackets and let's go in another line this public function construct is a pseudo function that we don't call we don't declare in fact this type of function as you can see it doesn't have any name so we we cannot call this function but this construct is gonna get executed as soon as we call this class so if we call this class whatever things we have inside this function is gonna get executed immediately without us doing anything without us calling whatever function we want so we use in object-oriented programming a construct type of function inside a class to automatically execute something really important that we need the beginning of the declaration of whatever class in this construct so what we have to build in order to use this class we need to declare a bunch of widget options so let's create a variable called widget underscore op yes the stand for widget options you can call this variable however you want and this variable it's actually an array inside the array and wanna declare the class name and my class is gonna be equal to sunset - profile - widget as you can see here this name is pretty much identical to the class name ah this is not made on purpose it's just like B because I want to maintain this thing you don't have to maintain the same name absolutely you can give this class whatever you want because like custom class or you can also use custom class something like that you are not forced to use the same class name of the PHP class you can use whatever CSS class name you want the other attribute that I have to declare in this array is the description so we have to identify what this widget is about and this is the custom sunset profile widget so we're gonna know that these which prints the sunset profile information that we have in our administration area let's have a comma at the end let's put a semicolon after the close of the bracket of the array and then here we have to declare a parent Colin Colin underscore underscore construct and then here we can declare the like ID of our widget the name of the widget and then pass the variable so the first the name of the widget or the ID of the widget is gonna be Sunset underscore profile and then the name of the widget the one that is gonna appear in the widget section is Sunset profile and then the declaration of all the options of this widget is the actual array variable that we have to pass here so these parent construct is packaging all these options that need to be triggered by default whenever a function is calling this class so before declaring everything else what we have to do we can write after the declaration of the class we have to create an action like add action and the action is in the single quotes widgets underscore in it so the action is getting triggered during the initialization of the widget area and to call this class we have to comma and open function simple brackets curly bracket and we have to use the function register underscore widget and inside the register widget we have to declare the name of our custom class then in this case is sunset profile widget semicolon at the end let's save it let's go back in our front-end or in our backend let's click appearance again and we have an error on line 28 because we didn't clear the semicolon at the end save it refresh again and now we're going widgets area you're gonna notice we have a newly generated widget call sunset profile of course because we just in our code we just declare the class and sunset profile widget description what we're gonna have it's basically just the title sunset profile in the sunset custom sunset profile widget description if we drag and drop it in the sidebar there are no options for these widgets because we don't have anything here so what we have to do now that in our code we generated a custom class we generated the action to trigger the custom class during the widgets initialization and with our default construct function we declare the basic information so the ID the name the class name and the description of this widget now inside this class we can declare other functions in order to customize the experience of this widget so the function that we can use are pretty much three the first function is the function that handles the front end of this widget so what gets printed inside the side bar in the front end the second function handles what gets printed in the backend of the widgets or inside the appearance widgets area and the third function is what handles the save and update of the widget so in case we have some specific option like some specific numbers a custom form or something every time we click for example here we have new categories the only options that we have are the title and a show post every time we click Save this click is gonna trigger the third type of function that handles the update of all the custom variables let's call and let's create the first function to display the front-end so let's create a comment and that's right front hand display of widget and let's create the public function called simply widget this is a default function of WordPress inside WP widget class so we don't have to call this function because this is a default one and WordPress knows that if we have something declare here it's what he needs to use to print our information in the front end we have to pass a couple of variable a couple decoration first or all the arguments there are inside our being declared inside our widget second one is the instance type of the widget so every time we have a widget a widget has gonna be a unique instance because as you know you can put as many widgets as you want here we could also potentially have three times the categories widget so we can have the same widget multiple times and we have to remember that an option of a specific widget can be different from the object to the same widget by repeated later in the sidebar so if we have the same widget three times maybe we have three different options we don't have the same so this instance is going to carry all the options to death specific single widget instance it's gonna change based on how many widgets we use let's open and close the bracket and for now let's keep this section because I want to take care of the backend section of my widget so let's go back up here let's create another comment section and let's call back and display whoopsy display of widget and let's create again a public function called forum and WordPress handles the backend has a form so this function is called form even is not the most intuitive thing ever that's how WordPress handles it so I'm sorry about that and the only thing that we have to pass here is the instance of our forum so let's open and close here and basically here we can return or we can print or echo all the information that we want we can echo all the HTML whatever structure we want we want to declare fields custom fields and stuff the only thing that I want to return in this section is message to say hey these specific widget can be managed by these admin section so the sunset admin page alik add section so what i wanna do i wanna basically yeah have an error here because I didn't finish to write the code but no worries I'm gonna copy this let's go back and then in the backend I'm gonna simply echo a message call in the paragraph tags no options for this widget and then another paragraph you can control the fields of this widget from this page and let's put an href a giraffe and let's bring my custom page and let's close the a tag let's save it semicolon at the end let's save it let's return nothing for now let's go back in our front-end or back-end let's refresh now if we drag and drop the sunset profile widget we're gonna have no options for this widget you can control the fields of this widget from this page if we click we're gonna get redirected to the alak at sunset because I invert that specific unique code so if we go back here you will see all this stuff we can simply actually do something like that let's remove this stuff I don't wanna have double paragraph but I wanna have these as a line break and then I want to embed I wanna wrap these stuff around a strong HTML markup so this is gonna be bold and then we're gonna have everything on two lines sound set profile now options for this widget you can control the fields of this widget from this page let's say if nothing happens because we don't have to save anything for now that's what we're gonna do for the back end of this video of course in the future we're gonna create other widgets with some custom options to update this stuff now we have to take care of the widget front-end because if we save this and we access the front and again we refresh we open the sidebar here does nothing let's inspect the element and let's access the sidebar inside the sidebar scroll that's the sidebar secondary we have category recent comments and tag clouds even if we have our custom widget in the back hand we don't have anything in the front-end because our front-end widget public function is returning null so just as a test we can simply echo front-end let's save it let's go back in our front and let's refresh actually this is annoying because we are editing the sidebar let's remove for now let's cut this class here and let's keep it saved here but as a comment because I don't want to use inner now because I'm editing the sidebar on the side we're constantly open soul refresh now it's gonna be you're gonna look what we have here front and basically we are printing whatever thing we decided to print in our section or of course here we don't have anything we don't have the section we don't have the idea of the our widget we don't have the class of our widget all these stuff we have to take care of manually creating but don't really we can do it dynamically so first let's remove these echo we don't need it first what we have to print are the default declaration of the widget and the widget has these arguments variable that is carrying the default declaration default declaration is basically how the widget is structure so if the widget has a section with an ad and a class that we actually declare here the class and the ad automatically the widget should maintain this structure and whatever we declare in our widget declaration when we activated the sidebar so in order to print dynamically this stuff we have to simply absolutely simply echo the arguments and the arguments is an array so we have to access the value in the array with the square bracket of the before underscore widget attribute and after that we have to echo again it's always args square brackets the after widget attribute so before we jet and after with your attribute of the arguments array dynamically passed are gonna contain this section stuff that we declare dynamically if we access again look what we have here we have the ID sunset profile in this case is 3 because we at the we use that widget three times so it's a random number that WordPress adds to our widget and we have these custom class the sunset profile widget that we declare in our declaration while we have section ID and sunset widget class because we declared when we created the Hyper in our ink folder inside the thin support option we created the sidebar with the register sidebar and look what we declare here the before widget the after widget the before title and after title and as you notice in order to print the widget we are printing the before we Gen after widget that are identical identical to this section with the sunset widget class and whatever custom ID and custom class we declare so all the stuff that we declare in the sidebar are accessible in whatever custom widget within these arguments and this is pretty amazing so we can keep the consistency of our widgets and manage the HTML structure always everything within the themes support option inside the register sidebar now what we have to do here we have to simply copy paste all these stuff that we already declare and we already created in our admin section so let's go back in our Inc folder let's open the templates part and the sunset admin dot PHP is the file that we used to manage profile section so let's copy all these PHP variable this PHP declaration and inside the widget let's print it everything here that's it done properly and in between the before and after widget we can simply copy the image container and all this wonderful stuff widget let's paste it here so here you could potentially do a couple of different things is not wrong to do it you can actually interrupt the PHP tag and reopen it after if you don't want to rewrite these if and if and print directly HTML inside the class it's not wrong to do it like it's not the best practice ever to have inline HTML inside a class inside a function and interrupt the PHP tags but WordPress doesn't mind things WordPress works with this thing properly so we can maintain it like that let's save it let's go back you know our front-end let's refresh let's see what and this is brutal as you can see we have all our information have name description and maybe a bunch of icons here we have everything but nothing in style because all the style that we have in our back-end are inside the class of the backend and the style of our master Shambhala is inside the CSS Sansan and main dot CSS all these custom classes that we declared only for the purpose of selling the admin section so what we can do we can simply copy all this stuff here for our custom information and paste it inside our sunset dot a CSS down here in the sidebar and let's make a little bit of that mean they cleared classes save it let's go back in our front let's refresh and now we have the same style something's missing here we don't have the icons and it's not properly Center aligned so let's fix everything first let's go back you know we just area and inside here let's have a container div class text Center and let's close the div let's go back here refresh now everything in center let's check if we have our icons so we have the icon wrapper we have the sunset icon but we don't have the dash icons because the - icons are part only of the backend what we have to do we have to change the dash icons to use the sunset icon that we have declared in our front-end so let's change this to sunset - icon and sunset Twitter and sunset icon sunset Google+ and sunset icon and then sunset Facebook save it let's go back you know fronting let's refresh and we don't - I can - icon before we didn't change it oops I did wrong I updated the sunset hot wind PHP so let me copy this section go back sorry guys I did something wrong let's go in the widget section I was editing the wrong file and let's update it stop indent it properly let's save it refresh this is Google+ I think refresh and there you go now we have our custom sunset icons with all our stuff here what we have to do we have to add some unique link to be clickable and go to these actual social media accounts so first of all the Twitter account is a href HTTP column slash slash twitter.com forward slash and let's print echo deep Twitter icon variable and let's do target blank underscore blank so we're gonna force this page to be opening a blank page and let's close these hey tag so let's do pretty much exactly the same here and let's remove something like that let's copy all this stuff and we're gonna change 8a and we closing the 8 hug pom-pom and let's do the same here for Facebook that is gonna be facebook.com slash Facebook icon and then the Google+ that is the weirdest one that is gonna be plus.google.com /u /z forward slash plus and then D G + icon handler let's save it let's go back in our front-end let's refresh and now we have the icon that goes to my Twitter account then Facebook that goes to my Facebook account and then Google Plus that I think it's not had a cat because it doesn't exist so I have to update these options and let's do that like a regular user let's click on this page it's gonna go here and my Google+ is actually my first and last name Save Changes perfect let's refresh and we have Google+ and that's my Google+ profile and that is amazing so this thing still works it's amazing so what we did we created this custom widget and if we want to check we can access the backend and simply go in appearance widgets open this and delete this widget go back in a frontal refresh we don't have the widget anymore if we put it back just simply drag and dropping say that let's go back here refresh Taron we have again these beautiful style widgets with all the option that we had before and this is amazing so in this lesson we check we saw for the first time how to create a custom widget by using the WP widget class of WordPress by extending all the option to control the forum and the widget of course we didn't do the last function that is the update function that is the one that is necessary to control the updates and all the custom options that we could have in a widget but we're gonna take care of all this stuff later in this series of tutorial because we are gonna create a custom a couple of custom widgets for our gallery and maybe for our popular WordPress posts in order to have a couple of customizable options inside our widgets area so it's pretty much it for today's lesson I hope you enjoyed if you did please give or subscribe to my channel and if you want you can spend a couple of minutes on a support me page on my website where you can find all different methods and ways to support me support my channel and help me to do better videos and better tutorials for you thank you again guys and until next lesson has usual happy coding

Channel: Alessandro Castellani

Views: 28,778

Keywords: wordpress, coding, tutorial, help, php, oop, widgets, web development

Id: OJdIUU1pjl4

Length: 29min 17sec (1757 seconds)

Published: Thu Aug 04 2016