Intro to WordPress Development

[MUSIC] Greetings everyone and welcome back to another exciting episode of DevPro TV. I'm your host Justin Dennison and well, we have a very special treat today were getting started with WordPress development. And luckily, I have no idea what it is, but luckily, we have someone in the studio that does, Mr Frank Corso. How you doing today, Frank? I'm doing well, how are you doing? I am doing fantastic and I'm actually pretty excited because I'm learning something new. And hopefully you are as well. But part of learning something new is, I need some impetus of why I should learn this, and I also need to make sure that we're all on the same playing field. So, what do we need to do to get started in that endeavor? Well, before we get started, we probably want to know what WordPress is and why we wanna even look at it. So, WordPress, in its simplest form is something called a CMS, a Content Management System. Now, you may have encountered it before. In fact, WordPress powers 30% of the internet. So, one in three sites that you go to is powered by WordPress. So you've probably interacted with it, maybe without even knowing. Now, WordPress has been around for many years. It started out though, as blogging software, it was a fork of something called, B2, back 15 years ago. So you might think, blogging software? Well, maybe I'm not creating a blog. Well, WordPress has evolved over the years and in fact, back almost ten years ago, it start coming up with custom post types and all this fun stuff that basically allows us to create all kinds of content. So now it's evolved into e-commerce stores and it powers things like, just blogs, but also things like news sites and actual company sites. And mobile apps and web apps and many even more things. So, that's kind of WordPress in a nutshell. And we wanna use it because it powers 30% of the Internet. And so a lot of people are using it. A lot of developers are using it. There's a lot of resources on it. And it's been tested across a variety of server environments, making it fairly reliable. Now, once we, let's go ahead and look at a couple examples, though. And that way, you can kinda see what we can build with this. So we're gonna hop over to a couple examples here. First, is the Walt Disney Company's website. This is powered by WordPress. And then we can hop over to something like an actual blog, like the PlayStation blog that's powered by WordPress. This Angry Birds site is also powered by WordPress and it looks a bit different than the others. So you can see there's a bit of variety that you can do with WordPress, you're not kind of stuck into just blogs. Or in this case, the Chicago Sun-Times. This is more of a news site which is sort of like a blog. It's similar but it's also powered by WordPress. Let me go into things like Facebook Newsroom, and even Zoos, and then even this mobile app Agora. And the entire actual structure, and power and database of the app, is all powered by WordPress. So you can do quite a bit with WordPress, which is a great, I just closed the wrong one. And which is why we want to use it, and figure out what we´re gonna do with it, figure out even how to approach it. So the first thing we wanna look at, let me close out some of these tabs so we're not going to slow here. First thing we probably want to look at if you're just getting started is WordPress.org. Now, not WordPress.com, there's a slight difference here. But we're gonna be looking at the WordPress.org and what this is the actual software, WordPress. WordPress.com is the hosting solution by the company that makes WordPress. WordPress.com is more of the hosting, which we'll get into later, and then WordPress.org is the actual software. Which you can use on any host in a variety of platforms. Everything from hosts, like ones you may have heard of like GoDaddy, or Cyclone or HostGator to actual servers such as AWS, or DigitalOcean, Linode, or even sometimes Linux or Windows. There's actually Windows versions as well. So you can use it on pretty much any server you may be familiar with. But WordPress.org is where you wanna be looking at. Now, from there if you're just getting started there's two pages you wanna probably refer to from time to time. One is the WordPress Codex, and this is pretty much the old documentation of WordPress list, all the functions, different classes, different uses, there's lessons in here. Lately, in the last year or so, they've been trying to move over to the new developer portal. So just for the URL is this codex.wordpress.org and then developer.wordpress.org. This is the newer version, so it's a lot more spruced up, has a lot more cool details. But not everything's moved over yet, so you're gonna have to bounce between the two. Usually, the best way to get started if you're trying to figure out something, is just go to your search engine like Google or Bing. Type what you're looking for and it'll come up with the relevant result in one of these two. But, when you're just getting started, you just wanna browse these two. So now that we have an idea of where to go, the website WordPress.org, we've looked at a couple examples. Let's look at actually how we set this thing up. So WordPress is a collection of PHP files in its simplest form. So if you've never used PHP before, you probably wanna brush up on your PHP skills a little bit before diving into WordPress development. Luckily, over on ITPro in the library, there is an intro to PHP course, which I've heard is pretty good. I don't know. Justin you can help me out there. I've heard it's fairly decent. I mean there were some striking gentlemen in that series that you could probably guess who those two gentlemen were. But would that intro course be enough to really start undertaking what we're going to explore in WordPress development itself? Yes. So the intro to PHP, if you haven't taken it or if you know some basic level of PHP, you should be enough to jump into Word Press. We're gonna touch on some more advanced things as we go throughout the course. But as long as you understand what variables are, functions and different data types, that's probably enough to get through what we're gonna be going over. At least, the beginning of this course. So, if you do understand PHP and you know kind of what I'm talking about so far, then we're gonna jump into what the environment is for WordPress. Like I just mentioned, WordPress is a collection of PHP files. But you can download pretty much any of the pages that I have gone to. There is a giant download WordPress button. That will download a .zip of PHP files. And, what we are gonna need to do, is some sort of server locally so we can develop one. If you've looked at the intro to PHP course, we've walked through setting up XAMPP. If you do not have XAMPP installed, you might have MAMP installed if you are on Mac. You can use either one of those. Or you can use something called ServerPress, Which does have a free version. And this just has a quickened software on Mac or Windows. It quickly sets up a WordPress local installation for you. Now, we're gonna be using XAMPP today, because I'm on Linux. So we can use ServerPress. But also, XAMPP is a great way to get started very quickly and not have to deal with any other software, things like ServerPress and try to learn anything else. XAMPP is a quick way, just jump in and get started. So if this is your first time, you probably wanna start there, but once you play with WordPress a little bit, you'll probably end up using ServerPress or some similar software to speed things up a little bit. So if you have XAMPP all ready downloaded and installed, and just for reference, it's X-A-M-P-P or MAMP depending on which software you´re using, or which operating system you´re using. But once we get that installed and set up, you would download the ZIP. Let me open up a folder here so I can show you where you would put it. And then, once it downloads and installs, which, here we go, into, depending on which operating system you're into, you're looking at. Back in the intro to PHP course, we looked at a couple of the folder structures. But you would be looking for the LAMP folder and inside is the htdocs folder. In here is where these different folders represent the different sites that you have on your local development environment. In our intro to PHP course, we had the intro-PHP folder which opened up in localhost/introToPHP. Ops! if I can spell. So, what we're doing now is we're creating a WordPress folder And inside WordPress, if you downloaded the ZIP, which I did here already. And I opened it into the WordPress folder. So if we hop to WordPress, we'll take a look here. Now the actual installation process when you go to run it, which I'll show you in just a moment. It takes a few minutes, so I skipped that step here, so you don't have to sit and watch me load a page for five, ten, minutes, but what you would be doing is going to your slash board press slash and you're going to look for this file which I've already deleted. I'm sorry. You're going to look for the WordPress install file, which, Which will be wp-install-php. So if, for reference, let me show you in the codex, which we just searched for. We brought up a nice installing WordPress page. And there's a five minute installation that kinda walks you through this step. So if you are ever unsure exactly. Hey Frank, how did you set this up? They have these nice couple of steps here that you can download. We are going to create a database, which I am going to show you in just in moment. And the file we are looking for is WP.Config. So let's go ahead and open that so you can see. We will open a sample. So this is the file that gets us setup and kind of powers the options that WordPress is using. So this is the sample, and what you would do here, all you're gonna be doing in this file, we'll set up the database in just a moment, is you'll be switching out that database name, user and password. And then it's Justin. Could you make that a little bit bigger? Yes. Just to make sure we all know what we're looking at here. Here, let me open it up in Visual Code Studio here so we can, See it a bit bigger. So we're gonna go up to the WordPress level and open up sample. How's that? Is that? Can we go a little bit bigger. Let's see. This make that, there we go. I think we're good there, yeah. So let's take a look. Is that? Yeah. There we go, okay. So when WordPress runs, anytime someone goes to a webpage, it brings up the wpp config file. And that's where it finds out what database am I connecting to, what security things do I have in place, what options am I running WordPress under. So this is the file that you would get started with. If you're going through their five minute installation instructions, you're gonna find and rename the sample to the regular wp-config.php file. Then edit in our database options. So we are going to hop over to local host. And if you are on XAMPP, you will have a nice local host spot here. If you are on MAMP, you will have a similar dashboard. If you are using servercrest, you can skip this step because they already did it for you. But you would go up to your PHP admin or a similar software depending on which one you're using. And you would normally create this WordPress database. And once you create it, all you have to do is put the database name and the user and password you created it with into this file, the wp-config. And then we would rename it removing the dash sample part. As it says here, as well as over in the instructions. So let me close out this file now that we had that open, and switch over back to our instructions. So we've unzipped and theoretically created a database. We found our file and renamed it. And then, If you would go to WordPress, if you would try to load WordPress like we did here, instead of seeing this, you would get to a simple page that says hey, enter the site's name, enter the site URL you are after, what language are you in, some basic things like that. It's about five or six steps, and then you click the run button and it will just have everything for you. Which basically what it's doing is creating these tables right here. Now we're gonna dive into a lot of these tables in the next few episodes but just to give you a quick glance here, basically these tables boil down to posting content, comments, terminology and users. And then a lot of other options within there. And we're gonna dive into some of these in a second, but when you run that installation, it'll create all these tables and then set up all the options and settings and everything for you for your basic WordPress install. Now [INAUDIBLE], could you just show us just creating a database using PHP Admin? It doesn't have to necesarily be that one. Just so we are clear on either the complexity or lack of complexity that is required in order to set that up. And I'm also guessing that there should be at least somewhat familiarity with a mod SQL database in order to kind of progress through this course. Yeah, well only in this set. Once you get into WordPress, we're not gonna touch any SQL in the entire course. Because how WordPress is set up we don't actually have to until we get some more complex things. So the only thing you need to figure out is PHPMyAdmin or whatever software you're using to create a database. So in this case, in PHPMyAdmin which we just got into, we can click the new and we can just type WordPress, in this case in this case we'll just type test2. And I'll click create. And now we have our test2 database. So we would go over to our config file and type test2 if we were actually running this again. In this case, we are just root, and that's all we would have to do to run the installation. Now, if you had a separate user set up, if you're on a live server, hopefully your username is not root and password blank. So this would have to change depending on your server setup, but that's all you would have to do. That's all the SQL or database structure you need to understand for this course. So we're going to hop back over to our WordPress. Again, we're going to dive into these tables later on in the course. But you always want to double check, make sure these actually are here after you run the installation process. Once you run the installation process, which is the last step in our five minute installation. So we're gonna close this out. And for reference again, this is in the Codex and you're looking for installing WordPress, if you need a refer back to this. But you would end up on a page similar like this. So I named it Frank's Playground to make it easy. And here we would have some content, but we don't have any content there right now. So if you look, this is very boring of a website. There's nothing going on here. But that's up to us to actually get some content in here. So if you've never used WordPress before, I've already logged into something called the WordPress admin. If you've never use WordPress before, once you're finished with this episode I would recommend you diving around just kind of looking at some of these to get a little bit more familiar with the admin panel and the dashboard. Not required, but it would be useful as we go forward. So here we are at the WordPress dashboard. A couple things you'll wanna look at going forward, we're gonna be looking at hosts and pages. This is where the content are stored, the default content. And then down here, there's the appearance menu, which we'll dive into just a moment, plugins, and users. With WordPress, there's a few different things here. We have our posts and pages. And then some other content. So maybe you have a podcast. You have podcast episodes. You have an e-commerce store, so you have products. All that is stored as posts because WordPress started out as a blogging software since, like I said it was a fork of b2, which is blogging software. WordPress for the first six years was blogging software, that one just had posts. And you can see that, back in our database, we have our posts table. So now, back in 2009, I believe, they created something called custom post sites which you could create for products, and pages, and videos, audio, anything you could think of as different content, but those are all sorted as posts. [INAUDIBLE] there is that even though I say post and you might not be or might not be the thinking, the literal host that someone created an article or post somewhere, this could be any Any bunch of content that's being stored. So, these pages are actually stored as posts, whether you stored as the post type page, and whereas the posts are stored as post site post. And if we create a e-commerce store it might have a post site of product. And once we get into some other options here, we have the Appearance and Plugins. So everything we look at, if we jump back out to the front side of WordPress, everything we see here and anything else that we've seen on any of the examples that I showed is powered by something called the theme. If you're not familiar with WordPress, the theme is essentially this, all a collection of code and styles that dictate how does the site actually look and behave. Things like how do image and size? And how many layers are there? How many different pages are there? Are there different templates, things along those lines are part of something called a theme. And then all the actual functionality usually is powered by things called plug-ins. So for example, we jump back into, look at a theme here. By default, WordPress gives us a theme. That's what we're looking right now is the 2017 theme. There's a couple other themes, so if we switched over to a 2015 theme, we click Activate, and we'll come back out just to the front. And just so you can see, you can see it looks vastly different now. If we had content here, there would be content there. But it looks a bit different, and that's how the themes operate. And in a future episode, we're gonna dive into actually creating our first theme and things along those lines. But for right now, you just need to understand that theme usually dictates the style and some very basic functionality in regards to the template. Whereas plug-ins, they control the actual functionality. So in our case, we have our intro WP plugin which we'll be creating in future episodes. But this is where if you would be setting up an e-commerce shop you would have a e-commerce plug-in, such as WooCommerce or Easy Digital Downloads. Maybe you have a gallery, you wanna show different artwork gallery, you might have a gallery plug-in. If you're creating different widgets, which we'll be going over in future episodes, maybe we have contact forms or maybe request a quote form, or maybe special slideshows or presentations or videos. All of that would be powered through different plug-ins you would install or create. And then lastly, we have our Users, Tools and Settings. These are all basic different options, the users is the actual user so we have, right now it's only me. And there's different roles and different level types and priorities, and things along those lines. We'll get into those in our future episodes. Just right now anytime I refer to a user in WordPress, referring to an individual user who's either creating or viewing or manipulating content. Yes, Justin. And this is probably because of my inexperience with WordPress, but during the installation portion, is that where we're creating issues, or where did this user come from? Like during that install I'm guessing it asks you to set up an initial installation. Yes, during the installation I mentioned there's like five or six steps. One of those steps is entering in an email address and a user name, and it takes that and it kind of runs with it, it sets up all the user information. At some point you can go in and manipulate it, so if we went in we edited Frank here. We can go down and change some of the things that it put in here for us, but the installation process dropped in the user for us. And then lastly the Tools and Settings, these are all different Options and Settings pages. We're not gonna dive into all this right now, there's literally hundreds of these so I'm not gonna overwhelm you in this episode. But in future episodes, we'll dive in and pick a few of these settings out. Ones that are relevant to us and things that you want to look at. But after this episode, if you have never used WordPress before, it might be beneficial just to glance through some of these. But again, we'll going over these in more details in future episodes. So now that we have a good basic understanding of WordPress, let us look at what our development environment will actually look like. So let me close out a couple of these that we don't need anymore. So, like I said, we're gonna be creating a basic plug-in to get started, but there's a few other things you could do. You could create a theme, you could create plug-ins, you could even add code, just then called a child theme. There's a lot of different things you could be doing, a lot of different ways you could be creating functionality and styles. So just to show you that, we're gonna jump into a theme. I'm gonna come over here, and there's something called the functions.php file. And theoretically if you have a very small part of code that you wanna add, You could just add a function here. So they have a lot of functions already pre-existing. But let's say I added a function. I could add a function theoretically here. Just say like function, If I could spell my function. And code. Now, theoretically we could add some code here, and this functions that PHP file is run anytime on any page of the website. And this is a place that you might add a little bit of code here and there, but it's not usually the recommended route. Especially not on a live site, you don't wanna jump in the live code and edit and manipulate code. So instead, what we usually do is break out and create our own site plug-in. Now, if you get to a point you're creating your entire own theme and you're doing something with child themes which we'll be going over later. Then you could theoretically build some functionality into your child theme, but we're not into that topic yet and that's a bit more complex. So we'll save that for future episodes. So what we'll do is actually be creating our very own intro to WP plug-in and using that to create code and affect the parts of the website. Let me go ahead and remove that. Exit out of this page before I accidentally break something. Yes. So what we'll be doing instead it's creating a plugin. Now, like I said, plug-ins are used to add functionality to different parts of the website. And we can create our own plug-in to add that functionality to the website. Now I'll explain some of this part in the next episode, so right now I just wanted to show you. So we're just gonna add a function here again, just so you can see how this plays out. And so if we come over to our installed plug-ins, this is the plug-in that I'm working on right here. And I could theoretically activate it, it won't do anything, cuz there's no actual code in there. And then if we came over to our editor, there is our file. So what I have opened right now, If I had my folder open. Let's go ahead and open our folder back up so you can see where I'm at. When we open WordPress the zip, we have all these files here, and some of these control different parts of WordPress. We're gonna touch a few of these later on throughout the course. But most of this, you don't ever want to touch. This is part of WordPress core, and every time there is an update, all of these files are overwritten, so you don't wanna mess with these files. But inside the WP-content folder, there's a Plugins folder and a Theme folder. The themes has the different themes we were looking at. We had 2017, these come with WordPress. If we created our own theme, we would create a folder here. And then there's plug-ins. And this is where our folder is currently sitting that we have opened in Visual Studio code. And inside we have our two files, which we'll explain in the next episode in a little bit more detail there. But this is where we'll be operating our development environment, so you wanna come here create a folder, and then we'll create a few files in there in the next couple episodes. So that's where this file is living right here, our intro WP. So to briefly touch on the naming structure here, you can name this folder whatever you want, you can technically name these files whatever you want. What matters is inside here, and I'll explain these more in the next in a little bit more detail. But this Plugin Name Intro WP, that is what is brought to the plug-ins, And then the description here is pulled from the description. So the actual file name and the folder name, they don't matter, but you do want to name them in a way that actually makes sense. So technically, all WordPress is doing is scanning this plugins folder and looking for files and looking inside those files for this comment block here. And then it's pulling that information to add to our install plugins list. And then when you activate it, the activated list, the list of activated plugins is stored in the database. So it goes hey, these are the plugins, this is the code that we're gonna run every time a page is loaded. Now Frank, let me ask you a question about that. We can name them whatever. Yes. But within that plugins folder, you have the intro WP folder, right? Yes. And then inside of that, you have the associated code for the plugin that we're gonna build. The plugin's metadata is parsed from this file. Yes. So our arrangement, even, we could all just make that flash structure, right? Do we have to have a subfolder there that says intro WP? Or I mean, like you said, we can name the any thing you want to. l don't recommend that, Frank doesn't recommend that, it would be just a horrible mess. But do we have to have subfolders in that capacity? Well, technically we could create files right here in the plugins folder, we create intro-wp.bhp. There's a lot of p's there. And it would recognize it as a plugin. However, if you installed 300 plugins and they all had no sub-directories, then it would be really hard to find different files. Especially once we start including multiple files. So for example, one of my plugins has 300 different files attached to it. If you had that all on a flat structure that would be chaotic to try to organize. So instead we have sub folders where the plugin contents rest inside. So the organization is for us, not necessarily for the WordPress plugin portion, correct? For the most part, WordPress doesn't care whether flat structure or different subfolders or however you structure it. It's more for us. There a few use cases there, certain plugins will look inside different folders trying to do other functionality. But for the most part, it´s mostly for us. Okay, I was just making sure that we didn't have a convention that we had to conform to, or we needed to be aware. I mean, we have one, plugin name description. Mm-hm. But I didn't know if there was sometimes where we have certain subfolder structures that have to be satisfied. Well there is, when it comes to coding standards and naming conventions, which I'm going to touch on more in next episode, there is something that you want to probably adhere to. But again, it's not really required. But your name of your plugin intro-bhp, whatever you end up naming it Usually the file name is that same plugin name. So in this case, plugin name intro php, we have it all lower case with hyphens, for the spaces, and the folder will match that same name. So that's the name and convention for the developers, it's not required. You can, again, name it whatever you want. That's more of a naming convention for coding standards, but WordPress itself, doesn't actually care. So in this case, yeah, well let me just reiterate that, just in case you didn't catch that. The folder name and the main file name will usually have the same name, and they will be the plugin name, here, should all line up. Just so WordPress developer comes in after you, or maybe you later on, you can kinda know, hey this plugin is in that folder and the main file is that file. That's usually how that works. And WordPress itself, like I said, it stores the list of activated plugins into the database. But it stores that by the folder in that main file. So if you were to have this on a live site and you decided to change the folder name, it would deactivate the plugin. So that's something you want to avoid if you can, unless you want to deactivate the plugin. Maybe there's an error in it and you're scratching your site. You need to deactivate the plugin, you could just go in and rename the folder and that will take care of it. All right, so we have, we understand what WordPress is, we have a brief history about it, we looked at a few examples, we set up our developer environment. Now it's time to actually get started and we're gonna be talking about hooks and filters in just a few minutes. Hooks and filters. I'm kinda interested because, full disclosure, I haven't really [INAUDIBLE] gotten into the WordPress development around. Because you hear these kind of back and forth stories, so l'm like okay, l got a bunch of other things l'm doing. However, l do wanna make a mention of the conventions about the folder and file name, kind of all lining up. l like things like that, even just because we don't have to doesn't mean we shouldn't. Because if Frank's working on something, he's like, hey Justin, I need you to take a look at this. If he follows that convention and I know about that convention, then I can always come back and go, okay, this is the main file that defines the plugin and we're all good to go. So I would strongly recommend adopting that, right? So do keep that in mind. So thank you so much, Frank. I'm very interested to see how this continues going and hopefully you are as well. So come on back for more Intro to WordPress Development. Bur for now we're gonna go ahead and get out of here. So signing off for DEVPRO.TV. I've been your host, Justin Dennison. And I'm Frank Corso. And we'll see you next time. [MUSIC]