Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:19Length:2.2 hours
  • Overview
  • Transcript

2.1 Set Up Your Pro WordPress Dev Environment

To develop themes for WordPress, you’re going to need an installation of WordPress that can run on your own local machine as well as some test content to design around. In this lesson you’ll learn how to use Bitnami to install WordPress as easily as you’d install any regular software program, how to stock your dev site up on content super-fast, and how to configure your WordPress site for development.

Related Links

2.1 Set Up Your Pro WordPress Dev Environment

Hey this is Kaz. Welcome back to WordPress theme creation with underscores. In this lesson you're going to learn how to get yourself setup with a professional environment in which you create your underscores theme. The first step is to install an offline WordPress development site that will run on your own computer. And there are a few different ways to install an offline WordPress site, but I found the quickest and easiest way is to use a Bitnami installer. Now, the reason that this is the easiest way compared to some of the other options is that it will install WordPress for you, on your computer, in exactly the same way that you would install any other program or app. So head over to bitnami.com/stack/wordpress. I'll put a link to that in the notes below. And then look for the section labeled local in store and go ahead and hit that link to download the installer for your system. Once the installer is downloaded, go ahead and run it just like you would installing any other app or program. And this is going to launch the Bitnami installation process. And for the most part, this installation is just a matter of following the prompts. Generally speaking, you weren't have to change anything from its default settings. One thing you will need to pay attention to though is the folder you install your BitNami WordPress site into, because your theme will be inside this folder and you're going to have to find that folder later when you want to edit your theme. So make a note of whichever folder you're installing Bitnami into for later before you hit that next button. And you'll also just need to nominate a log in name. And also a password. And this is what you'll use to get into your offline site. It can be anything you like. It doesn't have to be secure because it's just on your own machine. And you'll also need to just give your blog a name. And that also can just be anything you like. It doesn't have to be anything special. Now you're not going to be using email so you can skip the part about setting up email. And you might also like to uncheck learn more about cloud hosting unless that's something you want to learn more about. And from here just go ahead and let the installer run its course. It'll probably take a couple of minutes so just give it a little while and then come back to it, and you should be good to go. And when it's done, hit the Finish button and you should see this Bitnami welcome page turn up in your default browser. No click the Access Bitnami WordPress Stack link that you see at the top there and there you go, you have a fully functioning WordPress site running completely on your own computer. Now to access Admin on your offline site just go up to the URL and add wp-admin onto the end of it, and this will take you to your login page. And go ahead and input the login details that you set. When you are running the Bitnami installer. Now, that will take you into your admin area, where we have a few things that you'll want to do before we kick off. Now, there are quite a few plugins that ship by default with the Bitnami installer, but you really aren't going to need most of them. So go into your plugins sections and check all the plugins except for Jet Pack by WordPress because we will be doing some work that interacts with Jet Pack. And you can just delete all of those plug ins. And then you can go ahead and activate Jet Pack. And while you're at it's very likely going to need an update at this point, so run the updater for Jet Pack so that the plugin is at its latest version. And the next thing is if you go to the front end of the site, you'll notice that we have the admin bar along the top, and it's a dark, black color. And it's squashed right on top of your theme design and that's going to interfere with your ability to just look at the theme and make sure that everything is laid out right and colored correctly. So we want to turn that off for the purposes of theme design. So in your admin panel, go to users, your profile, and then turn off the check box that says show toolbar when viewing site. And go ahead and update your profile. Now, when you head back to the front end and you refresh, you'll see that the toolbar is gone. All right. So, now that your development site is installed and ready, you're going to need to add some content to it. Now there are two things that you want to achieve with the test content you add to your development site. One it should give you some content that you can shape your design around. So, following the content first methodology, you want to have content that is going to be a reasonable representation of how you would expect the users of your theme to be populating their blogs. And two, it should make as many WordPress use cases as possible. So you want to have galleries in there, images, different types of text formatting, just as many different things as you can think of to make sure that your theme works with all of these different scenarios. So for this purpose, we're going to be using WordPress test content provided by WPTest. And this is an expanded version of the official WordPress. Theme unit test data, and it's really, really good. So head to wptest.io and again, I'll give you a link for that. Hit the big Download button and grab yourself a copy of that test content. Once you've downloaded the content, it's all going to be contained in this zip file. Now you want to extract that zip file, head into this wptest-master folder. And then the actual content itself is in this file, wptest dot xml. And that's what we'll be importing into development site. Okay so back in our admin area of our development site, we're ready to go ahead and import our test content. So, head to tools and then choose import. And from here, we're going to select the WordPress Importer. Now because this is a brand new installation of WordPress, this importer won't be in place, so you'll just need to follow the prompts and install that WordPress Importer. And when it's done, choose activate plug in and run importer. And that will begin the importing process. So now you can go back and grab that wptest.xml file we just looked at a moment ago. And choose it at your import file. Then click the Upload file and Import button. You can leave all of these fields just as they are. Check the Download and Import file attachments button and hit Submit. And that will bring all of that content in. And post it all on your site. Now, there is just one more thing to do to finish setting up your dev environment and that is turn on WPD bug. Now what that does, is if there are any mistakes in your php, any errors or anything else at all, going on that's wrong with the php on your site. You'll get some messages that will appear on your screen, on your browser. And, those messages can be really helpful for figuring out what's wrong, so that you can then go ahead and fix the problems as easily as possible. Earlier on you will have made a note of which folder Bitnami installed WordPress in for you. I want you to go to that folder now. So, in my case, the installation went into my applications folder and then into WordPress-4.1-0. And, that's the folder I'm in here. And we're going to navigate into Wordpress' actual file structure so we can access the WP config file and that's where we'll turn on our debug setting. So we're going to expand the apps folder and then from there we will expand the Wordpress folder, and then, inside this Wordpress folder, you'll see this htdocs. Now that htdocs folder is the folder that you'll arrive at when you use that local host shortcut that you might have seen earlier in the URL of the test site. Now from here, you can open up the wp-config.php file. And we're just going to do a quick find. Search for debug. And that should take us straight to the line we're looking for. Now here we want to change that value of false to true. And save the file. And that will turn WP debug on for our dev site. Now your site is completely setup and running, it's all ready for you to start your development on. There's just one more thing that you are going to need to know and that is after you shut down your computer and you come back to it the next day, how do you get your site running again? Now right now you should see you have this Manager OS X application running on your system. Now, this is Bitnami's program that simulates a web host on your local machine. And this is the program that you're going to have to run when you come back and you want to restart your development site. Now this actual application is housed inside the Bitnami installation folder. But rather than trying to find it later, the easiest thing is just to go ahead and pin that icon to your doc right now, so you can easily find it when you need to start it up again. And the way this program works is it runs a MySQL database and an Apache Web Server on your machine, and if these two services aren't operating, so when you come back to your computer. Then, if you are to run your site, this is the result you'd get. So what you'll need to do is startup the manager program, head to the manager service, and just select start all, and that will get both of these services running again. And then that in turn, will get your site running again. Okay, so now you've got your Pro WordPress development environment all setup, and you're ready to start on your underscores theme. In the next lesson you'll learn how to generate a uniquely name version of underscores that you'll be able to work on. And how to speed up your development processes with automatic SCSS compilation and browser refreshing. I'll see you in the next lesson.

Back to the top