Internet-Skills: Web Development

Showing posts with label Web Development. Show all posts

Monday, March 4, 2019

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.

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

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.

Sunday, March 3, 2019

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

Store Clothing 7:59 PM 0

Web Development

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

WordPress Plugin Development | How To WordPress Development Article 2019 :

In this article, how to build a WordPress plugin and expand the possibilities of your web site. [MUSIC PLAYING] So understanding the WordPress documentation and website is a little difficult when you're trying to develop for WordPress. Understanding the documentation for building modules can be somewhat troublesome. Yet, it's entirely straightforward. So we're demonstrating how to fabricate an extremely basic module for your WordPress site. So how about we begin. So here on ideapro.com, I have a default WordPress installation at ideapro.com/example. And we're logged into the back end here. Presently on the off chance that we go here to Plugins, on the off chance that you'll see I have no modules on this establishment. And the reason is because the default WordPress comes with Hello Dolly and A kismet. Neither one of those plugins are plugins that I use, so I immediately delete them before I even upload WordPress to the website.

WordPress Plugin Development

So we're going to go in now and create a really simple plugin to get you started. All right, so we're going to go to Sublime which is the text editor I use. Furthermore, you can utilize Dreamweaver or Text, Notepad, or whatever you use. We're going to go into ideapro.com under the Example folder, because this is our WordPress install here. So ideapro.com under Example, WP Content and then Plugins. And as you can see here, there's just the index.php page, which comes in the Plugins folder. So on Plugins here, we're going to create a new folder. And we're going to name that folder what we want to call the plugin. So I'm going to name it Idea Pro Example. OK. So now if you look in at Plugins, I have this folder called Idea Pro Plugin. I'm sorry, I have this folder called Idea Pro Example. Now there's nothing inside of it. This index.php page is under Plugins here.

WordPress Plugin Development

So if we close this, see there's nothing in it. So now we will make a page in that envelope. We will make another clear page. We're going to begin with our PHP sections. And after that we will complete a remark out. We'll do another star. At that point we will do star, star close. So now after this star we're going to say plugin name and we're just going to call it Idea Pro Example Plugin. OK, and then we're going to save this file. Now we're going to save it under the Idea Pro Example folder under Plugins. Also, presently we're going to spare this document indistinguishable name from the organizer above it. So .php. So thought star example.php. So now that really is all that's required to create a plugin. Now if we go into our Plugins here and refresh this page, now we have Idea Pro Example Plugin. And if we activate this plugin, it activates and now it's activated. Now this plugin isn't going to do anything because we really haven't given it anything to do. But it's activated. We can deactivate it.

WordPress Plugin Development

We can delete it if we wanted to. We're going to keep it activated. Furthermore, presently the other thing that we can do is we can include a depiction. So we'll say Description, This is just an example plugin. If we save that, go back in here to Plugins. So now we have a description here that is the description. So there's multiple things that you can add up here in this little area that describes the plugin. You can add the author, the version number. It's imperative to include the adaptation number in there. I'm not delving to truly delve into every one of the subtleties that you can do with including this. A lot of times if it's not a plugin we're going to use on multiple sites, we may not even add a version number. It all depends. So we will now put a little bit of code in here to make the plugin actually do something. So one of the least demanding activities is to compose a capacity called- - allows simply call it Idea Pro Example Function. Now what we're going to make this function do is it's going to be a short code. So we're going to say add_short code.

WordPress Plugin Development

Presently this capacity here is a piece of the WordPress codex. What's more, we can go into more recordings and insights concerning that later on. So what this add short code does is it allows us to create a short code that we can use on pages and posts. So the first argument that we're going to pass through add_short code is what we're going to use in the page and post as a short code. So here we're just going to say example. Now this is really simple. I would recommend using something that is a little bit more detailed so that you know what it is. Maybe Idea Pro Example or whatever your function actually does. And after that the second contention is really the capacity name here. So we're going to place this in here. And after that in here is the place we put in what we need the genuine module to do. So we're going to instruct it to simply restore a string of content.

So we're going to say $information = "This is a very basic plugin." Now on a plugin, you always want to return the content. You never want to print it out. You never want to print out the content of the short code. And I'll explain why in just a second. So we're going to save this. We're going to go back into our plugins here. And you see that our plugin hasn't changed. However at this point on the off chance that we go to Posts, Hello World. I'm going to use this one since this is the default here on this front page. Now if we go in here to our short code and we add square brackets and we say example and update. If we go back and we refresh this page, this is a very basic plugin. So there it goes through that tad of content that we place here in this module.

