WordPress has seen a huge growth in popularity in recent years, and now roughly 19% of all websites are running on it. Much of it’s popularity comes from it’s simple back-end design and intuitive user interface. Extra functionality can be easily added at the click of a button thanks to the multitude of plugins available. This has made it the go-to CMS for bloggers, businesses, and anybody looking to get their content online quickly.
Another great feature of WordPress is the ability to customise the presentation and functionality of a site with themes. There are millions of themes available, of varying levels of complexity and quality. To really help websites stand out from the rest, a bespoke theme tailored exactly to the requirements of the client is needed. Many web developers now use WordPress as a platform, building a theme and plugins to fit the exact specifications of the project.
We’ve come up with a quick tutorial for developers interested in getting started building WordPress themes and open-source development.
1. Set up a local server development
Once your local testing software is set up, we’ll set up a new virtual host. As an example, our imaginary client’s site will ultimately be hosted at disconinja.com. So we will create a virtual host pointed at a folder called disco-ninja stored somewhere on your computer:
Mac – MAMP
Windows – XAMPP
Add the site at the bottom of your hosts file, this can be found at C:\Windows\System32\drivers\etc\
Note: You will need to show hidden files in order to see this file in the Windows Explorer.
Add a new virtual host manually in C:\xampp\apache\conf\extra\httpd-vhosts.conf:
<NameVirtualHost *:80> <VirtualHost *:80> DocumentRoot "C:/xampp/htdocs" ServerName localhost </VirtualHost> <VirtualHost *:80> DocumentRoot "C:/Sites/disco-ninja" ServerName disconinja.com DirectoryIndex index.php <Directory "C:/Sites/disco-ninja"> AllowOverride All Order Deny,Allow Allow from all Require all granted </Directory> </VirtualHost>
Make sure you restart Apache after making these changes.
2. Create a database
Next, you’ll want to create a new database in PHPMyAdmin. We’ll call ours disco_ninja, and make sure the encoding is utf8_general_ci.
To make sure everything’s working all right, we’ll create a file called info.php and save it in our disco-ninja folder.
// FILE: ~/path/to/disco-ninja/info.php <?php phpinfo();
Then navigate to disconinja.com/info.php in the browser, and you should see all the compelling information about your PHP set-up.
If all is working as it should be, you can delete the info.php file.
3. Install Yeoman
Yeoman is a very handy scaffolding tool for quickly building web apps, and we can apply it’s usefulness here as well. Yeoman requires Node.js, so you’ll need to install Node (if you haven’t already), before installing Yeoman.
To install Yeoman, execute this command in Terminal/Command Prompt:
$ [sudo] npm install -g yo
4. Install WordPress and the Zing Design boilerplate with YeoPress
YeoPress is a Yeoman generator for quickly installing WordPress.
To install YeoPress and set up a new WordPress instance:
$ [sudo] npm install -g yo generator-wordpress $ cd path/to/disco-ninja $ yo wordpress
Next simply answer the questions as they are below. Note: You’ll need to put in your own database name and password. This is a quick and easy way to set up WordPress with a custom theme, in this case we’ll be including our boilerplate theme for developing themes.
You’re probably wondering how this differs from the WordPress 5-minute install, and the answer is: not much… But by answering a short series of question we have everything we need to start developing WordPress themes, we also have a boilerplate theme set up ready to start developing.
If all went to plan, navigating to disconinja.com should now display the friendly WordPress introduction screen.
If you’ve already got a WordPress theme set up, or you’d just rather set it up manually, you can download the WordPress bootstrap theme here:
Check out the next article in the series for how to use the theme.
5. Set WordPress to developer mode
This is easy, just set WP_DEBUG to true in wp-config.php:
Recommended WordPress plugins to help with development
- Install Log Deprecated Notices to watch for the use of deprecated or incorrect usage of WordPress functions.
- Install Theme Check to make sure your theme is up to scratch, very useful if you want to submit your theme to the WordPress theme repository.
- Sign up for Raygun and install the Raygun4WP plugin to track code errors on your site.