WordPress Plugin Development Part 2 | How To WordPress Development Article 2019

WordPress Plugin Development Part 2 | How To WordPress Development Article 2019 :

In this article we're going to continue our WordPress plug-in development. The first article we started working on a plug-in it was a very basic plug-in and today we're going to expand on that plug-in with a few more options so let's get started. Okay here on our idea Pro example website its idea Pro com slash example in the first article we created this simple plug-in called idea pro example plug-in and we have that plug-in installed here. So it's active on the default post we have here for the site we've included this short code example and right here we have add short code example idea pro example function.

Which is a callback to this function here and then the content that displays is this here which we return it if you didn't watch that first article I'll link the click here to that first article and also link it into the description of the article. So we're going to continue on we're gonna build an options page and what I want to turn this function into is a scripts function so constantly people are adding stuff to their website whether it's in the header or the footer of the site like. If you add your website to Google Webmaster Tools it allows you to add a meta tag to the header of the website. If you add that meta tag in the theme editor of WordPress and then you change the themes you'll lose that meta tag same thing. If you had something into the footer, if you do that in the appearance editor or in the theme.

you're gonna lose that if you change themes so we're going to build an options page to to add functions to the footer and the header of the website in this plugin alright. So we're actually gonna leave this alone as this is a short code that we can use this content it's not going to affect anything we can leave this here we can add more options to our plugin. Which is what we're going to do now so we want to come down a little bit and the first thing we want to do is we want to say add action open parentheses and we're gonna say admin menu and this next argument here is going to be a callback function. All right so we're gonna say idea Pro admin menu option yeah we'll call it option alright take a copy of that function paste that open brackets close brackets or a print to cease I'm sorry okay.



So now we've created a admin menu action and we've done a callback here alright. So now what we're going to do is we're gonna say add menu page open parenthesis and closed parenthesis alright. so the first argument in this admin menu page function is basically the title of our admin page or functions page. whichever you want to call it so we're going to call it the header and footer scripts all right so this next one this next argument is what's actually going to show up on the WordPress menu on the left hand side. So we're gonna say just call it site scripts all right this next argument is going to be what users have access to it and so we're gonna say manage options any user that has the ability to manage options. 

WordPress Plugin Development

All right now this next argument is a slug and we're going to call it idea pro admin menu all right and the network this next argument is a callback function of what the settings pages are actually going to look like. So we're gonna call this idea pro strips page this next argument is where it lists on the menu on the left-hand side not even going to details about that I usually just pick some random number like 200 but I didn't put in as I skipped one so the one before the argument before where it shows up on the menu is actually the image that will show up next to the icon I mean next to the name. It's the icon that will show up next to the name I'm gonna leave it blank which will give you the little settings cog there's plenty of options you can look up WordPress - icons and it will give you a list of all the - icons that are available. I'm just going to leave it blank for right now so that's done so now if we save and upload the file we go to our WordPress admin here and we click on dashboard now we have this link right here that is site scripts. 

So if we click on that it's going to give us a blank page and the reason why is because we've told it this callback function here is going to display the page for settings our settings but we haven't built that function yet. So it's just gonna give us this blank page so we need to copy this we'll come down below this it's a function that callback function that we used right here, so idea pro scripts page then we'll open those brackets and so now we can do some HTML in here to put a little bit of information in so the default WordPress page information or default WordPress page wrap for the admin is just called wrap so we're gonna go here and we're going to put in an H stone h2 and we're gonna say update scripts on the header and footer okay 

so we're going to save that and we're going to come back here if we click on site scripts it's going to give us update scripts on header and footer that h2 that we put in and we can change that we can just leave. It to update scripts take out the period and that's update scripts okay. So now we can build in our form pieces to capture the input that we need to go in to it for our scripts all right. We're going to do a text area text area there we go in close text area. It was a class and the default for WordPress for large text areas is large - text so that's going to be one of them and then we're going to make a second one and so the first one is going to be pettier scripts a four-hitter scripts copy this and we're going to say footer scripts some name footer scripts and call these whatever you would like name fitter scripts flips header scripts sorry about that we'll call them tender scripts all right.So then inside of here is where we're going to display any of the settings that are previously put in but what we need to do is we first need to call those options 

WordPress Plugin Development

