7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial

Next lesson playing in 5 seconds

  • Overview
  • Transcript

1.2 What You Need

Before we do anything, we need to install some of the prerequisites. WordPress is a must, so I’ll walk you through the install process (it’s easy!). You’ll also need Node Package Manager (NPM) to make it easier to get the JavaScript dependencies.

Related Links

1.2 What You Need

Before we start to writing our application, we need to go over the things that you'll need to follow along in this course. And we're going to start with the most obvious. You need an installation of WordPress. Now, that installation of WordPress can be on your machine. It can be on a machine on your network, or it can be in the Internet. It doesn't matter where it is as long as you have access to it. Now, if you already have an installation of WordPress, then you're going to want to skip ahead a few minutes. Because I'm going to go over the services you will need in order to install WordPress, as well as going through the process of installing WordPress. And if your installation is less than version 4.7, then you will also need a plugin. And we will go over that in a few minutes. So skip ahead to whenever you see us in the WordPress admin and pick up from there. Okay so in order to install WordPress, if you're going to install it on your machine, or a machine on your network or on some other machine that you have access to, you need to install some services on that machine. You need PHP, you need a MySQL database, and you also need a web server. And Apache is what we typically use, at least as far as PHP is concerned. So you can download and install those things if you want to. Or you can use a tool that will install those things, configure them and make it easy to start them and stop them. And that's what I'm using through this course. I'm using a tool called MAMP. This is something that you can install on Mac or Windows. And it gives you everything you need to get started with PHP development in general. So if you go to mamp.info, that is the web page, there are two versions. There is a free version and Pro version. I've never used the Pro version. The free version has typically had everything that I've ever needed. So, feel free to download the free version. And that will give you everything you need to get started. Now, if you're on Linux, you can't use MAMP, but instead you can use something called LAMP. Now, if you do a search for LAMP, you're going to end up with some actual search results for lamps. So you might want to do something like LAMP developments, or PHP, or something along those lines. Something to say that you're looking for LAMP for development. And it serves the same idea as MAMP. It gives you everything that you need in order to get started writing applications with PHP. So whenever you have those services installed, and if you've installed MAMP, which I'm going to from this point on assume that you've done, then you'll just start up the MAMP tool. It will show you when the Apache Server and the MySQL Server are running, that's very important. And the next thing you need is to download WordPress. So if you go to wordpress.org/download, that's going to take you to the download page. And just download WordPress, as you can see, at the time of this recording the version is 4.7.5. Of course, any later version is going to be fine. There might be some differences as far as the APIs are concerned, but that's also dependent on the actual version. And the versions can be controlled by plugins, which we will see in a few moments. So you will, of course, want to download this, this is a zip file. And then you will extract those files. And you're going to move those files, or at least copy them. Into wherever you've installed MAMP. Now in my case, it's on the root of my C drive. So it is C:/MAMP, and then inside of the MAMP folder is a folder called htdocs. This is, you could call the public folder. So anything you put inside of htdocs is going to be accessable through through the browser. And we want to just paste in those files. Now, we need a MySQL database in order to install WordPress. And in order to do that, we need a tool for creating that database. I mean, we could use the command line, but no, [LAUGH]. So we have a tool already installed thanks to MAMP. So if you click on the Open start page, this is going to take you to the page or the start page of MAMP. And if you go to Tools and then phpMyAdmin, this is going to take us to an administration tool for our MySQL database. You can see how I already have some databases here. And you will see some as well, like Information_schema, performance_schema and mysql. But these other databases are ones that I have created. Now, you will want to click on the New link. And inside of the text box, where it says Database name, well let's do headless_wordpress. The convention for mySQL databases is if you have two words, you use an underscore between them. And the same is true for table names and column names. So we're going to create a database with that name. And then we are going to install WordPress. So in order to do that, we just need to use our browser and just go to local host. So, MAMP is running an Apache server, it's listed at port 80. And it's going to serve up the files that are inside of the htdocs folder. You are going to be able to choose your language, mind is English. And then it's going to tell you the things that you need. So we already have this information. If you have installed the services yourself, o r you are installing WordPress on a remote host. The information, of course, is going to be a little different. If you have used MAMPit's going to look like this. The database name is headless_wordpress. The user name is root, the password is root. It's not very secure, but, in this case, it's a development environment, that's okay. The database host is localhost, and the table prefix is wp_. The reason why there's this prefix is if you had a database that you wanted to not only have WordPress stuff in but other stuff as well. If you're limited to just having one database, this way all of the WordPress tables will begin with wp_. You can also change this to whatever you wanted, but we're going to leave that the same. Just Submit and then click on Run the install. So we want to set the title of this. Let's say that this is Headless WordPress. And the username, I'm just going to use user. For the password, I'm going to use password. And we have to confirm that we want to use the weak password. So that's fine in our case, we're not going to do anything with the emails. So I'm just going to type something in. And then, we will install WordPress. Now, once this is done, it's going to prompt us to log in, it is. So, we can do that, and we will say user and password. And then we will be in the admin portion of WordPress. So, if you're just now joining us, and you have a prior version of WordPress, that is, it is before 4.7. You will need to install a plug in for enabling the REST API. So you will go to Plugins and Add New. and this is probably going to be true for any new version of the API as well. So if you do a search for WordPress REST API, then you're going to see several options. But the first one is going to be WordPress REST API Version 2. And you can see here that there are different versions of these. This is why I'm saying that if you're using a version of WordPress that doesn't support the latest API version, chances are you will be able to add that functionality through a plugin. So I you have 4.7 and above, then you have Version 2 by default. If you don't you will want to install that plugin. And once you do that, you'll have WordPress ready to go. And while we're here, let's just go ahead, and well, we have a Hello world! So we have a post, that's fine, let's get out of WordPress. As far as development is concerned, the set up is a lot easier. You will need Node, because we're going to be using NPO. So if you go to nodejs.org. If you don't already have Node installed, then you will want to install Node. You can pick the long term support, that's what LTS stands for. Or you can use the current version. We are just installing Node for NPM and installing Node for NPM is, by theory, good idea to begin with. Because it allows us to easily get dependencies and run tasks and things like that. So whenever you download and install node the important thing is that you choose the option which is chosen by default. But do not uncheck the option for installing MPM because you will need that. And once you do, then getting set up for development is going to be relatively simple. In the code download is going to be a folder called start. And it's going to contain everything that you need in order to get started. It's going to have a couple of folders. Public, and inside of public is just going to be an index.html file. There's going to be a source folder that has a file called app.js. Then there's going to be a .babelrc file, a package.json file, and then a webpack.config.js file. Now, whenever you have NPM installed, you will want to cd with the command line into that folder. And just type NPM install. And this is going to give you everything that you need in order to write the JavaScript portion of our application. Now this might take a few moments depending upon the speed of your machine and your network speed. But whenever this is done, you will have everything that you need for following along in this course. So, in the next lesson, we're going to start writing our application. We're going to create our first component. And we're going to fetch data from the WordPress API.

Back to the top