Local Website Development - Wordpress and Drupal - Design Workflow Part 3

Chris Dill's picture
Sat, 08/10/2013 - 23:10 -- Chris Dill

Design Workflow Part 3 – Install A Local Copy of Drupal or Wordpress

Installing a CMS hosting package on your live server is very easy- most web hosts provide a “one-click-install”. This is normally offered from that site’s control panel, and takes a couple of minutes to complete. If you are just starting out this is probably your best choice- just do the one click install and work off of your live site. If you are set on doing your development local and want to know how to install Drupal or Wordpress locally, keep on reading.

The first thing you should get your head wrapped around is that your CMS is just a collection of files.

Each CMS has a different directory structure, but for the most part you can do anything with these files you want. They contain all of the modules, themes, code, CSS, and HTML. What they don’t contain is the content- no blog posts, articles, nodes, blocks, posts, menu’s etc. Theoretically you could take a copy of your sites directory and move it around to many computers and set up multiple websites using the same file structure. This information is useful because it is a great way to make a backup- just take a copy of all of the files and zip it up.

Each CMS stores its content in a database, I typically use MySQL. Most web hosts offer several flavors, and I have not found one yet that did not offer MySQL. Each CMS has one file that controls this database connection. Drupal has a file in /Root/Sites/Default/Settings.php. Wordpress has one in the web root directory named WP-Config.php.

You can edit these files to change, add, or create database connections. These files are important when moving or installing your site, and I normally manually edit my files to point at manually created databases. I do this even when I am uploading my websites to go live, because I like control over the database name, user, and permissions.

On to the install!

The basic steps are the same for Drupal and Wordpress.

Go to http://www.drupal.org/download and download the latest Core, current at the time of this posting it is 7.23. Make sure you download the ZIP if you are on Windows. If you read my previous article Design Workflow Part 2 - Setting Up XAMPP For Local Development, you already have a specific web directory in which you host your sites. Mine is in my C:/Dropbox/WebRoot folder with each site in its own directory. For this one I will call it TestSite. For a local XAMPP installation, these website folders need to be in C:/XAMPP/htdocs.

So unzip the Drupal core folder into this directory, so it should contain the files and folder listed above directly under this root.

To do this in Wordpress, you do exactly the same thing- go to http://wordpress.org and download the latest version. Then unzip it into your site directory, and move on to the next step.

Alright, now time to setup your database, which will store your website content. We will use a tool called phpMyAdmin, which gets installed locally when you install XAMPP and MySQL. Most web hosts will offer a link in your control panel that launches the tool. With the local install, there will be either no root credentials to log in, or you will have set this up previously. The current version looks like this:

First thing we will do is create a user and a database- I find it is easiest to create a user first, and let the system create a database automatically. Up on the top navigation bar, select Users, then select Add User mid page.

Fill out the fields, and pick a username and password. Select Local from the dropdown in the host field. Check Create database with same name and grant all privileges and then select Check All to select all Global Privledges. We can customize security here but that isn’t normally needed for local development if you don’t share your PC.

Once this is all filled out click Go down in the lower right- and that’s it for the database creation.

This process is the same for both Wordpress and Drupal, though connecting to the database is different for each.

Go into your web root and edit your settings.php which we pointed out earlier. The whole file will be commented out except for a database section around line 200. Open this file in Sublime Text 2 and you will easily find it- looks like this:

This is where you specify your connection settings, using the information we entered into the new database we created earlier.

  • 'database' => 'localusername',
  • 'username' => 'localusername',
  • 'password' => 'password',
  • 'host' => 'localhost',
  • 'port' => '',
  • 'driver' => '',
  • 'prefix' => '',

And that’s it- this is your connection. Now for more complex deployements or when you bring your site live, this file changes. You won’t be using localhost anymore unless your web host recommends that, I typically use the DNS name of the host which is listed in the control panel information display.

Go to your WP-Config.php file and go to lines 19-34, this is where we setup our database connection. Fill in your database details:

  • define('DB_NAME', 'localusername');
  • define('DB_USER', 'localusername');
  • define('DB_PASSWORD', 'password');
  • define('DB_HOST', 'localhost');
  • define('DB_CHARSET', 'utf8');
  • define('DB_COLLATE', '');

This file goes the same as Drupal- it will change when you bring your site live.

Note: each CMS uses a different or no table prefix, and you can set up your own if you like. I tend to leave things at default, which is no prefix for Drupal and wp_ for Wordpress.

The last step is easy, and wizard driven.

To Install Drupal, go to localhost/webroot/install.php. this address will change depending on how you setup your XAMPP- I host multiple websites, so I define my site in httpd.php, and to navigate to my site I use testsite.local/install.php. You can see this outlined in another of my blog posts, Design Workflow Part 2 - Setting Up XAMPP For Local Development

Click through the first two screens and leave them at default, and then fill out your database information. Click save and now Drupal will install your database tables into the empty database you created earlier. After that you can browse to your site and begin to create content.

For Wordpress, just navigate to the root- in my case it is http://testsite.local, and work your way through the wizard. If you created your config file earlier, Wordpress wil auto connect to your database. If you did NOT create a WP-Config.php, the wizard will create one for you now. To use the wizard to create the same config we entered earlier, it would look like this:

Above I outlined simple procedures to install Wordpress or Drupal for local development. You can get really complex with local deployments, and use tools like Git or SVN. But as a single developer developing sites this simple local install works great. To see the other articles in this workflow, go check it out!


Add new comment