Before we begin with any coding, we need to make sure that we set up our development environment. There are numerous ways we can do it, but my preference is to have:
- Local installation on the hard drive
- Automatic syncing to our server (this step is optional)
I perform auto syncing to my server because my local environment is Windows and my server environment is Linux (CentOS). Through many years of development, I’ve seen many times that local and server environment differences can cause a lot of headache, so I try to test the code on both while I am working.
In order to make your life easier, I would recommend that you download the PHP development environments. For Windows, there are three PHP development environments that I highly recommend:
These packages will install and configure Apache, Mysql, and PHP automatically for you. Only Bitnami will install WordPress for you as well. All of them are pretty good and the choice just depends on your preference. I use XAMPP as I am used to it.
For Mac OS X, I recommend:
I was using MAMP on Mac OS X and had no issues. MAMP Pro is even better, as it provides more options to make our life easier, and it is well worth the investment. When these packages are installed, WordPress should be downloaded from http:/www.wordpress.org/download/.
After it is downloaded, WordPress should be unpacked (unzipped) and placed in web server’s public directory with the project name; in my case, on Windows with XAMPP installed, this is C:\xampp\htdocs\votcat.
Our project, which we will use in this article as an example, is called votcat. Here is a great guide in how to install WordPress locally at http://codex.wordpress.org/Installing_WordPress.
After WordPress is installed, our _s or underscores starter theme should be downloaded and installed.
Setting up the underscores theme
Underscores (_s) is the starter theme for WordPress. It has been created by the people from Automattic (the company that stands behind WordPress) and numerous contributors.
Why is this theme so good? It is good because it follows all the rules from WordPress.org,and it really makes our lives easier, as we don’t have to start developing the theme from scratch. There are a number of starter themes that can be used for the projects, and I have closed this one as it’s really popular and has a lot of features implemented (page templates, customizer, layouts, and languages) in order to make our lives easier.
On the other hand, if you prefer to start with the latest _s version (at your own risk, as the code might change ), you can download it from https://github.com/Automattic/_s/, or from here http://underscores.me/.
The good thing about downloading the theme from the underscores website rather than from other sources is that you can set a theme name there.
Now let’s get started:
1. Put the theme in the themes directory. The theme location should look like this C:\xampp\htdocs\votcat\wp-content\themes\votcat
2. Activate the theme by clicking on the Activate button in wp-admin. Your screen should look like this: Don’t worry, we will soon be changing this flat-looking theme into a nice-looking responsive web design.
Installing the WordPress theme’s unit test data Unit test data fills the WordPress database with sample posts, pages and comments spanning across different post types, image sizes, tags, and categories. It makes our lives easier while developing the theme, as we don’t have to add all that content ourselves and we are sure when we test the code of our theme with all that content loaded that we will be able to see if something breaks.
We can test the features of our theme by using the unit test data that is also used by the WordPress.org theme team when we submit our theme. It can be downloaded from: https://wpcom-themes.svn.automattic.com/demo/theme-unit-test-data.xml.
I certainly recommend that you use the WordPress theme’s unit test data as it covers all the cases for themes, and the WordPress.org team uses it when they test your theme for approval.