Portable WordPress – The ultimate guide to setup WordPress locally on your computer

July 15, 2009 by | Comments
**

Introduction

We are so used to deal with our WordPress set, that it is common to presume as usual to develop a web site remotely. But did you ever think about the benefits that could be accomplished by installing WordPress on your computer?

In a few words: enhanced security, higher development operating speed and connectivity independence.
Not too bad, eh?

[toc]Security is probably the most important aspect: if you’ve ever dealt with software development, you know exactly what’s dangerous for your timeline; risks like unwanted edits, wrong saves, “ooops! Why did I press delete?”….. you would know what a safe development place is: a special, reversible environment that helps you test and try-before-you-cry your work.

WP makes no exception: you’re constantly in danger, hacking-hacking your precious resource, upgrading stable plug-ins to newer, faulty versions, deleting posts, testing and exposing to risks your “official” content.

Although a good backup plan will help keeping your work safe and preventing data loss, it will never avoid site crashes and unpredictable downtimes.

Not to mention your operating speed. Whatever the proximity to your WP host, your work will be slower, sluggish, connection dependant and… remote: if your Internet connection is lost, your working environment becomes unreachable, in a snap!

Last but not least, by previewing your blog directly on your own computer you can debug server-side flow, like server-side includes, form processing, or database-driven pages.

That’s why, once you will get confident with your WP environment, you will be demanding for a safer, faster solution to the problems sketched out, aiming for a proper development environment for your blog: a local copy of your WordPress install, something that can travel everywhere with you and your computer, why not, on a USB stick.

To achieve this result basically we will need a portable web server and database compatible with WordPress, namely Apache and MySQL. So the steps we will go through are the following:

  • install a web server and database on our computer
  • copy the online WordPress contents locally
  • backup and restore WordPress database contents locally
  • configure the new environment

Installing the web and database server using XAMPP

If you’re not familiar with system administration, quickly you’ll realize that it’s not so easy to install an Apache web server and things gets harder if you want to add MySQL, PHP and Perl.

