Creating a development environment for WordPress.
Although the default installation for WordPress meets my minimum requirements, there are several visual and other changes I'm considering that I don't want to experiment with using the live site. So before I go any further, I've decided to set up a development environment.
Step 1: Creating a virtual development machine.
To prevent unnecessary overhead on my system, and also to simplify testing and backups, a few years ago, I standardized on doing all my development work using using virtual machines, this lets me have any combination of os/tools/services required for a development project stored in one, easily backed up and portable file. Currently I'm using Oracle VM Virtual Box, so hopefully Oracle doesn't start charging for this currently free application.
I've decided to install Windows XP as the guest OS for now, mainly because I have an extra licensed copy.
After installing the OS, including IIS, then the patches, and the Guest additions, I have a basic OS and webserver ready for use. I recommend making a backup of the VM file at this point, you can then clone the backup, and use the clone as the starting point new projects, with both the OS and IIS ready to go.
Personally, I don't bother install a virus scanner on the guest OS, instead, I simply do not surf the web from within the virtual machine (with the exception of FTP to and from my live server), instead I download all files and updates using the host OS, and then move them to the guest OS using a virtual shared folder.
Step 2: Setting up the development environment for WordPress.
Before I began this step, I checked the version of PHP and MySQL installed by my hosting company, luckily they have the latest versions of both installed.
- Downloaded and installed MySQL server 5.5
- Downloaded and installed MySQL workbench 5.2
- Downloaded and installed PHP 5
- Pointed my IIS default website to the folder I wanted to use as the root of my dev-site
- Enabled directory browsing in IIS for the site (find this makes dev work much easier.)
- Created a quick "hello world" php file to make sure everything was working.
- Created a test db using MySQL workbench to make sure that the server was working.
Step 3: Copying my live WordPress site to development.
Because I had already installed WordPress on my hosting, creating the development environment was pretty straight foward:
- I FTP'd the contents of my live-site to the dev-site folder I created in Step 2.4
- Loaded up the browser in my virtual machine, and pointed the location to "localhost"
- Up came my website, with the php running on my dev machine, but the site is still pointing to the MySQL server of my live site. I want a dev-site completely detached from the live site.
- I opened the wp-config.php file found in the root of my dev-site, the file contains the following:
- DB_NAME - the name of the database schema created by my hosting company for WordPress
- DB_USER - the user name that WordPress uses to access the database
- DB_PASSWORD - the password for that user, this should be a long random string, if not, you should see how you can get it changed.
- DB_HOST - the IP address of the MySQL server on my host. I copied this line, commented out the original, and changed it to "127.0.0.1"
- Using MySQL Workbench, under Server Administrator:
- I created a new Server Instance, I called wp-live, using the information from Step 2.
- I connected to the live-db using the new Server Instance.
- I used the Data Dump feature to export a Self-Contained File (.sql), I called wp-snapshot.sql, containing the contents of my live-db.
- I closed the new instance
- I connected to the my dev-db, using the local instance created when installed MySQL, called Local instance: MySQL.
- I used the Data Dump feature to import the wp-snapshot.sql into the dev-db, this created a duplicate of information in my live-db in my dev-db, including the same DB_NAME.
- I used the Accounts feature to create an account with the same name and password as DB_USER, and DB_PASSWORD from Step 3.2, and gave the account the DBManager role.
- I created a new Server Instance, I called wp-live, using the information from Step 2.
- To make sure that I was definitely using the dev-db not the live-db, I disconnected my system from the internet.
- I loaded up the browser in my virtual machine, and pointed the location to "localhost"
- The page content loads, so the dev-db is working, but there is no formatting. Taking a quick look at the HTML, I see that links still contain stevenksavage.com.
Step 4: Changing the domain for my WordPress development site.
The answer was fairly simple, I simply add the following lines to my wp-config.php:
- define('WP_HOME','http://localhost);
- define('WP_SITEURL','http://localhost');
I now have a development environment for WordPress that I can use to start experimenting with themes, templates and plugins without affected my live-site.
Transferring my old content to the transitional site.
One of my key requirements was to transfer the content from my old site to the new site without breaking any links from external sites.
There are two reasons for this:
- Referred visitors.
- Search Engine Ranking.
The best way to move a page an let everyone know that it is a permanent move is to send the 301 Moved permanently, header. Because old site was done in ColdFusion 8, the solution was fairly straight forward.
First, I added the onMissingTemplate to my old application.cfc file.
<cffunction name="onMissingTemplate" access="public" returntype="string">
<cfargument name="requested" type="string" required="true"
hint="I am the template that the user requested." />
</cffunction>
Next, because I wanted to map specific pages to their new location, I added
<cffunction name="onMissingTemplate" access="public" returntype="string">
<cfargument name="requested" type="string" required="true"
hint="I am the template that the user requested." />
<cfset template="/index.php">
<cfscript>
if(findNoCase("/content/500/1.en.cfm",requested)) template = "/?page_id=2";
else if(findNoCase("/content/500/2.en.cfm",requested)) template = "/?p=60";
</cfscript>
<cfheader statuscode="301" statustext="Moved permanently">
<cfheader name="Location" value="#template#">
</cffunction>
The final step is to delete all the old .cfm pages on my site. Now whenever someone goes to an old link, they will be send a 301 message, and redirected to the pages new WordPress address.
Starting up the project to create a transitional site
As I mentioned in my last post, the first project will be to create a transitional site that will let me keep my older content, but also let me gather feedback on the new site I develop the final version.
In the past I relied mainly following a mental plan for developing and modifying my site, but to help create content for the new site, and based on lessons learned from my time as a BA and project manager, I plan to take and discuss a more analytical approach. So, before I begin, I’m going to create an initial plan based on recommendations from Prince2
- Identify the primary stakeholders and their key requirements.
- Decide what approach I’m going to take with the project.
- Document lessons learned from my past experience creating a website, what worked/what didn’t, and also look at industry best practices
- Identify my target audience, if I’m the only audience for the site, there isn’t much point in continuing, so what are the needs of these other, unknown users?
- The initial scope.
- Come up with possible solutions for how the site can be built, and if necessary based on the options, identify the remaining stakeholders and their key requirements.
- Pick a solution
- Plan for the implementation
Primary Stakeholders and their key requirements.
There are only two, myself, and my hosting company.
My key requirements
- I want to get something launched as soon as possible so I can start getting user feedback on content, design and technology for the new site as it is developed.
- Must be able to move my existing content to the new site, and be able to use 301 redirects (permanent move) so I don't break links from external sites.
- Must be able to control the look and feel of the site
- Solution must not be sole source, I don't want to be locked in to a specific vendor.
- Must allow me to backup my content, and the comments from users
My hosting site's key requirements
These requirements are based on my current hosting service, and may change if the desired solution needs different functionality.
- Must use one of the technologies support by the hosting service, currently Coldfusion, PHP, or ASP.NET
- Must not compromise the servers.
What approach am I going to take
I’m going to follow an iterative process, for several reasons:
- As I mentioned in my key requirements, I want to get something launched as soon as possible, an iterative approach will allow me to set up my site to meet my minimum requirements, and then add / enhance in the future..
- I’ve personally had more success and experience with an iterative approach than any of the other software development lifecycles, especially for web projects that have a habit of going on indefinitely.
- I will not be doing this full time, so if I wait until all I have the perfect site, the site will never get launched.
Lessons learned
- Focus on the content first, technology and design second. In the past I’ve started thinking about the design and technology too soon, and then had difficulty fitting the content in to the site.
- Pick the best solution, not simply the most interesting, or the easiest. In the past I’ve created my on solution for both amusement and knowledge, with my shift from web developer to business analyst and project manager, my web design skills are not currently up to date, so should I spend the effort on updating my skills, or simply use an existing solution (e.g. wordpress, drupal etc.)
Identify the target audience (the users)
My target audience are other business analysts, project managers and developers that I may be able to help, or that can help me as I learn and practice a variety of skills and techniques. So, in general my target audience is educated, technically savvy, and is looking for, and/or has knowledge in one or more of these areas.
The scope
The scope for this project is to pick a solution that will let me start posting documents like this so I can gather comments on feedback, and to port any legacy information I want to keep to the new solution. Any other enhancements,visual or otherwise will be treated as new projects.
Possible Solutions
For all of these projects there are three main options: build (custom), use an existing solution (buy, open source etc.), or create a hybrid (some customization some existing). I found in most cases it's the third option. But for this project I'm going to try and go with an existing, open source solution for the initial launch, so whatever I pick has meet the key requirements out of the box.
So my first step is to look at what solutions my hosting service provides.
- Joomala
- Kentico CMS for ASP.NET
- Mura for Coldfusion
- WordPress
Now, I could do a detailed analysis on the pros and cons of each, or look a different options, such as Drupal etc. But, I will leave that to the next project, for now I just need something to meet my minimum requirements.
I had heard of WordPress before, and decided to try it first, so looking again at my key requirements:
- I want to get something launched as soon as possible so I can start getting user feedback on content, design and technology for the new site as it is developed. YES, WordPress provides comments.
- Must be able to move my existing content to the new site, and be able to use 301 redirects (permanent move) so I don't break links from external sites. YES, I can back date the posts, so that the created dates will remain the same for my original content.
- Must be able to control the look and feel of the site. YES through templates.
- Solution must not be sole source, I don't want to be locked in to a specific vendor. YES, currently open source, and has a very large community of support.
- Must allow me to backup my content, and the comments from users. YES, I can backup the MySQL database.
Picking the solution
As you can see, I went with WordPress for my transitional site, I'm sure the other options could have also worked, and may still end up being my final choice. But until I've finished my requirements analysis for my new site, this will have to do.