What's more, we got a capital H. We're going to change that. Okay, and change that. So now this is an essential module. Presently the motivation behind why we return the data here- - and you can consider this string anything you desire - content, as long as you return it here, content. It's as yet going to restore a similar data. The reason why we return it instead of printing it is because the way the structure's set up is you want this information to show up wherever you put in the short code. So if we go back in here after the short code, and this is the text after the short code. We hit Update. Refresh the page. Now this is the text I have for the short code. So we have Welcome to WordPress. This is your first post. Edit or delete it, then start writing. So we have that text here. We have our short code, which appears here. And afterward we have this tad of content after the short code that appears here. So in the event that we return into our code and we don't restore this- - we revive - it won't demonstrate anything by any stretch of the imagination. It will vanish. What's more, on the off chance that we go into here and instruct it to print substance, or reverberation the substance, presently it will put it over any of the other data. As it won't return it in the middle of this two bits of content. It will put it above anything in this substance territory here.

With the goal that's the motivation behind why it's vital to return rather than print. We'll in reality simply take this out. Furthermore, invigorate, so now it's down here. So now in the event that you know HTML or you know PHP, you can compose a basic module. Presently within this, you can do a wide range of things. So in the event that we need to go in and include more data. So content is equivalent to- - we'll include a div. Also, we'll state this is a div. Also, we'll include substance and this is a square of section content. So now on the off chance that we revive, that data appears. This is the essential module. This is a div. What's more, this is a square of passage content. So within this, insofar as you're restoring this data, it will appear on the page.

What's more, that is as simple all things considered to make a module. Presently I propose making a module for nearly everything that you do, in case you're going to utilize that on another site. Or on the other hand if it's a great deal of code. The motivation behind why is on the grounds that in the long run you will introduce a module that another person has assembled that could break your site. So it makes it extremely simple to kill modules until you've made sense of which module is clashing with the other, or clashing with your site. Presently what we simply did is extremely basic code. Furthermore, we could have effectively quite recently taken this code- - and we'll remove it from here. We could have effectively quite recently went into the subject that we're utilizing - 17- - and went to the Functions page here and included this the Functions page. So right now we removed it from our module here. So on the off chance that we revive, it's gone. Presently it says model, since it doesn't have the foggiest idea how to manage that short code.

Thus now in the event that we go into the Functions page, we'll go down here to the exceptionally base, and we'll glue in this capacity. Furthermore, we'll invigorate. Furthermore, presently this data is back. So it doesn't really - we didn't really need to fabricate a module to do what we simply did. But at the same time it's dirtied up our functions.php page. So anything, particularly in case you're utilizing a pre-fabricated topic or a standard subject that accompanied the WordPress introduce, I would propose doing everything as a module. In such a case that you do it in the default functions.php page, when the subject updates, it will overwrite any capacities that you put on this page. Presently you can make what's known as a kid subject of the present topic. So we're utilizing 2017 here as our default subject that accompanies WordPress. In the event that we needed to make a youngster subject of 2017, we would do that. And after that on the Functions page of that page, we could really include the code and that would work. Be that as it may, I would recommend doing it as a module. That way you can turn it on and off. It's likewise great on the off chance that you ever choose to change subjects, you're not losing that data. So you can change subjects.

WordPress Plugin Development

You're not going to lose the module. So a ton of times we construct modules for pretty much everything, in light of the fact that the customer may change the subject later on. Tell me your inquiries in the remarks. Expectation this video helped some of you manufacture a module. It's fundamental. It's not as hard as the documentation and different recordings describe it. It's very easy to assemble modules.

What's more, trust this article helped you.

Make a point to like it and buy in for the following article.

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

Saturday, March 2, 2019

Ever wanted to build your own WordPress theme Development?

Store Clothing 8:35 PM 0

Web Development

Ever wanted to build your own WordPress theme Development?

Ever wanted to build your own WordPress theme? Well in this video, we'll show you how. Building themes for WordPress is fairly simple. If you've ever wanted to build a theme for your website and not had to buy one or use one of the default themes that come with WordPress, it's not very hard to build your own if you know a little bit about web development and a little bit about coding. So in this article, we're going to explain kind of the basics of how to get a theme started. And then in future article, we'll expand on that. So let's get started. So here on the IdeaPro.com website, we've created an install of WordPress on IdeaPro.com/example. And here, we're using the 2017 default theme that comes with WordPress. And in our back end here, if you go to Appearances, you see 2017 is the activated theme. Now if you'll notice, we don't have any other themes in our appearance here. And the reason is is because we remove anything of WordPress that we're not using.

As soon as we create a new theme, we'll remove the 2017 theme, just to keep everything cleaned up on the back end. So we're going to go to our editor. And under Example here, IdeaPro.com, under the Example folder, under WP Content, we've got plugins and we've got themes. And here's the 2017 theme. So we're going to close that. On the Themes folder here, we're going to create a new folder. And we're going to call this IdeaProExample. And we'll put it all in one word. So now we have the IdeaProExample folder. And we have nothing in it. So now we're going to put something in this folder. All right. So I have default HTML code here. It says Default HTML 5 Code.

