After you’ve created a localhost installation of WordPress on your computer, the next step is to set up a Developer environment to get all the tools and content ready for you to use as you develop and test this new Theme.
(By the way, if you haven’t yet created a localhost installation of WordPress on your computer, then I highly recommend Bitnami. It’s a simple double-click installer that puts all the relevant applications – MySQL, PHP, Apache, and WordPress – on your machine in no time. Give it a shot: Bitnami WordPress.)
There are 5 basic steps to setting up a good Developer environment:
- Install a “Starter” or blank Theme
- Import WordPress Theme Unit Test Data
- Add the Developer Plugin(s)
- Install an appropriate IDE (Integrated Development Environment)
- Create your WordPress Theme Project in your IDE
1. Install a “Starter” or blank Theme
You have a number of decent “Starter” Themes you can choose from including:
- Underscores (from the WordPress Theme guys)
- Toolbox (the Theme that preceded Underscores)
- Handcrafted (based on Toolbox, created by a WordPress developer)
- Roots (including Bootstrap, Grunt, and HTML5 Boilerplate)
- Bones (including Sass, Custom Post Types & Custom Dashboard)
- Quark (based on Underscores)
But the most recent blank-style Theme from the WordPress Theme Team themselves is Underscores. They assert that it’ll give you a “1,000-Hour Head Start” on Theme Development. And one extra nice thing about Underscores is that it lets you customize the name of the Theme template and .ZIP file you download directly from their website. It’ll help you get started that much sooner.
Once you decide on a Starter theme to install, head to your WordPress Dashboard >> Appearance >> Themes >> Add New to upload the .ZIP file, “Activate” it, and begin.
2. Import WordPress Theme Unit Test Data
The next thing you want to do is be sure that you have an adequate amount of Test Data to test for all possible usage scenarios in your Theme (things like Stickies, Tags, Categories, nested drop-down menus, multiple authors, different image sizes, lists, blockquotes, tables, and so on). Rather than trying to figure this all out on your own, the WordPress team has made it quite handy to download and install all possible test data on your own.
(For a quick look at what all this test data will look like, you can head over to wptest.io’s Demo page.)
To download the WordPress Test Data, go to the Theme Unit Test page on the WordPress Codex website and right-click to Save the .XML file linked to as the first instruction under “Setup”:
Theme Unit Test
Once saved to your computer, you’ll need to Import the data using the WordPress Importer plugin. You can install this easily by going to your Dashboard >> Tools >> Import.
Click “WordPress” to be prompted to install the Importer plugin.
Then “Activate” the plugin and “Upload” your previously downloaded .XML file with the Test Data in in. When WordPress asks you to assign authors, be sure that you also click “Download and import file attachments” beneath that (next picture).
Be PATIENT. This will take a while.
After receiving a “Success” message, go ahead and navigate to your homepage to see what your blank Theme looks like with all the new content. (My screenshot below shows what Underscores looks like with the Test Data imported.)
3. Add the Developer Plugin(s)
When you begin developing WordPress themes, you’ll also want to be sure that the backend Development environment is properly set up to allow for you to do things like Debug your code, find and fix errors, test various sidebar widgets, permalinks, authors, themes, or other situations your future users might work with after you release the Theme to the public.
To get the Developer plugin, simply go to your Dashboard >> Plugins >> Add New and search for “Developer” – it should be the first plugin to appear:
Install and “Activate” the plugin and the first thing it will ask you is what type of website you are developing:
- Plugin for a self-hosted WordPress installation
- Theme for a self-hosted WordPress installation
- Theme for a WordPress VIP site
Select the second option and continue (you can always change this later if you’re worried about it).
Next, you will be given the option to install various other plugins that come bundled with the Developer plugin. These include:
The bolded plugins above are probably most useful for you starting out, but you can add whatever seems relevant or that you’re curious about. Remember, you can always Add or Deactivate any of these later. In order to do so, simply go to your Dashboard >> Tools >> Developer and you’ll see a screen like the one below where you can modify anything you like:
- Debug Bar
- Debug Bar Console
- Debug Bar Cron
- Debug Bar Extender
- Rewrite Rules Inspector
- Log Deprecated Notices
- Log Viewer
- Monster Widget
- User Switching
- Pig Latin
- RTL Tester
- Regenerate Thumbnails
- Simply Show IDs
- Theme Test Drive
- Theme Check
- Beta Tester
4. Install an appropriate IDE (Integrated Development Environment)
Fourth, you need to install a good IDE for development. What an IDE does is “provides comprehensive facilities to computer programmers for software development. An IDE normally consists of a source code editor, build automation tools and a debugger. Most modern IDEs offer Intelligent code completion features.” (Wikipedia)
Basically, an IDE:
- allows you to store your entire project in an easy to access location (from the sidebar)
- highlights certain code keywords and conventions (like comments)
- gives you smart-completion features if you forget the exact function keyword you want
- gives you direct and instant access to the exact locations a function is found in other parts of your code (CMD or Control + mouse click in NetBeans)
- includes a code compiler to run your code on the fly
- includes a code debugger to find errors and fix things by “stepping through” the code one line at a time
I’ve used both Eclipse and NetBeans before in my undergraduate courses (back in 2005). I feel that Eclipse is best for Java development and it is a bit large (probably a bit overwhelming at first). NetBeans comes highly recommended by my peers and is a little simpler. Or, alternatively, there is also PhpStorm, a premium IDE that is loved and used widely in the WordPress development world.
So again, here are the three primary IDEs you might try:
If you do decide to go with NetBeans (which I recommend), you need to be sure that you have the Java SDK installed on your computer first in order for the IDE (which runs in Java) to work properly. NetBeans (and likely Eclipse as well) offers an IDE + Java SKD bundle installer on their website (see pic below).
NetBeans + Java SDK Installer
5. Create your WordPress Theme Project in your IDE
Finally, the last thing to do before beginning your WordPress development is to Create a new Project in your IDE that contains your entire WordPress installation (themes, plugins and all). You’ll have to find the folder that contains:
- All the other wp- files
Then set that whole folder as your Project folder in your IDE.
- In MAMP, the folder will probably be called “htdocs”
- In WAMP, it will be “www”
- In Bitnami, it will be in “apps >> wordpress”
To set up your Developer’s environment in Bitnami, follow the steps (as shown in the slideshow) below:
- Open the application.
- Click the “New Project” folder icon (don’t confuse it with the “New File” icon to its left)
- Choose “PHP Application” (Note: After initially installed JDK + NetBeans, I had no PHP option – it only gave me Java Projects as an option. So I navigated back to the NetBeans downloads page, downloaded the “All” version of the app, and reinstalled it. This gave me all the possible development options.)
Rename your Project and click “Browse…” to choose your local WordPress installation folder. (On my Mac, the Bitnami WordPress installation is located in /Applications/Bitnami/apps/wordpress/)
- Click “Finish” to finish the setup and start coding!~
So were you able to successfully setup your Developer environment? Ready to get coding? Well, first things first: we need to be sure we know WHAT we’re coding. Have you created a good design yet?