Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m

Next lesson playing in 5 seconds

  • Overview
  • Transcript

1.2 Setting Up Your Environment

It probably goes without saying that we need a WordPress development environment to create blocks. In this lesson, I'll show you how to install WordPress, and we'll talk about the other tools you'll need to write Gutenberg blocks.

Related Links

1.2 Setting Up Your Environment

Naturally, the very first thing that we need to do is set up our environment for developing WordPress plugins. And if you have any experience developing plugins, then chances are you have almost everything that you need. You at least have a WordPress installation. So if you want to use that, great. But I should point out we are using the latest version as of this recording, which is 5.0.3. That's because Gutenberg was finally released with the Version 5 of WordPress. So you might want to update your existing installation or have a completely new installation, whatever you want to do. If you want to follow along, you will need the latest version there. And feel free to go ahead and skip because I don't want to bore with the installation of WordPress. So just skip ahead to where we start talking about node and then we'll be good to go. Now if you're still here, then we need to install WordPress. So the first decision then is where do we install it. You can install it on your local machine, on a virtual machine. You can even use a hosted installation if you wanted to. However, in a hosted situation, you will need to transfer files. We will be editing files on the file system. And we will of course need to upload those. However, you would want to upload them. So it makes a little more sense to do your development locally or at least on your local network. So you can install it on your machine or on a virtual machine or on some other machine that's on your network. Whatever approach you want to do. Now before you decide that, let's talk about what you need to install WordPress. You need the Apache web server, you need PHP, and you need MySQL. Now depending upon your operating system, you might have some or all of those things already installed by default. However, you don't want to use what comes with your operating system because it's older versions. You want the up-to-date version. So you are going to need to install things that are going to be running on your machine. So if you don't want to use the word corrupt your local machine with anything like that, then it might make sense to put it onto a virtual machine or a separate physical machine. Whatever you want to do. So you need the Apache Web Server, you need PHP, and you need MySQL. And you can download and install those things separately and configure them if that is what you want to do, feel free. In my age I have become lazy, I want it done for me. Now, for a production environment, yes, I want to manually do those things. But for development, I want something that is already configured for me. So there's this thing called AMP, A is Apache, M is MySQL, P is PHP. And if you take the first letter of your operating system like W for Windows, L for Linux, M for Mac, then you can do a search and find tools or bundles already available that will install and configure those things for your operating system. So feel free to search. I am going to use a product called MAMP. Now even though this begins with M for Mac, they do have a Windows installation. And these types of things are great. You just install it. They install everything that's needed to configure it and then you're open running with complete environment for PHP applications. So I am using MAMP. Everything that you see on screen is going to be map related. So if you use some other solution, then you will need to do that translation yourself. Now, I should point out, there are really two versions of MAMP. There is just the normal MAMP and there's MAMP PRO. MAMP PRO is the paid for version. And I don't use that. I don't endorse it. I've never used it so I don't even know if it's worth the money. But if you look at the specs and want to purchase it, feel free to do so. I don't care. Now whenever you do install MAMP, you will be prompted to install MAMP PRO as well. It's a trial. If you want to, feel free. I didn't just because I didn't want to hassle with a trial. So once you have that installed, you will want to run the MAMP software, because there are services that need to be up and running in order for everything to work like Apache and MySQL. So running the MAMP software is going to automatically start those services and it will stop them by default whenever we close out. So go ahead and start up MAMP. And it does give you the ability to make whatever changes that you might need. So if you need to change the ports for any one of the services, then that is available. You can also choose what version of PHP, which in this case is 7.2 or 7.1. Let's see, WebServer. You can set where the document root is which you can see right here for Windows. It is C:\MAMP\htdocs. And that is important because that is where we are going to put our WordPress files and so on and so forth. We're not gonna go through everything else there. And then we want to download WordPress. So you want to go to WordPress.org not .com. .com is the hosted WordPress service where you typically have to pay for it, .org is where you can get the files, it's the organization. So wordpress.org, the homepage does not have a download button, or at least it doesn't say download, it says get WordPress. So get WordPress, download WordPress and that will download an archive. And you can choose whatever type of archive that you want. You will want to extract those files to wherever your root directory is for your web server. So Document Root for me is C:\MAMP\htdocs. I want to put those WordPress files there, and I've already done that. If there's anything in that folder to begin with, go ahead and delete it. And then put the files from the WordPress download in there. So after that we need to create a database. So from the MAMP tool, you will want to click on Open WebStart page. This is going to give you some information about your MAMP installations such as you can get to your PHP info. You can look at the MySQL information and a bunch of other stuff. What I want to go to is Tools, and then phpmyadmin because we need to create a database before we can install WordPress. So let's quickly do that. As far as the database's name is concerned, it doesn't matter. So I'm just going to call this WordPress. And we will create that and there we go. To do that I clicked on the New link. I typed in the name for the Database name and then Create. I mean, there's really not a whole lot there. And then once that's done, you will want to go to your web server, which in my case, is just normal local host because I set my port to Port 80. Or at least at one point I did, I don't know if this is actually carried over from a prior installation or not. But whatever port you have specified for Apache, that's where you will want to go. Since I'm using the default, it, of course, is going to be port 80. And this is going to take us to the WordPress installation. And let me hop on over to Chrome here. So you will want to chose your language and Continue. An then it's going to tell you that you need your database name, you username, password, and database host. We have all of that information. That is from this main MAMP page for the MySQL information. And we know what the database name is because we just created it. So the database name is wordpress, username is root, password is root. Database is localhost and then the table prefix, you can put whatever you want here. I'm just going to leave it with its default. This is just going to prefix the tables with wp_, so that if you use another existing database for your installation, all of the WordPress stuff will begin with wp_. And if it can connect to everything, then it says, run the installation. So that's going to run the install so that we can set up a few things. So let's call the site Title TutsPlus Gutenberg. For the user name we just need something so that we can log in. This is, of course, going to be for development purposes and hopefully on our own local network. So if you're using a hosted version, [LAUGH] definitely have a better user name and password. But, in my case, username's gonna be admin, password is gonna be password. I have to confirm that I want to use a weak password, which I really like that option. Cuz a lot of applications won't let you use one even if it really doesn't matter. I like that they give you that option there. The email address really doesn't matter, so put whatever you want, and then install WordPress. And that is going to install WordPress. Once it's done, it will let you know, Success. You can login, and then you will be able to create posts and all of that stuff. So there you go, you have installed WordPress. Now, the next thing you need is Node.js. Because we are going to be using that later in the course to create our blocks using React, so that we can use JSX, and all of that wonderful stuff. So we will want to install Node so that we can have access to NPM. So you will want to download the LTS. It is version 10 as of this recording. Might be version 12 whenever you see this, although I doubt that, but you never know. So download the LTS, take the defaults for the installation. It's very straightforward and you're good to go. Basically that's it. So if you skipped ahead to this point in time, then that's it. Just download Node, install it. You're good to go. And so now that we have everything that we need, in the next lesson we can start writing our first blog.

Back to the top