Your SlideShare is downloading. ×

Intro to development sites and site migration


Published on

Presentation slides from WordCamp Toronto Developers 2012 talk. …

Presentation slides from WordCamp Toronto Developers 2012 talk.

As you begin doing any website design or development, or even just a site restructuring, you will quickly realize that a place to work, test and/or demonstrate a new site without impacting a production site is a necessity. A development site provides that place. This presentation will show you how to setup a simple local (on your pc/laptop) dev site or a hosted dev site. we’ll also see how to migrate WordPress sites, either to clone an existing site to a dev site for updates/testing or to move your finished dev site to the final production site.

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. “Intro to Development Sitesand Site Migration”Rick Radko WordCamp Toronto November 3rd, 2012
  • 2. A little bit about meRick Radko – R-Cubed Design Forge  Software, web and app designer/developer.  Creating custom web sites since 1996.  Artistic and creative engineer.  Co-organizer of: The Ottawa WordPress Group.  If you have questions or need help, contact me at: are posted at: © 2012 Rick Radko, 1
  • 3. Why a “Dev” site?A development “Dev” site:  Safe place to work that won’t disturb a live site.  A site where it does not matter if you:  WSOD the site.  WSOD – White Screen Of Death – blank page from WordPress when you have an error in your PHP code.   Dump error messages.© 2012 Rick Radko, 2
  • 4. Why a “Dev” site? Continued…  Safely test, add and remove plugins and themes  Plugins and themes can have conflicts with other plugins/themes or some versions of WordPress.  Many plugins and themes don’t clean up after themselves and leave junk in your database.  Public dev sites:  Can be used for client review/demo before going live.  Allow clients to add content before the site is live.© 2012 Rick Radko, 3
  • 5. Creating a Dev site for WordPressWordPress needs a web server with PHP andMySQL to run.  2 common options for a dev site server:  Hosted:  On a sub-domain of the live site.  On an alternate domain.  Or a sub-domain on another site (like yours).  “Local” web server on your pc or laptop.  May use both local and hosted in the process of a site’s development.© 2012 Rick Radko, 4
  • 6. Hosted dev sitesHosted dev sites:  Easy for users (clients) to make updates on.  Public, but can be protected.  Requires an internet connection.  Constantly moving files across the net: slow.  Uses existing facilities. (Nothing to set-up)  Domain can be:  A spare domain.  A subdomain on the client site.  A subdomain on your site subdomain.© 2012 Rick Radko, 5
  • 7. A hosted exampleLet’s create a dev site that:  Is a copy or “clone” of an existing site.  Is hosted.  Will be on a subdomain of the existing site.Creating a dev site like this:  Normally takes about 10-15 minutes.  Is one of the easiest dev setups to create:  Copying the files and database is local to the server.© 2012 Rick Radko, 6
  • 8. cPanelThis demo will use cPanel, you may need to adjustto use your hosting’s control panel.© 2012 Rick Radko, 7
  • 9. Add the sub-domainAdd a sub-domain to the hosted site.© 2012 Rick Radko, 8
  • 10. Copy over the WordPress filesCopy all of theWordPress files overto the demo folder.© 2012 Rick Radko, 9
  • 11. Copy the database to a new one – “demo”Use phpMyAdmin tocopy the database.© 2012 Rick Radko, 10
  • 12. Fix up three things1) You may need to add a user for the database:  phpMyAdmin in most set-ups does not manage the users.  Use the Databases tool to do that.  Just add the current user to the new database.© 2012 Rick Radko, 11
  • 13. Add all privilegesWordPress recommends “All Privileges”, for thedatabaseuser. Youcan reducethis someif you want.© 2012 Rick Radko, 12
  • 14. Update the config.php file2) In config.php file you will need to change:  The database name.  The database user name and password if you created a new user.  Config.php is in the top folder of your WordPress install, in this case: public_html/demo/.© 2012 Rick Radko, 13
  • 15. Update the database – if needed3) Update the database (if the domain changed).  The database is full of links and settings with the site domain. If the domain changes:  Links, including the menus, will take you to the original site.  You won’t be able to login to admin, you will go to the original site.  Despite what a lot of tutorials say, DO NOT do a search and replace in MySQL, or any text search and replace on an SQL dump.  If you are lucky you may get away with it, but you will more likely break serialized data representations.© 2012 Rick Radko, 14
  • 16. Use a scriptThe codex page: has some lengthy discussionon the topic of moving sites, but just use the scriptmentioned in the change URL section.  searchreplacedb2.php  replace-for-wordpress-databases/  It’s easy to use, and does the job in one step.  Is aware of serialization, even recursive (nested) serialization.© 2012 Rick Radko, 15
  • 17. Run searchreplacedb2.phpTo use searchreplacedb2.php  Upload searchreplacedb2.php to the top level WordPress folder, public_html/demo in this case.  Enter searchreplacedb2.php in the URL of your browser, in this case:© 2012 Rick Radko, 16
  • 18. Opening screen© 2012 Rick Radko, 17
  • 19. The database settingsThe script retrieved the settings…© 2012 Rick Radko, 18
  • 20. Select the tables to update© 2012 Rick Radko, 19
  • 21. Enter the URL changes© 2012 Rick Radko, 20
  • 22. It’s done  Over 7500 changes!!!Remember to remove the script!© 2012 Rick Radko, 21
  • 23. Dev site on a subdomain – complete duplicate© 2012 Rick Radko, 22
  • 24. The site is publicIn WordPress admin, under Settings -> Privacy  Set to “Ask search engines not to index this site”  Don’t want the dev site listed in Google etc.May also consider password protection.  .htaccess or maintenance mode plugins© 2012 Rick Radko, 23
  • 25. Copying the site backSame process to copy a revised dev site back.  Beware: the original site may change after the copy to dev.  Post/page etc. updates – easy to restrict  Comments – no control  May need to do a database merge to accommodate changes.© 2012 Rick Radko, 24
  • 26. “Local” web servers“Local” web server on your pc/laptop.  Fast, no internet lag, no FTP’ing of files.  All work is local on the computer.  Easier to integrate IDE.  No internet connection needed to use it.  Can work anywhere you that you can take your computer. (airplane, remote locations)  Usually private.  Need to install a web server© 2012 Rick Radko, 25
  • 27. Local servers – web server stackWAMP stack  Windows, Apache, MySQL, PHPLAMP stack  Linux, Apache, MySQL, PHPMAMP stack  Mac, Apache, MySQL, PHP*Apache is a web server© 2012 Rick Radko, 26
  • 28. Some available server stacksAll platforms:  BitNami:  XAMPP: http://www.apachefriends.orgWindows only options:  EasyPHP:  WampServer: http://www.wampserver.comMac only options:  MAMP:  Native installsLinux only options:  Native installs© 2012 Rick Radko, 27
  • 29. BitNamiBitNami  Available for all platforms  Easiest to install:  If you use the WordPress version.   Production ready versions  Virtual machine versions  Cloud deployment (amazon)© 2012 Rick Radko, 28
  • 30. InformationBitNami install tutorial on  Bit out of date, but still good  FAQ:  More detailed:  press© 2012 Rick Radko, 29
  • 31. A quick BitNami installLets see how easy it is to install BitNami:© 2012 Rick Radko, 30
  • 32. A quick BitNami install: screen 2© 2012 Rick Radko, 31
  • 33. A quick BitNami install: screen 3© 2012 Rick Radko, 32
  • 34. A quick BitNami install: screen 4© 2012 Rick Radko, 33
  • 35. A quick BitNami install: screen 5 - some details© 2012 Rick Radko, 34
  • 36. A quick BitNami install: port 80 conflict!© 2012 Rick Radko, 35
  • 37. Port conflictsPossible conflicts:  Skype  Other web servers  Chat software© 2012 Rick Radko, 36
  • 38. A quick BitNami install: port 3306 conflict!© 2012 Rick Radko, 37
  • 39. A quick BitNami install: screen 6© 2012 Rick Radko, 38
  • 40. A quick BitNami install: screen 7© 2012 Rick Radko, 39
  • 41. A quick BitNami install: mail settingsMail settings screens if you want to set them up.© 2012 Rick Radko, 40
  • 42. A quick BitNami install: screen 8© 2012 Rick Radko, 41
  • 43. A quick BitNami install: screen 9© 2012 Rick Radko, 42
  • 44. A quick BitNami install: screen 10© 2012 Rick Radko, 43
  • 45. A quick BitNami install: screen 11© 2012 Rick Radko, 44
  • 46. Install complete!© 2012 Rick Radko, 45
  • 47. The installed WordPress Site© 2012 Rick Radko, 46
  • 48. XAMPPXAMPP  Available for all platforms   Easy to install (not as easy as BitNami)  More tends to go wrong during installs.  Mimics common server setups  NOT production ready (security)© 2012 Rick Radko, 47
  • 49. Installing XAMPPDetailed install instructions are available forWindows, Mac and Linux at:    is also a version for memory sticks: © 2012 Rick Radko, 48
  • 50. Manual WordPress installIf you don’t know how to install WordPress usingthe .zip copied from, you shouldlearn.  Most of the web server stacks do not include WordPress.  If you want more than one WordPress site on BitNami you will also need to do WordPress installs.See codex for help with a WordPress install:© 2012 Rick Radko, 49
  • 51. An additional note on scripted installsA native install allows you to tweak settings likethe table prefix, which you can’t with a scriptedinstall (Fantastico, Simplescripts etc.).  Installer applications:  may add files to your site for “internal” tracking.  may not install the latest version of WordPress.  usually use default database settings for names and table prefixes – security weakness.© 2012 Rick Radko, 50
  • 52. Installing WordPressThe most complicated thing to installingWordPress is setting up the database.  It’s not that hard.  Lots of tutorials online.  On hosted servers you can use GUI tools like cPanel.  On a local server you can use phpMyAdmin  Hosted installs usually have the DB management in phpMyAdmin disabled.© 2012 Rick Radko, 51
  • 53. Managing databasesThis is the cPanelDatabases toolwhich will allowyou to add/deletedatabases anddatabase users.© 2012 Rick Radko, 52
  • 54. More installing WordPressThe other question is where to put the files?On local servers the htdocs folder is the default. Butwhere is it?  Depends on the install:  apache/htdocs is a common default  BitNami default windows:  C:Program FilesBitNami WordPress Stackapache2htdocs  Note: the WordPress “module” we installed in the demo is in a special location: C:Program FilesBitNami WordPress Stackapps.Hosted servers:  public_html© 2012 Rick Radko, 53
  • 55. Localhost or web servers setups will have your sites at:  http://localhost/<some_name>/ <some_name>/© 2012 Rick Radko, 54
  • 56. Localhost or this works most of the time:  Some things can have issues with the localhost or address as they expect a domain name.  It’s not very nice for using as a set-up when you have lots of sites.  Wouldn’t be nicer than  Or how about http://client_domain.local instead of http://localhost/clent_domain/wordpress/?© 2012 Rick Radko, 55
  • 57. Virtual hostsVirtual host – vhosts are a web server feature thatlets you set up nice names “virtual host names”for your websites.  get vhosts working you need to tell apache youwant to use them.  Find the apache/conf/ folder in your server install.  Open the httpd.conf file. (use a plain-text or programming editor)© 2012 Rick Radko, 56
  • 58. Httpd.conf fileFind the line “# Virtual hosts”  remove the “#” from the start of the line below. to  Save the file. (You may need to alter permissions to be able to save it.)© 2012 Rick Radko, 57
  • 59. Vhosts fileIn the apache/conf/ folder you should also find thefolder “extra” -> apache/conf/extra/  That is where you will find the file:  httpd-vhosts.conf  Open that file.Look for a line near the top like:  NameVirtualHost *:80  Make sure there are no “#”s in-front of it.© 2012 Rick Radko, 58
  • 60. Add a virtual hostFor a default BitNami install (on Windows) pastethis code after any other lines for bitnami.demo: <VirtualHost *:80> ServerName bitnami.demo DocumentRoot "C:/Program Files/BitNami WordPress Stack/apache2/htdocs" <Directory "C:/Program Files/BitNami WordPress Stack/apache2/htdocs"> Options Indexes FollowSymLinks Includes ExecCGI AllowOverride All Order allow,deny Allow from all </Directory> </VirtualHost>  You may need to adjust the 2 occurrences of: C:/Program Files/BitNami WordPress Stack/apache2/htdocs on other installs© 2012 Rick Radko, 59
  • 61. Add another virtual hostAnd paste this code after that for <VirtualHost *:80> ServerName DocumentRoot "C:/Program Files/BitNami WordPress Stack/apps/wordpress/htdocs" <Directory "C:/Program Files/BitNami WordPress Stack/apps/wordpress/htdocs"> Options Indexes FollowSymLinks Includes ExecCGI AllowOverride All Order allow,deny Allow from all </Directory> </VirtualHost>  You may need to adjust the 2 occurrences of: C:/Program Files/BitNami WordPress Stack/apps/wordpress/htdoc© 2012 Rick Radko, 60
  • 62. Save and restart ApacheSave the vhosts file. (You may need to alterpermissions to be able to save it.)You will need to restart Apache to get the settings totake effect.© 2012 Rick Radko, 61
  • 63. Hosts filesTo final step to make this work is to add the virtualhost to the “hosts” files on your computer  There is a chart on Wikipedia that provides common host files locations (dependent on your operating system) © 2012 Rick Radko, 62
  • 64. Hosts filesOpen up the hosts file and add these 2 lines:  Tells your computer that the 2 virtual hosts are on your computer.Save the hosts file. (You may need to alterpermissions to be able to save it)© 2012 Rick Radko, 63
  • 65. Sites on vhosts© 2012 Rick Radko, 64
  • 66. Trick to avoid domain migration issuesAdd the final name of the site to your hosts file:Set up a vhost for “” and now youcan work locally with the final name!  Easy migration  BUT - blocks access to any real external site of that name.  I don’t use this technique as I want to access both sites.© 2012 Rick Radko, 65
  • 67. Migration reviewWe did a migration in our first example and therewe saw that it is just a few steps: 1. Copy files.  Local copy or FTP to another server, does not matter. 2. Copy the database.  To move servers you will need to do an SQL dump/export and then an import on the new server. 3. Clean-up a few things.  Database user.  Database settings in wp-config.  URL’s - be aware of serialization.That’s all there is to migration!© 2012 Rick Radko, 66
  • 68. MySQL exportTo export the database to move to another serveryou can use the export function in phpMyAdmin.© 2012 Rick Radko, 67
  • 69. MySQL importTo import the database on another server you canuse the import function in phpMyAdmin.© 2012 Rick Radko, 68
  • 70. Backup scriptsMany of the backup and maintenance scripts:  Backup Buddy,  InfiniteWP,  ManageWP, + many otherswill do site migrations.Make sure any one you use mentions serialization.© 2012 Rick Radko, 69
  • 71. Multisite migration quirksNeed to manually change the wp-config file. Lookfor the line: define( DOMAIN_CURRENT_SITE, ‘ ); and update it to your new domain.Unlike regular sites which will display, (just withbad links) with multisite, you will get a databaseerror until you fix URL’s. (Use the script, note – youneed to be aware of all the different site domains,particularly with sub-domain multisite installs, andyou may not want to change all tables at once.)© 2012 Rick Radko, 70
  • 72. Checking for ports in usenetstat (network statistics)  A command-line tool that displays network connections.  –an  Shows all active portsnetstat –anb  Shows process names.© 2012 Rick Radko, 71
  • 73. ContactRick Radko  email:  twitter: @r3designforgeSlides at: © 2012 Rick Radko, 72