so we need to say header scripts is equal to get option and it's going to be better let's let's do inside the database we're actually going to call it idea Pro header scripts and then the second one is a value that you want it to return if it's false so we're just gonna say none and then we're going to copy this and we're gonna say footer scripts further scripts and we'll add this one here to footer scripts okay so we have those in now we can come down here and inside of this text area we can say print header scripts and here we can put in whoops footer scripts I'm not typing good today at all there we go footer scripts okay and we need to close that PHP tag all right so then we need a button to submit it it's an input type is equal to submit name is you can submit strips update let's do that value is equal to update scripts and then we're going to use to style this button we use a default from WordPress which is button button - primary alright 

so now we're going to look at what this looks like on the page so now we have a place for header scripts footer scripts which I need to change this label footer for scripts ok so now we have header scripts footer scripts ok so now we need to update the options once they submit the page so what we're going to do is we're going to add in a form method it's post action and we're gonna leave the action blank and then down here we're going to say close the form okay so here above where we get the options we're gonna put in a if or a key exists in the post and we're going to call this here the submit name so if a rein exists posts we're gonna run this file alright and this is going to be simple to update 

so we're gonna say if submit scripts update is he is in the post is in the array we're going to update option with the value it's the post and we're gonna do that twice so we're gonna update the header script we're gonna update the footer script from the name header script and bitter script all right so now one that is all that we need to do to update the options update option actually creates a new option if that option doesn't exist so you don't have to say new option or create option or even with that you can literally just say update option and then what you want to call it WordPress will create that option if it doesn't exist okay so then we're gonna close the PHP because we're going to create a div that will pass through will give a notification that the updates been done 

WordPress Plugin Development

so we're going to say ID is equal to setting error settings updated class is equal to and this is basically for the settings of WordPress and I just use it because it's it's already built I don't worry you know we're not on the settings page so it's so it's okay so then the class is going to be updated settings here notice is is dismissive notice is dismissive alright so they were going to create a strong close strong whoops it already did it for me and inside of that we're going to say settings been saved all right so we've created the page so let's refresh okay so I've got an error somewhere Oh rein exists there 

we go all right so now we have none and none in our header and footer script and we're going to just put in tests and tests Twitter update scripts all right settings have been saved so now if we go social site scripts posts go back to site scripts our tests and our test footer stuff has been saved into those fields all right so we're going to clear that out update and if we go back to it now there's link because it no longer says none because those options actually exist they're just blank and that's what we want right now because we don't want anything to pass through so now we have the menu option we have the page that submits that information which is this here this is the menu option this is the page that submits those fields now we can add in where the scripts are actually going to show up so we can come down a little bit and we're going to create a new function and we're gonna call it idea Pro display will do the header first header scripts alright so under this we're going to say add action and the action is going to be WP underscore head and then the callback is going to be this function 

Here so now we're going to get the header scripts from the options and then simply whenever you're doing a script like this in the header or the footer when it's a add action WP header add action to BP foot you literally just want to print header scripts that's it so now we're going to go through the same thing there's a function idea Pro display footer scripts we're going to add action we're say WP underscore foot we're going to call this callback and then we're gonna say get option the footer scripts we're gonna copy that down here and then we're gonna say print further scripts and we're ready to go so now what those two functions just did is this header this add action to the WP head added any scripts that we put inside of this top box to the header of every page on our WordPress website and then idea Pro footer scripts using the add action WP foot I believe that's right so it is for I think that looked right so it's WP head for the head tags and WP footer for the foot tags okay so now we'll save that we'll come over here and we're going to say footer scripts Wow not directors hitter scripts and this is gonna be footer scripts update and then we're gonna go here to the I pretty idea Pro example page and look at the source code view page source we're going to control find and we're going to say header scripts which is right here

WordPress Plugin Development

so it added it to the head and then footer scripts if we do a search for scripts so here's the footer scripts so any scripts that you add into these fields are going to show up in the header and the footer of the page now what is useful is is I use this for Google Analytics I'll get the Google Analytics code and paste in there or the Google tag manager code and paste in the head JavaScript you know files jQuery UI anything like that can go into the footer so hope that helps in the next video we'll go into more detail about how to add a sub page to this menu option most of the time when I'm adding this type of settings I usually add it under the settings of WordPress so that it keeps the left menu bar here clean for other options like custom post types and things like that so we'll do another video with the sub menu page of our site scripts here and then we'll do another plug-in where it adds a settings an option in the settings okay hope that helps you

like and subscribe let me know if you have any questions and we'll see you in the next one


Please see part 1 of the article at :https://goo.gl/S1r8at

Visit the WordPress codex http://ideapro.com/url/wordpress-codex for more functions that can be used in your plugin.