WordPress 101: How to set up WordPress

Tags: , , , &

starting-with-wordpress-by-zing-design

WordPress has seen a huge growth in popularity in recent years, and now roughly 19%[1] 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

Setting up a local server should be reasonably straightforward, if you haven’t got one of MAMP (Mac) or XAMPP (Windows/Linux) installed, go and get it now, you’ll need it.

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

MAMP - setting up virtual host

Easy as that…

Windows – XAMPP

Add the site at the bottom of your hosts file, this can be found at C:\Windows\System32\drivers\etc\

127.0.0.1 disconinja.com

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.

PHPMyAdmin - creating a new database

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.

A screenshot showing the options required to set up WordPress.

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:

DownloadGitHub

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:

Set WP_DEBUG to true in wp-config.php

Make sure you change it back to false in production!

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.

[1] Source: http://venturebeat.com/2013/07/27/19-percent-of-the-web-runs-on-wordpress/

People who have viewed this post also viewed

Leave a comment

* Required fields

captcha

Please enter the CAPTCHA text