xamppLuckily, we all do have some saints looking after us: Apache Friends (http://www.apachefriends.org/) have developed XAMPP, a free portable and complete solution, easy-to-use package/distribution containing Apache, MySQL, PHP and Perl. XAMPP is very easy to install and to use; just download, extract and start configuring, as explaind later.

At the time of this article, four versions of XAMPP exist

  • a version for Linux systems (tested for Ubuntu, SuSE, RedHat, Mandrake and Debian);
  • a version for Windows 98, NT, 2000, 2003, XP and Vista;
  • a beta version for Solaris SPARC (developed and tested under Solaris 8);
  • and a beta version for Mac OS X.

In this article we will be exploring the install for Windows (VISTA).
This version contains: Apache, MySQL, PHP + PEAR, Perl, mod_php, mod_perl, mod_ssl, OpenSSL, phpMyAdmin, Webalizer, Mercury Mail Transport System for Win32 and NetWare Systems v3.32, Ming, JpGraph, FileZilla FTP Server, mcrypt, eAccelerator, SQLite, and WEB-DAV + mod_auth_mysql.

As in this tutorial we will stick for a Windows VISTA install, if you’re running on a different platform, adjust the instructions accordingly.

Let’s start downloading XAMPP installer and following the installation aids.

Under VISTA you’re early prompted about the risks of using VISTA’S User Account Control: if enabled, XAMPP could get stuck into an unusable state. Not a big problem, I personally keep disabled UAC.
For greater stability it is suggested to install XAMPP outside of the canonical “Program Files” folder; again, in my case it’s no problem at all: I always keep ALL my software outside of that folder, allowing my disk being tidy and letting me know exactly what I have installed. For example, the software “root” on the computers I use, is the “C:\myprogs\” folder.setup01
setup02The next setup screen will give us the opportunity to select other XAMPP options, particularly details about running XAMPP’s apps as Services. I advise not to do so, at least in this setup phase, as this environment seems to be a little delicate to tune and without XAMPP running on services it’s easier to stop/start the apps within the Windows Task Manager if anything goes wrong.

setup03Once done, we will be prompted to start XAMPP control panel; choose yes, and the XAMPP Control Panel main screen will be shown:

Click on the two “Start” buttons on the right of “Apache” and “MySQL”: if you’ve done it right, a black on green “Running” state will be highlighted.

If not, jump momentarily to the troubleshooting section of this post.
setup04As a last step launch your browser and point to http://localhost/; if no conflicts occurred, the XAMPP main page will be loaded.
setup05At this point, you will have a personal web server (Apache) and MySQL database server running on your computer!

Make an offline copy of WordPress

Next, we will be making a backup copy of the WordPress install on our computer. There are many ways to do so, depending on the tools you wish to use, I will explain using cPanel (widespread nowadays on many Internet Service Providers) but you can achieve the same result also using a generic FTP utility: the goal is to make an exact copy of your online WordPress folders and files, onto your computer.

Before doing so, we need to create a folder (something like “wordpress”) into the XAMPP document root folder (xampp\htdocs), that will contain our WP data; in my case the complete path looks like “c:\myprogs\xampp\htdocs\wordpress”.
setup08Now let’s build the copy of our online content: using our browser we will login onto the ISP hosting our WP blog and within Cpanel, we will launch the file manager applet
setup09then we’ll navigate to the folder containing the wordpress install,select the “select all” checker and then click onto the “Compress” icon
setup10a list of the content being compressed will be shown, select “Zip archive” and press the “Compress” button
setup11
setup12Once done, select the zipped archive and click onto the “Download” icon: when prompted where to save the file, navigate to the newly created folder (example: “c:\myprogs\xampp\htdocs\wordpress”) and save the zipped file; uncompress using your favourite ZIP utility the whole pot, keeping the original folder structure.

Backing up and restoring the database

Now we need to create a backup of the online database holding the WordPress tables; we will achieve this using phpMyAdmin tool.

Warning: clean up and trim your database before performing the backup! I’ve had some troubles importing my database mostly because some tables had garbage (like very long, unused, records) left over mysteriously by some old plug-ins and couldn’t do it right importing back the contents until I’ve got rid of that garbage. I will discuss about this issue in future posts.
setup15Back to your preferred browser, launch phpMyadmin within your Internet\cPanel online account and select the database holding your WP install, then select the “Export” tab.

setup16Apply the settings shown in the following screenshots.

setup17setup18setup19setup20

Assign a filename to the backup, and press the “Go” button; download and save anywhere on your PC.
setup06Before restoring the database, we need to create a database using phpAdmin, this time on the local computer: in your browser, point to http://localhost/phpmyadmin/ and in the MySQL Localhost frame go for “create new database”; type in the name of your local database and select “utf8_unicode_ci” both for the database and the connection collation, then press the “Create” button.
setup07You should see the following:

setup21Then select the newly created DB and select the “Import” tab, loading the previously saved database. Follow the screenshot seetings.

If your database is particularly fat, you may slip into a typical memory allocation error: if that is the case read here.
If you’ve done it right, you should see something like:setup22

Edit local WordPress configuration

The last step is to modify WordPress’ local configuration file, editing wp-config.php in your previously created local folder, changing the following settings, accordingly:

<?php
/**
* The base configurations of the WordPress.
*
* This file has the following configurations: MySQL settings, Table Prefix,
* Secret Keys, WordPress Language, and ABSPATH. You can find more information by
* visiting {@link http://codex.wordpress.org/Editing_wp-config.php Editing
* wp-config.php} Codex page. You can get the MySQL settings from your web host.
*
* This file is used by the wp-config.php creation script during the
* installation. You don’t have to use the web site, you can just copy this file
* to “wp-config.php” and fill in the values.
*
* @package WordPress
*/

// ** MySQL settings – You can get this info from your web host ** //
/** The name of the database for WordPress */
define(‘DB_NAME’, ‘yourDbname’);

/** MySQL database username */
define(‘DB_USER’, ‘yourDBuserName’);

/** MySQL database password */
define(‘DB_PASSWORD’, ‘yourPassword’);

/** MySQL hostname */
define(‘DB_HOST’, ‘localhost’);

/** Database Charset to use in creating database tables. */
define(‘DB_CHARSET’, ‘utf8′);

/** The Database Collate type. Don’t change this if in doubt. */
define(‘DB_COLLATE’, ”);

/**#@+
* Authentication Unique Keys.
*

Finally, open your browser and point to http://localhost/wordpress, you’re done!

Advanced topics – part 1

Running XAMPP services

Now that you’re up and running you may want to let start Apache and Mysql server automatically: just tick the corresponding checkbox into XAMPP’s control panel, enabling loading the apps above as services; remember to stop Apache & MySQL before doing so, otherwise an error will be issued.

Enable cUrl

Just in case your wordpress install needs cURL extension, with your favorite editor load the php.ini file located in the xampp\php folder; therefore, search for

;extension=php_curl.dll

and uncomment it (remove the leading “;”).
Stop & start Apache.

Using virtual hosts

There are many reasons why you could choose to apply for virtual hosts, on your freshly installed local WordPress web server, for example, you could have multiple blogs/sites running on the same computer or you could have chosen (like I did) to alter WordPress folder location out of the xampp\htdocs folder (see Moving WordPress local folder to a better place); more: you simply wish to avoid conflicts with absolute/relative paths in your WP webpages… it looks like WP doesn’t like much relative paths particularly with images.

Whatever the reason, here’s how to enable a virtual host on your XAMPP configuration:
As a first step, edit the file httpd-vhosts.conf located in xampp\apache\conf\extra folder;
Code at the end of the file, the following directives:

NameVirtualHost *
<VirtualHost *>
DocumentRoot “C:\MyProgs\Development\xampp\htdocs”
ServerName localhost
</VirtualHost>

<VirtualHost *>
DocumentRoot “C:\MyProgs\Development\xampp\htdocs\wordpress”
ServerName wplocal

Order allow,deny
Allow from all

</VirtualHost>

Remember to replace the C:\MyProgs\Development with your current path to XAMPP folder. Save and exit.

The first <virtualhost *> directive helps keeping accessible default web contents on local web server, namely XAMPP’s home page or the phpMyAdmin home page (localhost);

The second one, instructs Apache, by means of the ServerName & Documentroot directives, what is the name of the virtual host (example: wplocal) and what folder to look for the virtual host’s contents, while the Directory directive gives the proper security settings to the folder, otherwise inaccessible (Allow from all)

To accomplish our goal, we need to instruct our DNS client on our computer to look for the newly created host name.

Edit the hosts file located into the c:\windows\system32\drivers\etc folder and look for the statement:

127.0.0.1 localhost

add the following statement on a new line:

127.0.0.1 wplocal

Now the hosts file should look something like:

# Copyright (c) 1993-2006 Microsoft Corp.
#
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
#
# This file contains the mappings of IP addresses to host names. Each
# entry should be kept on an individual line. The IP address should
# be placed in the first column followed by the corresponding host name.
# The IP address and the host name should be separated by at least one
# space.
#
# Additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a ‘#’ symbol.
#
# For example:
#
# 102.54.94.97 rhino.acme.com # source server
# 38.25.63.10 x.acme.com # x client host
127.0.0.1 localhost
::1 localhost
127.0.0.1 wplocal

Save and exit.

setup25Stop Apache from XAMPP’s control panel, then just to make sure no DNS conflicts occur, we shall clear the computer DNS client cache: open a command prompt window and type “ipconfig /flushdns” and press enter, then start again Apache.

Load your browser and check out everything is running smoothly, typing:
http://localhost (to access XAMPP home page) and http://localhost/phpmyadmin/ (phpMyAdmin) and finally http://wplocal to gain access to WordPress home page.
That’s it!

Advanced topics – part 2

Moving WordPress local folder to a better place

As I hate it, I do all my best to avoid having programs & data mixed together; however XAMPP installs by default the document root into it’s folder, namely in c:\xampp\htdocs …… ROAR!
If you’re a tidy-maniac as I am, and wish to keep your WordPress files into your documents folder, head on!

Stop Apache from XAMPP’s control panel and move your WordPress folder into it’s new location, for example in your Documents folder. Check out the underlying path of the new folder location (example: c:\users\chen\documents\biz\projects\wordpress);

at this point, we need to enable virtual hosts, following the instructions described in the previous chapter, but before saving the httpd-vhosts.conf file, code in the DocumentRoot and Directory directives, the path to the new location:

NameVirtualHost *

<VirtualHost *>
DocumentRoot “c:\myProgs\development\xampp\htdocs”
ServerName localhost
</VirtualHost>

<VirtualHost *>
DocumentRoot “e:\users\chen\documents\biz\projects\wordpress”
ServerName wplocal
<Directory “e:\users\chen\documents\biz\projects\\wordpress”>
Order allow,deny
Allow from all
</Directory>
</VirtualHost>

Save and exit, then restart Apache. You’re done.

Allowing custom permalinks to work properly – part 1

Unfortunately some XAMPP versions do not enable mod_rewrite by default, that is if you choose (like I do) to use custom permalinks in WP’s config you’ll have troubles navigating outside of your home page, falling into a 404 error. To enable custom permalinks you’ll need to instruct Apache to allow WordPress to write the .htaccess file needed to create pretty permalinks.

Stop Apache from XAMPP’s control panel, and edit the file httpd.conf located in the xampp\apache\conf folder; look for the line

#LoadModule rewrite_module modules/mod_rewrite.so

Remove the hash sign (#) from the line.

Next, within the same file mentioned above, search for all instances of

AllowOverride None

and change it to

AllowOverride All

Despite many sites on the Internet are advising to leave the first occurrence to None, (that one in the default folder) I have found that only replacing all the occurrences, makes custom permalinks work.

Save and exit, then restart Apache form XAMPP control panel.

Allowing custom permalinks to work properly – part 2

If somehow the example above shouldn’t work, checkout if the .htaccess file located in the root of your WordPress install, holds the proper settings.

# BEGIN wordpress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_fileNAME} !-f
RewriteCond %{REQUEST_fileNAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END wordpress

Adjust settings accordingly. The example above does not takes in account if some WP plug-ins (like WP super cache) have modified the .htaccess file, so pay attention!

Troubleshooting

Trapping Apache errors

It happened to me that mysteriously in the very first installation & tweaking stage I couldn’t start the Apache server from XAMPP control panel.

There is an error.log file in the xampp\apache\logs folder but that wouldn’t help much.
An easy way to understand what’s happening behind the scene is to run Apache from the command prompt.

setup23Open a command window (start menu, in the search box type CMD and click onto cmd.exe)
Navigate to the xampp\apache\bin folder (for example, type from the command prompt “cd c:\myprogs\development\xampp\apache\bin” and press enter); once in the proper folder, type apache and press enter.
Track down any displayed error and behave accordingly; common errors are syntax errors or wrong values in apache configuration file, httpd.conf, located into the \xampp\apache\conf folder.

Tweak your configuration and keep launching Apache from command line, until you get it to work. When done, exit the command line window and run Apache from XAMPP’s control panel, as usual.

Fixing port conflicts
One of the common reasons preventing Apache to work properly is that another application running on your computer is already using TCP port 80, like Skype does.
In this case you have two choices, the first one is to change the port used by the conflicting application, the second is to modify Apache’s listening port.

If you stick for the first solution, start the game googling for the utility TCPView for Windows (by Mark Russinovich), download and start the utility (you can also start the app. from the web); once running sort the list by clicking on the “LOCAL ADDRESS” column and find the 0.0.0.0:80 value; right click with mouse on the found row and select “Process properties”; a dialog box will pop up showing the name and the path of the application using port 80.
Tweak the conflicting application accordingly.
When done, start Apache.

If you rather wish to leave the conflicting application to use TCP port 80, then you will need to instruct Apache to “listen” on another port number.

To achieve this, edit the httpd.conf file located in the xampp\apache\conf folder for Apache, and find the following string:

Listen 80

Change the port number to something different like 8080, you can still use TCPView to checkout unused ports, before editing.

Now find the statement

ServerName localhost:80

and change the port accordingly, obviously using the same port chosen in the previous step. Save, exit and restart Apache.

The only problem with this solution is that instead of typing in the regular like http://localhost/ from your browser, from now on you’ll have to type in http://localhost:8080/

The infamous memory allocation error

On particularly large databases you may be hit by a common error like:
Fatal error: Allowed memory size of 100663296 bytes exhausted (tried to allocate …….. bytes) in c:\myProgs\development\xampp\phpmyadmin\libraries\import.lib.php on line 269

If that is the case, increase the memory limit in your php.ini file located into the xampp\php folder; edit the file above and search the memory_limit string coding a bigger value like

memory_limit = 256M

Save and exit, then restart Apache within the XAMPP control panel.

Firewall woes

Make sure your firewall is set to allow incoming connections to PHP, Apache and MySQL, otherwise you may get struggling wondering why something is not working properly, while the answer is right there under your nose!

Final thoughts

From now on, keep in mind that you will have to manage two copies of your WordPress work, the local one for development purposes and the “release” online version; remember to make regular backups of both. Also notice that the synchronizing process will be critical, due to the nature of WordPress environment: while it will be quite easy to automate scripts or use tools to synchronize the WordPress folders, you will need to manually tweak & synch plug-ins and database contents, until a completely automated sync solution will be available. Sooner or later someone will exploit a plug-in that does the job smoothly.

What I warmly suggest in the meanwhile, is to use a website development tool that has built-in local and remote update/synchronizing capabilities. I’m currently testing Adobe DreamWeaver, and it looks like it has the features to do the job.

Have fun at the speed of light with your new WordPress local copy!

Enjoyed it? Share it!

Digg facebook delicious live
google linkedin myspace reddit
stumble technorati twitter Yahoo
This page is archived in:

- Guides - Popular - Windows 

More..

  • Wdliell@yahoo.com.br

    eu estou com um probrema por que aparece uma mensagem dizendo que eu soh tenho acesso localhost e aparece essa mensagem quando eu acesso via ip:

    Acesso proibido!

    XAMPP Novo conceito de segurança:

    Acesso ao diretório solicitada só está disponível a partir da rede local.

    Esta configuração pode ser configurado no arquivo “httpd-xampp.conf”.

    Se você acredita ter encontrado um problema no servidor, por favor entre em contato com o webmaster.
    Error 403
    187.119.132.111
    01/12/11 11:41:25
    Apache/2.2.14 (Win32) DAV/2 mod_ssl/2.2.14 OpenSSL/0.9.8l mod_autoindex_color PHP/5.3.1

    eu fui nesse arquivo e estah assim…

    #
    # XAMPP settings
    #

    SetEnv MIBDIRS “/xampp/php/extras/mibs”
    SetEnv MYSQL_HOME “\xampp\mysql\bin”
    SetEnv OPENSSL_CONF “/xampp/apache/bin/openssl.cnf”
    SetEnv PHP_PEAR_SYSCONF_DIR “\xampp\php”
    SetEnv PHPRC “\xampp\php”
    SetEnv TMP “\xampp\tmp”
    UnsetEnv PERL5LIB

    #
    # PHP-Module setup
    #
    LoadFile “/xampp/php/php5ts.dll”
    LoadModule php5_module modules/php5apache2_2.dll

    SetHandler application/x-httpd-php

    SetHandler application/x-httpd-php-source

    PHPINIDir “/xampp/php”

    #
    # PHP-CGI setup
    #

    SetHandler application/x-httpd-php-cgi

    Action application/x-httpd-php-cgi “/php-cgi/php-cgi.exe”

    AddType text/html .php .phps

    ScriptAlias /php-cgi/ “/xampp/php/”

    AllowOverride None
    Options None
    Order deny,allow
    Deny from all

    Allow from all

    SetHandler cgi-script

    SetHandler None

    php_admin_flag safe_mode off

    AllowOverride AuthConfig

    Alias /security “/xampp/security/htdocs/”

    php_admin_flag safe_mode off

    AllowOverride AuthConfig

    Alias /licenses “/xampp/licenses/”

    Options +Indexes

    DirectoryIndexTextColor “#000000″
    DirectoryIndexBGColor “#f8e8a0″
    DirectoryIndexLinkColor “#bb3902″
    DirectoryIndexVLinkColor “#bb3902″
    DirectoryIndexALinkColor “#bb3902″

    Alias /phpmyadmin “/xampp/phpMyAdmin/”

    AllowOverride AuthConfig

    Alias /webalizer “/xampp/webalizer/”

    php_admin_flag safe_mode off

    AllowOverride AuthConfig

    #
    # New XAMPP security concept
    #

    Order deny,allow
    Deny from all
    Allow from ::1 127.0.0.0/8
    fc00::/7 10.0.0.0/8 172.16.0.0/12 192.168.0.0/16
    fe80::/10 169.254.0.0/16

    ErrorDocument 403 /error/HTTP_XAMPP_FORBIDDEN.html.var

Stay Tuned...
RSS
RSS
e-Mail