Now, what I'm going to do with this code is create the structure of the files that are needed for our WordPress. So I'm going to leave this here. I'm not going to save it. I'm going to create a new page. And I'm going to save this new page under-- let me get to the right area here-- examples [INAUDIBLE] content, themes, IdeaProExample. All right. So we're going to name this Header.php. And now in this Header.php file, we're actually going to paste everything from this body tag up. We're going to paste that in there, and we're going to save it. Now we're going to create a new file, and we're going to paste this bottom part into the new file. And we're going to save it as Footer.php. Now, we have the header here and the footer. We can actually get rid of this. We don't need it anymore. So now we have a header and a footer file in IdeaProExample. The next thing we need is we need an index file. So we're going to save this, call it Index.php. And then we need a functions file. So we're going to call this Functions.php. And then we need a Style.css file.

So we're going to save this and call it Style.css. And now we're ready to get started on adding some content to some of this. So in the Header.php file, some of the defaults that we're going to put in is we're going to put in WP_Title. And what this does is it's the default function for title. And we're going to leave just two single quotes here. And we're going to leave that just like that is. And we're going to hit Save. Now we're going to come into the Index.php page. And we're going to put in get_header. And then we're going to come down a couple lines, and we're going to say get_footer. And we're going to save that. Now in the Header.php page, right before this closing head tag, we're going to put in wp_head and save that. And then on the footer page, before the closing body tag, we're going to put in wp_footer.

Now, we're going to save that. So now what this head tag does is any plugins or functions that are called to add stuff to the header of the site will be added here. Now, on the footer, this wp_footer, any functions or plugins that call an action to put something in the footer, this is what this will bring in here. This function here brings in any of those plugins and functions. So on the PHP Functions page, we really don't even need anything in there. We'll put in a default PHP open and closing tags. And then on the Style.css page, we're going to put in Open PHP. We're going to put in a-- start a comment.

And we're going to say Theme Name. And this is going to be Idea Pro-- oops-- IdeaProExample Theme. And then we can put in the theme URI. URI. And we are just going to put in https://www.IdeaPro.com. And then we can also put in the author, which is going to be [INAUDIBLE]. We can put in the author-- oops-- URI, which is [? joshuaherbeson.com. ?] Keeps putting in that closing tag on there. And then that's really all that we need. We can actually add a description. And this is just an example theme. So now we have the Header.php file, the Index.php file, a Functions.php, a Style.css, and a Footer.php. These are the basics that are required to get your theme in there. So now we'll go to here, and we'll click Appearances.

And now you see we have IdeaProExample theme. So right now, we have this theme activated. And if we refresh the page, it's still-- this is the default theme. Now if we go in and we activate this theme, now our default theme is activated. And if we go in here and we refresh this page, it's blank. And the reason why is because we literally have put nothing in our theme. This Index.php page is blank. The header is the body closing-- opening tag here. And then the footer is the closing body tag here. So if we want to, we can go into here and put in Welcome To Our Page.

And we can save that. And now that is going to show up on here, welcome to our page. Now, one of the most annoying things for me whenever I'm creating a theme and doing development is this bar right here. So really quickly, one of the first functions that I write, I actually have it as a plugin that we install because it makes it super quick. But one of the first functions that I do is I go into Functions.php. Page, and I say Show Admin Bar. And inside of here, I type False. Whoops. I spell it right. So we save that. And now if we refresh this page, that admin is gone. So if we want to turn it back on, we can comment it out. Refresh. And this bar shows up if you're logged in. It's really annoying to me. It really messes up the code, the design. It changes the whole layout of what I want to see the site as.

So that's one of the first functions that I write. So this is the default to creating a WordPress theme. The other thing that you can do is, if you have a look that you want-- let's say that we want it to look like our main page Idea Pro here-- I can do a screenshot of this. And then I can go into here, I can go to the desktop. I can change this to screen-- whoops-- Screenshot.png. And then I can add this to our website here, IdeaPro.com, Example, WordPress Content, Themes, IdeaProExample. And we'll move this Screenshot.png over to our IdeaProExample here. And then in here, we'll just upload the file, and go into our themes and click Appearance. And now we have a screenshot of what we want the website to look at. Usually, as the designer sends us a layout, or I design it and we have a layout done, I'll take a screenshot. That way, I can have-- it's just quick to see it, and it's good for, if the client logs in, they can see it. So that's how to create a theme using WordPress. And we'll get into more of the details in future videos. Hope this video helped you. Like and subscribe, and please comment any questions that you may have.