Create A Wordpress Widget - Part 1

hey guys in this minseries we're going to be building a WordPress widget all right and a WordPress widget is basically a plug-in uh it's just a certain kind of plugin you can log in into your WordPress admin area and go to widgets and then you can pretty much drag them to uh whatever position your template allows all right and what we're going to be building is basically a a Facebook likebox widget um so you can get a like box if you go to this URL all right so normally the user would need to uh enter their page URL uh set up some parameters like the width the height the color what they want to display and then they would have to get the code and they would have to get this JavaScript SDK and include that in their site and then they would have to find somewhere to to embed this HTML um and for someone that's not a developer and doesn't know much about um HTML or JavaScript uh can be kind of a pain so uh this widget will just will be able to install it in a WordPress site very easily um basically just upload it and then the user can go to the back end and go to the widget parameters and they'll be able to edit this stuff there okay instead of having to come here and then generate the code and all that all right so uh that's what we'll be building and if you're serious about learning how to build WordPress plugins and widgets um I suggest going to this URL okay this is the widgets API and this actually has a lot of the code that we're going to use um and there's a bunch of other information as well um I'd also suggest going to the plug-in API page as well all right so this is our site um actually let me reload that's not supposed to be there so it's just a basic Al a default WordPress installation uh this is version 3.91 but I do have the I think it's the 2012 template enabled um just because it's easier to see the sidebar and all that all right so with that said what we're going to do is open up I'm using notepad++ all right and I'm in my let me go to the root directory okay so this is the root directory of my WordPress site okay so what we're going to do is we need to go to the wp content folder and then the plugins folder and then we want to create a new folder and I'm going to call this likebox okay and then in that folder we're going to create a couple files all right so the first one is going to be just called likebox PHP and then we're going to create another file I'm going to call this one class. likebox PHP okay so this will be our main file um and then we'll include this which will be the like bux it'll be the widget class um and that's where most of our coding will be okay uh and I'm also going to create a new folder called JS because um we need to include our JavaScript SDK so inside there I will create another file and I'm just going to call this actually I'll call it um like box. JS okay so these are our three main files all right and we'll start with the the main file which is basically the entry point for the widget so the first thing you need to do when building a plugin is you need to include a comment block which basically um shows your WordPress that you have a plugin and it displays the name and also um you need to have it so that it'll pop up in the back end all right so we want it to show if we go to plugins all right we want it to show here so we can actually activate it okay and let me just get that code for you okay plug-in API if we scroll down where is it maybe this isn't the right okay writing a plugin this link here here we go all right so here we have the I guess called file headers okay so it's just this comment Block in PHP so I'm going to copy that and paste it and we're just going to change some some things here the plug-in name is going to be likebox plug-in URI um I'm just going to say Cod skillet.com description we'll just say uh simple plugin to show Facebook like box I believe the only field that's required here is the plug-in name I don't think you need any all this uh it's just good to have though um just for metadata version will be 1.0 author feel free to put your own name okay URI we'll say Cod skillet.com and then license we'll say gpl2 that's fine all right so this is actually all we need for it to show up in WordPress so if you save that and then go ahead to the back end and and reload this plug-in area now you can see we have our likebox plugin okay it has the description the version the author it goes to the to the author's site so very easy to actually get it to show up here all right so um let's see I'm not going to activate it yet what I want to do now is I want to get it so we can include our Javascript file so we're going to create a function okay and this is going to be called addore scripts all right and then in this function we're going to call a JavaScript function called WQ uh I'm sorry WP um what is it n qu e u e scripts all right and we can actually look this up all right so basically um it has a few parameters okay uh that actually this one here is for CSS same thing but except style all right and here's ours wpnq script all right and the parameters uh let's see the parameters the first one here my J this can basically be anything it just uh basically is a a context reference um the next one is going to be the actual URL to the Javascript file and the false I can't remember exactly what that is um doesn't look like it gives us a description of the parameters example all right well basically we're just going to use false for that third parameter uh so the first parameter I'm just going to put you want to make sure you have quotes and we'll say likebox scripts okay the next one is going to be a URL or uh a link to our Javascript file and in WordPress we can actually use this plugins uncore URL function and that will get us to our actual plugins folder all right so from the plugins folder we want to concatenate on slash likebox and then sljs slash likebox DJs and that'll bring us to our JavaScript file and um let's just put in false for the third parameter all right so that is our ad scripts function right now it's not going to do anything it's just a declaration so we have to tell WordPress when to run it so we're going to use this add action hook all right so what we're going to say is the first parameter is going to be this WP NQ script I'm sorry this first one should be script okay singular and then this here is scripts all right this is the actual hook so um oops the next parameter we just want to put in the name of the function that we created which is ADD scripts okay so that should add that now what I want to do is activate the plugin so activate and then in the front end uh let's go to the Javascript file and just give an alert we'll say alert one okay so now you can see that that JavaScript is now included okay we'll delete that so that's all set the next thing we want to do is include our class file okay so we'll say include class you should you should have your code um well commented so this will add add our JavaScript okay include class we're going to use include and class do it's in the same directory so just do class. likebox do PHP okay that'll include our class and then the last thing we want to do in this file is uh register our widget and then all the rest of the code will be pretty much in the class all right so to do this we want to say function register like box okay and then we're going to call register uncore widget and let's see we're going to pass in likebox underscore widget and then we need to use the add action hook again so add action okay we're going to use uh widgets underscore and nit and then the name of our function which is register like box all right so that's basically all the code we need for this main file all right the rest of the stuff is going to go into our class and we will get into that in the next part