Build a Useful Wordpress Widget Plugin

[Music] hey what's going on guys in this video I'm gonna show you how to create a wordpress widget plugin from scratch and it's actually gonna be something that's pretty useful it's gonna be a YouTube subscribe widget that displays a subscribe button as well as your avatar and the number of subscribers and we're also gonna have some options in the backend to disable the sub count obviously change that the channel name change the layout things like that now I'd suggest watching this even if you don't know PHP because WordPress plugins are basically just a boilerplate and you have to just edit certain parts of them to change up the functionality and make it your own alright so that's what we're gonna do in this video let's go ahead and get into it so if you guys really like my videos and you learn a lot from them and maybe you have a couple extra dollars to spare check out my patreon page I'm working on creating special content for patrons you also get special deals on future courses and there's even an email support tier for all YouTube videos and projects to learn more visit patreon.com slash travis e media alright so this is the front end of our WordPress website and this is this has been untouched this is the default installation this is what you'll see if you go and install it right now ok it's using this default template which just has a big image and then we have some content down here alright now i'm using xampp which is it gives me an apache server PHP and mysql all on my localhost that's why you see localhost WP site right here i do have a video on showing you how to set up xampp i think it's the second video in the PHP front-to-back series if you want to set that up and then installing WordPress is really easy I may create a wordpress for beginners video as well but what we're going to do is we're going to create our plugin our widget and we want it to display over here so we're gonna have the subscribe button with the number of subscribers for our channel and the image and we're gonna have it on the sidebar here so if we go over to our back-end okay so this is the the WordPress dashboard we're going to be able to go down to plugins and we're gonna see our plug-in here we'll be able to activate it and then we'll be able to go to appearance and then widgets and we'll see it over here and we can bring it over to wherever we want to put it in our case it's gonna be the blog sidebar ok so here you can see there's the search widget recent post recent comments that's what you're seeing right here on the sidebar alright and then we'll be able to have some options if we click it it will have the the ability to change the channel name to change what else if we want the the subscriber count' to show the layout things like that all right so it's actually pretty useful so let's jump into we're gonna jump into Visual Studio code and you can see I have over here the entire WordPress website it's just called WP site so if you install WordPress this is exactly what you'll have all right so we want to go into the WP content and then into plugins this is where you want to build all your plugins so we're gonna create a new folder here called YouTube subs that's gonna be the name of our widget when I say widget and plug-in I mean that that interchangeably a widget is basically just a plug-in that you can display on your site somewhere there are plugins that do other things like SEO and stuff like that but this is actually a widget so let's create a new file in here it's gonna have the same name as the folder so it's gonna be YouTube sub dot PHP okay and this is basically like the entry point for our plugin now every plug-in needs to have a header and I actually have a couple links open let's say you want to go right here so this is this is part of the documentation for building a wordpress plugin this is where code X dot wordpress.org slash file header and this right here is an example of a file header it's basically just a PHP tag and then a comment with some stuff inside of it okay and it looks at this stuff the system looks at this stuff for your plugins so what we'll do is just copy that and go back into our file here our main YouTube subs PHP and we're going to paste that in okay and then we just want to change some stuff up like the plug-in name we're gonna change to youtube subs and then for the plug-in URI I'm just gonna put my website and description we'll say display YouTube I guess YouTube sub and count okay version I'm gonna do 1.0.0 author I'm gonna put my own name and this is completely open-source you guys can put your own name if you want author you are I'm gonna put the same thing and I'm going to just get rid of the last two text domain and domain path alright so let's go ahead and save that and just by doing that if we go back into our WordPress back-end and we go to plugins there it is YouTube subs okay display YouTube sub button and count as the version as the name and it has a link to your site just by adding that one little comment section now we need to do a couple things in that file basically we're gonna mostly require other files in that file but we don't want it to be accessed locally or directly I should say so right now if I go to WP site actually you know what let me go back to that file and I'm just gonna do an echo one tooth one two three all right and if we go back to and what let me close this stuff up oh did I close the wrong window I did damn it hold on guys so was a local host WP site alright so if I go to WP site slash and then we navigate to this directory so it was WP dash content slash I head comes up right here plugins /youtube sub slash YouTube subs dot PHP you'll see that it'll actually echo out one two three and we do not want that we don't want anybody to be able to access this file directly so we need to put something in here we're going to say exit exit if accessed directly and to do that we're just going to do a simple if statement we're gonna say if not defined ABS path okay absolute path then exit okay and then down here if I go when I say echo one two three and we go ahead and save and we go back and reload you'll see that it's not going to show up it's not going to basically it's not get allow us past that point all right so you want to make sure you have that and that's a big security issue all right so the next thing we want to do is we want to create a file for our scripts because your plugin may have javascript files associated with it CSS files things like that so inside YouTube subs let's create let's create folder called includes alright and this is typically how WordPress plugins are built you don't want to put all your files right inside the main folder you basically just want your main file and then everything else you want to put in includes so except for your your assets like CSS files and things like that but we're gonna say new file and then we're gonna do YouTube subs - scripts dot PHP all right and then in here what we want to do is its first put in our PHP tag and then we're going to say add scripts and let's put a function here okay so this function now all your functions should have a prefix which should be your your domain you can use anything you want just make sure you're consistent so I'm gonna use YT s for youtube subs and then the function is gonna be called add scripts all right so YT s add scripts and we want to do two things you want to add main CSS okay I want to have a CSS file and then we want a J s file so add main J s alright so right here what we want to do is we want to use a function called WP underscore n Q so en qu eue underscore style okay and then in here we want to paste in will do YT as - main - style now this NQ style this is part of the WordPress API in fact if we go when we search for it we'll get a page on it so basically NQ a CSS stylesheet registers the style if source provided so basically it takes in a bunch of parameters the first one we just put in as the handle alright then we want the strip D source okay so basically the location of the of the stylesheet so full URL of the stylesheet so let's go ahead and add that okay this is the handle we're using now we want to access basically our plugins folder and there's actually a function we can use as a shortcut to get to that and that's plugins excuse me underscore URL alright so that'll bring us to the plugins folder and then we want to just concatenate /youtube subs which is our plugins folder actually should have quotes alright so /youtube subs and then we want to go into a CSS folder which we haven't created yet but we will and then we'll call it style dot CSS I hate this keyboard alright style dot CSS okay so it's just gonna load up that file for us now for the JavaScript we basically gonna do the same thing I'm losing my voice so we're gonna paste this in except this time we're going to use NQ script okay this just signifies that we're using JavaScript instead of instead of a style instead of CSS so for the handle will do YT s main script same thing plugins URL except this time it's gonna go to js' and it's gonna go to a file called main dot j s alright so that's the function to create our scripts now right now it's just a function sitting there we need to actually hook it into WordPress so we need to use something called a hook and we use a function called add add action for that the hook we want to use is WP underscore and Q I always have an issue spelling this enq you eue underscore scripts okay and then the next parameter is just gonna be the name of this function so why TS underscore add scripts alright and that should put it right in there when WordPress hits this hook it's gonna know to load this function and add our scripts alright so what we need to do now is include this youtube's subscripts file into our main file okay so we're gonna go down here and what we're gonna do is we're going to use a PHP function called require once okay and all that basically does is it's going to just include one file into another so we want to access that scripts file we can actually use a shortcut function to access our plug-in directory so that's gonna be plug-in underscore dur underscore path and then we just want to pass in double underscore file double underscore okay so that's going to access our plug-in directory and then from there we want to go into the includes folder so we're just gonna concatenate and we're gonna use a dot and then some quotes we're gonna say slash includes /youtube subs - scripts dot PHP okay so that's going to include that file all right actually let me put a comment here we'll say load scripts okay I'll save that now if we go to actually first of all let's create our CSS and JavaScript folders because what that file that we just created did is gonna try to load these files now we're not even going to be writing any CSS or JavaScript but this is really important because in your plug-in that you write you may need to so it's good to just do anyways even if you don't plan on it just just in case you know for the future so in our YouTube subs core fold or not the include so we're gonna create a folder called CSS inside there we're gonna create a file called style dot CSS and then inside same thing inside YouTube subs we'll create a folder called j/s and inside there we're gonna create a file called main jeaious alright and now what we'll do is go to WordPress we're gonna go to the back end which I need to actually go to so it's going to be WP dash admin and what I'm gonna do is go to plugins and we have our YouTube subs plugins let's go ahead and activate it and then if we go back to the front-end so visit site and we do a control you and will search for YouTube you'll see that the style sheet is actually now being included plugins YouTube subs CSS style CSS it's also including the JavaScript file all right so really cool and if we were to just go to let's say main J asks to our JavaScript file and say console dot log and we'll say we'll just say YT s loaded and we're not going to be writing any other JavaScript I'm just doing this just to show you but if we go back to our front-end and let's go ahead and open up the console with f12 and reload you'll see we get YT s loaded ok so we know that it's loading our scripts so now we want to do is we want to create a class ok our main widget class I'm going to close all this stuff out and let's see we're gonna go to our includes folder once again and create a new file called YouTube subs - class dot PHP now I'm going to open up a documentation page here which is really important it's the wordpress widget class i don't know the exact URL right here widgets api and if we look at this right here we have a class called my widget and it extends something called WP widget and then there's four different functions there's a constructor which it which takes care of naming the widget things like that then we have the widget function which takes care of the output of the widget so the front end output which is going to be right here alright and then we also have the form function which takes care of the form on the back end so if we go to appearance widgets well and we have will have a form like this right here that's that takes care of that and then we have let's say we have the update function which takes care of processing the data so when we add something in the in this back end form and we save that update function is what takes care of that okay so the four main functions now what I'm gonna do is copy not this but if we go down here there's an example here I want to grab all of this okay so it's kind of like a boilerplate for any widget that you're gonna create and then we're gonna go to vs code and we're gonna paste that in here actually let's put in a PHP tag first and then we're going to paste that in alright so from here we have quite a few things to change and to add let's go ahead and change it's not going to be few widgets gonna be lets say adds youtube underscore subs widget that's what we're gonna call this we're gonna leave the word widget we're gonna say youtube underscore subs underscore widget and it's gonna extend WP widget which gives us a whole bunch of properties and methods so for the constructor let's go ahead and change the base ID so we're gonna change that to youtube subs underscore widget we're gonna give it a title so say YouTube subs now the text domain is kind of like an identifier you want to make sure this is the same throughout your entire class I'm gonna change it to white ES domain okay we'll change it here as well for the description let's see we'll change this this is the description will just say widgets to display YouTube subs all right so that's it for the constructor now this right here this widget function is this is responsible for the output now you'll see we have this this echo args before widget and then down here we have this echo acts after widget so this is this just represents anything you want to put before your widget so if you wanted to put like a div tag with a special class things like that in fact I'll put a comment here we'll just say whatever you want to display before widgets so like an opening div tag alright and then down here we'll say whatever you want to display after the widget like the closing div tag because obviously if you have an opening div tag you need a closing one so this right here is just about the title it's going to check to see if there's a title if there is one it's going to display it it also has this before title and after title so if you wanted to put an h3 if you wanted to put an h1 it gives you it does this to make your widgets very customizable and then this right here is the actual output ok so this is the widget content output now this escape HTML what this is it's a special WordPress function that's going to display whatever you put in here but it's going to escape any HTML so if we put a paragraph tag in here it's not gonna it's gonna escape it now we don't want to use that because we do actually want to display HTML in our widget so what I'm going to do is just get rid of that that escaped HTML and let's just echo out a string for now we'll say hello from YT s widget all right now we're gonna change this obviously but for now that's all what we're gonna have now down to the forum this is where we want to put all of our inputs for like the channel name whether we want to display the count or not and I'm just gonna format this a little better so basically each field will be wrapped in a paragraph so we'll have a label and an input and what I'm going to do is put each attribute on a separate line so that's the four attribute let's see actually that only has a four attribute but let's go like that alright so we have a label tag wrapped around this right here let's change text domain any instance of text domain should now be white es domain in fact what I'm going to do is go to edit replace and we're gonna replace any text underscore domain with white es domain it looks like there's only two left so let's just go ahead and change that alright so we have a label for the title and then we have our input so for the input they'll have quite a few attributes so I'm gonna put each one on a separate line the class class of wide fat it's basically just for the WordPress UI for styling so we have the ID the name the type and the value all right so we have our paragraph with the label and the input and I'm just gonna put a comment right here look yeah we'll use and we'll just say title all right so we're gonna add more fields but for now we'll just leave title but one thing I do want to do is for the default title I don't want it to be new title I want it to be YouTube subs all right and then down for the last function here update this just takes care of updating whatever fields you have we only have a title so this is fine to leave for now and it's going to be all your fields will be inside of an array called instance okay so it's basically going to check to see if it's been changed if it has it'll change it in the database so let's go ahead and save this now one more thing we need to do before we can actually display our widget and see it in the backend and the front-end is we need to register it so we're going to go back to our main YouTube subs PHP file and we need to include that class file just like we did with the scripts so I'm gonna copy that and let's just say load class and we're just gonna change this to youtube subs - class dot PHP okay that way it includes that file now to register it okay we're gonna create a function and we're gonna call this register underscore YouTube subs and then we're just going to call a function called register underscore widget and then we want to pass in the title of the class which is if we go up here this right here YouTube subs widget so we're gonna grab that and we're going to put that right in here inside of quotes now we've just defined the function we now need to hook it in just like we did with these scripts and we use the add action we need to do that here so let's say hook in function so we want add action and WordPress has a whole bunch of different hooks you can you can you can hook into and that's all in the documentation but what we want to do is we want to hook into widgets it's gonna be whoops that's not right widgets underscore and knit okay and then we just want to put in this function name right here okay and that'll register it and that'll hook it in so let's save it now if we go to our backend and we go to appearance make sure it's make sure your plugin is enabled or activated and then you should be able to go to appearance widgets and there it is YouTube subs see it right there and what we can do is bring it over let's put it right under the search and we have a title okay that's the only field we have right now but that's fine let's go ahead and save it and now let's go to our front-end and reload and there's our widget YouTube subs that's the title and we get hello from YT s widget because that's what we put inside the widget farm yeah the widget function which handles the output all right so it's as easy as that to get your your widget up and running now we just need to add special functionality to it and we need to add our fields all right so to add a YouTube subscribe button I don't know the exact URL let's say add YouTube subscribe button right here configure a button okay so this is just you know if you want to display this in your HTML it's as easy as just putting this this code in and you can change these options here like the channel name my channel name is actually tech guy web okay and you'll see that it actually change 159 thousand subscribers if I change the layout to full it'll actually display the name and the image we can also choose to hide the subscriber count' what we want is we want these to be options in our WordPress back-end ok and you can see that these are implemented by attributes so data channel we have data channel we have data count which is either default or hidden we have data layout which is either full or default so we want to display this HTML in our output but before we do that we also need to include this script right here so we're actually going to add to our scripts file so let's go to let's go to want to go to our YouTube's subscripts and let's see from here inside the add scripts function let's say add add Google script so for this we're gonna do WP underscore register script and we're gonna give it a handle call it Google and then we need the actual script the actual file so let's go ahead and just grab this link right here it's this platform j/s we'll copy that and we're gonna paste that in right here now just doing this isn't going to do it we actually need to add another WP and Q script like that and then we just need to pass in the handle which is Google okay and that should load this this external script so it's save it and then that should be all we need to do there so now we want to go back into our class and we want to take care of the output and all that stuff so let's grab let's see we'll leave full we'll leave subscriber count' default all right and then I'm gonna copy this div okay we're gonna grab that div right there and then go back to our class and remember the widget function is what takes care of the output so instead of echoing this out hello or whatever we're gonna just paste that in let me turn on word wrap okay so we paste that and now if we save this and we go to our front end and reload there it is okay now as it is now if you were to take this widget and install it on your site you always have traversing media there and you obviously don't want that we want to have options to change the channel to change the options and all that so that's what we're gonna do now so let's go back to vs code and we're gonna start off with the form okay we want the we want some more for values aside from just a title so notice at the top here we have a title variable it's getting set to whatever the instances in the database so we're gonna copy this right here paste in another one actually it should be okay make sure it's within the PHP wait a minute this should be up here and then we just want to know that's not what I want either so the PHP ends right there alright that's what we want so instead of title let's change it to channel alright and then we want to change each instance to channel and let's see for the default this is actually the default value I'm going to put my channel name you can put your own that's what's going to show up just you know when they first install the plug-in and then down here we need a form field for the channel so let's just copy this whole thing the whole paragraph alright we'll change this and we're going to change all the instances of channel to tighten I'm sorry title to channel just like that and then this variable here okay that variable is coming from this right here alright so that'll actually add the input if we save that we go take a look at the back end and we reload the widgets area you'll see now we have a channel name now if I change this and save it's not gonna it's not saving the reason for that is because we need to we need to update the update function so let's go back to vs code go down to update and we're gonna copy this right here this instance title and we're gonna paste that in and change this to channel channel and channel alright so let's save that and now let's go back and we'll go ahead and change this let's change it to another great channel which is dev tips for designers I think that's it save and now you can see it's still there if I reload it's still there now if I go to the front-end and reload it's still traversing media because we haven't implemented the actual you know the value coming from the database so we need to go back to our code go but up to the widget function which is the output and you can see it's hard-coded tech guy web all right so we want to change that let's see I'm going to change that by just concatenating in here we'll put some single quotes and then some periods and then we can just say instance yeah instance and we want the channel all right so let's save that and let's go back to the front-end and reload and there we go now we have dev tips so as as simple as that to add a field and have it update and then have output in the front end so now we're gonna do the same thing for some other options we want the option to let's change this back I really like dev tips but I don't want to give them too much promotion there we go so let's add the option to to change the layout okay because we can change the layout here you see we have default and then we have whoops I'm not going to do doc we're not going to implement the theme but we can change it to its full and then we have default which just gets rid of the icon and all that alright so let's go back go down to our form function and we're gonna copy this okay and this is gonna be for the layout so for the label we'll just change this to layout layout now this is actually going to be a select okay it's not going to be a input so let's change this to select alright class-wide fat still applies ID same thing we're going to just keep it at this get field ID but we want to change this to layout same thing with name we don't need a type because it's a select let's see we also don't need a value excuse me yeah we're gonna get rid of this so that's the opening select of course it needs a closing select all right and then we're gonna have some options so let's put in option value so value will be default and fall so this will be default and then we would just want to put in a PHP tag here we're gonna say echo layout so layout equals default okay we're using a ternary operator here we're basically saying if layout equals default then we want to display selected okay else then we want to display nothing all right and then we'll end our PHP here and we'll end the option tag or the B key this the beginning option tag all right and then let's see inside the text for option will just say default all right so this here is just saying if it's if it's enabled if that's what what it is if it's default and adds selected so that it's pre selected in the in the form and then what I'll do is copy this and we're gonna paste that in here and then we're gonna change the value from default to full okay we're going to change it they're also going to change it here and then change the text to full so let's save it and let's see if it actually shows up in the form so we'll go back to our back end and reload and if we look now we have a select with default and fall all right so it's not going to save now if I change it to full you see it's not going to save yet because we have to do the update function so we'll go down to update we'll copy one of these paste it in we'll change this to layout layout and layout okay so now that's gonna make it save and then we want to implement it up in our output okay so right now we have where is it right here so we have data layout equals full its hard-coded what we want to do is just get rid of that and concatenate instance we want to do instance and then layout okay so let's save it and let's go back let's check the front-end it should be yep so it's default by default but if we go and we change it to full and we save wait a minute say full and save okay so it's not saving for some reason let me see what what I do wrong here so if we go down to update let's see instance layout new instance layout so that should be saving did I not save this file hmm something up here maybe let's try it again so fall save yeah it's not saving is this stuff saving tech guy one tech iweb one that saves hmm I'm not sure why this is happening so we got a layout here oh you know what we didn't add it up here as a variable that's what it is so let's go ahead whoops should be within the PHP tag alright so we need to add this layout layout and let's say for the default here we'll just leave it at default I guess yeah like that all right so let's try it again hopefully it works it should if we reload and we go ahead and change it to full and save there we go and now if we go to our front-end and reload nothing so it is saving here it's saving to fault I must have something wrong hmm let's go back up here to the output I spelled instance wrong all right so now it should should look it should look should have a full layout now there we go all right we'll change it back to default just to make sure and reload there we go good so the last thing we want is the option to not show the subscriber count' if we don't want to so let's do that let's go back to our forum function here and just so I don't forget let's do this first so this will be for count you guys can see that even if you don't know PHP this is kind of just a boilerplate that you can edit to your liking and you don't really have to understand every single line of code let's see so count we're gonna leave it at default because there's two options there's default and there's hidden okay now let's add the form field which is also going to be a select so I'm gonna copy everything we did for layout paste that in this will be count change all these to count that so we do have a default option that's fine this one however full is going to be hidden ok we'll change that to hidden and then finally let's go down here to update and we'll just copy one of these ok we'll change that to count count and count all right and then for the output so up at the top here where we have data count equals default I'll just grab this so it'll be instance count all right let's save let's go to our back end and reload and then we should have a count option which is set to default and if we look at the front end you'll see it shows the count but if we change it to hidden and save which it didn't save did I do the same crap instance counts see why did that not save IAI sorry guys alright got it so in our field here the Kyle field I have it set to lay out equals default this should be count okay that should be count and so should this it was looking at the wrong variable all right so let's try it okay so it's changed to hidden now let's go to the front end and reload and now the SUBSCRIBE count is hidden all right so now we have a customizable widget let's change the delay out to full and save reload so now we have a full layout but the SUBSCRIBE counts hidden we change that to default from hidden there we go so now we can see the subscribers so that's it guys we have created a widget and it's pretty useful you guys can use this in your WordPress websites if you want if I wasn't changing my site from WordPress I would use it but I'm gonna be changing the whole my whole website I'm not happy with it not happy with using WordPress but yeah so that's how you can build a plug-in or widget or both so thanks for watching guys please hit that like button if you liked it please subscribe and I will see you next time

Channel: Traversy Media

Views: 74,339

Rating: 4.9313021 out of 5

Keywords: wordpress plugin, wordpress plugin development, wordpress widget, custom wordpress plugin, custom wordpress widget, create a wordpress plugin, wordpress, wordpress plugin tutorial

Id: eZn3tfF5GFM

Length: 44min 38sec (2678 seconds)

Published: Sun Aug 27 2017