What is a Dev Environment? (Your First Installation)

Brad Schiff
A free video tutorial from Brad Schiff
Web Developer
4.7 instructor rating • 6 courses • 130,922 students

Learn more from the full course

Become a WordPress Developer: Unlocking Power With Code

Learn PHP, JavaScript, WordPress theming & the WP REST API to Create Custom & Interactive WordPress Websites

26:29:04 of on-demand video • Updated October 2020

  • Why code is the key to building whatever you can imagine with WordPress
  • The ability to write PHP to manipulate the data of a WordPress site
  • The ability to write JavaScript to add on-the-fly interactivity to a WordPress site
  • How to code your own new custom block types for the "Gutenberg" Block Editor
  • The skills, knowledge and vocabulary to work professionally as a WordPress developer
English [Auto] Hello, everyone. In this lesson, we will answer the question, where do we begin? So whenever I'm helping someone learn WordPress development, I always say that the first step. Our first priority should be setting up a dev environment for ourselves so that we can work locally. Now, don't worry. I do not expect you to know what that means in order to explain what that means. Let's ask ourselves two new questions. What in the world is a dev environment and what does working locally mean? Let's start with the dev environment. The best way to explain what it is is to begin with it's opposite. The opposite of a dev environment is your real Web site that the entire world can see. So in the past, you might have purchased a domain name like your own dot com or dot org, and you might have also purchased a Web hosting plan and used WordPress to create a Web site in the industry. We refer to that real Web site that the entire world can see. We refer to that as your live environment or your production environment. On the other hand, a dev or development environment is a separate copy of your Web site that is usually configured so that only the owner or developers of the Web site can see it. So a dev environment is a private safe sandbox or playground to experiment in. And no one from the general public can see your work in progress Web site. OK. So that's a dev environment. Now, let's answer our other question, which is what does working locally me? So local is the opposite of the cloud. Local refers to your personal physical computer. So, for example, right now I want you to picture two things. Number one, your personal computer. And number two, a server that lives a thousand miles away from you. Now, the files that make up a Web site usually live on a server that a Web host company maintains. The Web host company leaves that server computer on 24 hours a day, seven days a week, so that people can access your Web site around the clock. And that means that WordPress and our Web sites usually live on a server, not on our personal computers. However, it is possible to install WordPress on our personal computers, and that will allow us to create WordPress Web sites even when we don't have an Internet connection. Now, granted, these won't be real Web sites because no one else can view them. It would be like saving a word processing file to the desktop of your computer. You're the only person in the world who can view that word processing file because it lives on your physical computer. OK. But long story short, that process of working from your computer instead of connecting remotely to a server somewhere. That process is called working locally. Now, if we put these two things together, if we work locally within a dev environment, it creates the perfect conditions for coding custom Web sites. Because if we make a typo while coding, it won't be a big deal because no one will see the error messages except for us. Also, we won't need to constantly upload new files to a server because anytime we save a file on our computer, our local private Web sites are just immediately, instantly updated. And then only when we're finished coding our Web site. Only then do we push our files up to a real public Web server for the whole world to see. OK, so if we want to work locally, we need to install WordPress on our personal computers. But that's a bit trickier than it may sound. So here's a metaphore or an analogy for you. If we had a tree that we wanted to plant, we can't just throw that tree anywhere, right? We can't just throw the tree on cement and expect it to live and grow. A tree needs a particular environment. It needs an environment with soil, water and sunlight. Well, it's the same thing with WordPress. We can't just plant WordPress anywhere on our computer. WordPress needs an environment with the following three things. Number one, P, HP, number two, Apache or Engine X, and number three, my sequel or Maria DBI. Now, don't worry. I do not expect you to know what any of those things are. But for now, just know that our personal computers need to have these things in order for WordPress to run. Now, most computers do not come preinstalled with these things. So we need to go out and get them. But luckily. These three things are completely free and there are lots of different tools out there that will automatically install all three of them for us. Right. So all of the tools listed on the screen right now, they are free and they all do the same thing. They give us the metaphorical soil, water and sunlight that WordPress needs in order to run on our computer. So we don't need all of these tools. We just need one of them. Now, if you've dabbled with WordPress development in the past, you might already have one of these tools installed on your computer. If that's the case, you can keep using it. You do not need to install another one. But if you're brand new, I don't want you to feel overwhelmed with all of these choices. So right now, why don't we install local by flywheel together? Step by step. This is my favorite tool of the bunch. And it's super easy to use. So in a new tab in your Web browser, search for local by flywheel. As of this recording, the official you are RL is local WP dot com. OK, then go ahead and click the big free download button and proceed to download the software. You might have to enter your first name or an email address or basic info. But the software is completely free. You will not have to pay even a penny. The download file is a decent size, so it might take a while to download. You might need to go grab a coffee while you wait. But once the download completes, jump into your computers downloads folder and go ahead and begin installing the program. And this could take up to several minutes. So be patient when it completes. It should then give you this option to create a new site. Go ahead and click that. We need to give this new site a name just to follow along with the course. Why don't you name it? Fictional university. Let's click continue. We can go ahead and use the preferred default options. So continue again. And here you get to choose your username and password. Just choose something that you can remember. And also enter your email address. Then go ahead and click add site. And this might take a few minutes to complete. But when it does, we now have our own local dev environment copy of WordPress up and running on our personal computer. So you can just click this view site button. If that's not available yet, you might just need to start your Web site up in the top right corner. But once it's up and running. Just click view site. And here we have a brand new, completely fresh copy of WordPress. Up in the address bar, you can see that it gave us our own fake local dev domain. Basically told our computer that if we visit this domain instead of looking out onto the Internet, just look within our own personal computer. And this means that you were the only one in the world that can view your Web site if you shared this domain with a friend or family member. They would not be able to see your Web site yet. Cool. So you've got your own private playground copy of WordPress that you can experiment with if you want to log in as the admin of the site. Up in the address bar at the end of this domain, just add slash WP dash ad men press enter. Now here we see that the Google Chrome web browser is confused and thought that I wanted to search for this instead of visiting it as a domain to get around this up at the top. We see this message. Did you mean to go to fictional university DOT local slash WP Admon. So just click on that because yes, that's what we wanted to do. Enter the user name and password you chose just a moment or two ago. Cool. And here's your typical WordPress admen dashboard. Now let's pretend you've been working and experimenting for a while and you're done for the day to shut things down. Just jump back to the local buy flywheel application. We can click stop site up in the top right corner. OK. And then you're free to close the program. Now, let's imagine it's the next day and you're ready to start working on your WordPress site again. Just open up local by flywheel. It could take several minutes to load, but once it does, just click on your Web site that you created here. OK. And then in the top right corner, we just need to click start site. Cool. So now it's running again. So now back in your browser, you're free to use your Web site again. You might need to refresh and remember that if you forget this, you are ill. You can always just click view site right here. OK. Now, there's only one more super important thing that I need to tell you right now before we move on. I want to show you where on your computer your new Web site files actually live. So right here where you see your Web site listed, if you. Right. Click on that. If you're on a Mac, you can choose reveal in Finder if you're on Windows. It will say show in folder or something similar. Basically, we're looking for the folder or directory where the website lives. So click on that option and that will show you the folder for the current Web site that you're working on. If you're wondering where this lives, it's inside your user accounts home directory. If you're on a Mac within your home folder, you will now see a brand new folder named Local Sites. Right. And that contains our projects. If you are on Windows, you will have a new folder named Local Sites within the base of your main user folder. So it would be sitting alongside your downloads folder. OK. Now, before we bring this lesson to a close, I want to show you where the actual WordPress files themselves live. So within local sites. Within our project folder. Dig into app and then public. And here we are. We are going to be spending a lot of time in this folder, in this course. These are the system files that actually power WordPress. Perhaps the most important folder is named WP Dash Content. If you look inside it, we see another folder named Themes. And inside there is a folder for each theme that you have installed. Now, in this course, we are going to be creating our own brand new theme. So very shortly we will be setting up a new folder here, and that's where we are going to do a lot of our work. Now, at this point, give yourself a pat on the back, because you've completed the first step towards becoming a WordPress developer. You now have a local dev environment. But remember that not everyone in this course is using this same local by flywheel setup. So before we bring this lesson to a close, I just want to stress one thing to you, and that is that even if in future lessons, my screen doesn't look exactly like your screen, that's OK. And even if I'm working in a slightly different folder, like personally in my case, my Web site's live on my desktop. Right. In this lower case, local sites folder. That's not important. So just know that throughout the entire course, when you hear me say that, I want you to jump to your project folder or your WordPress folder or your theme folder, just know that you are in the right spot for you. I just want you to open up your project, jump into it, then jump into app, then jump into public. Okay. This is really the only folder that you need to worry about throughout the entire course. I'm usually going to tell you things like. Now I want you to jump in to WP content. Cool. Now, that's going to bring this lesson to a close. And now that you've set up a local dev environment for yourself, we can really start learning how WordPress works. In our very next lesson, we are going to get our first taste of P HP, which is the language that powers the heart and soul of WordPress. This is gonna be a lot of fun. So let's keep things rolling. And I will see you then.