WordPress theme editing best practices

If you make changes to the themes you use or build your own themes, you should do so with care, especially if you are using a newer wordpress version that has syntax highlighting built into it.

Failure to use caution when updating your site via theme modifications can cause all kinds of headaches such as losing every change you have previously made to your theme due to a simple typo that the syntax highlighter cannot handle.

With that in mind, here is a good way to go about making changes to themes without worrying about losing previous work, having your site messed up, etc.

Create a local copy of your theme.

1. Create a directory on your computer to store a backup copy of your theme in.
   • Windows Instructions
   1. Open Windows Explorer
      1. Right-click your start menu
      2. Select "Explore"
   2. Create a Backup Directory For Your Web Site
      1. On the left side, select "My Documents"
      2. From the file menu select "File" → "New" → "Folder"
      3. You should see a new folder on the right named "New Folder". Type in the name you want for your folder and then press enter on your keyboard. I tend to use my domain name for server backups. For example privateerwebsolutions_com for this site.
2. Download the contents of your website to your backup folder
   • FTP Instructions
   1. Connect to your web server via ftp
      • FileZilla Instructions:
      1. Open Filezilla
      2. From the filemenu select "File" → "Site Manager"
      3. Select your website on the left
      4. Select Connect
   2. Download your web site to your backup folder
      • FileZilla Instructions:
      1. On the top left panel browse to your newly created folder
      2. Select your newly created folder so that the bottom right panel shows its contents (a single folder with .. as the name)
      3. On the top right panel, browse to your web sites root directory ( /public_html )
      4. Select your public_html directory in the top right panel to show its contents in the bottom right panel.
      5. Copy all of the files and folders in the bottom right panel to the bottom left panel (except the folder with the name ..).
         • The quick way:
         1. Select the item after the .. folder
         2. Scroll down to the bottom of the file list
         3. While holding down shift on your keyboard, select the last item listed
         4. Select any of the highlighted items and drag them to the bottom left window with your mouse.

When finished, you will have local copies of all of the files on your website contained within your backup folder. Additionally, they will be stored in the same directory structure as they exist on your server.

Backup old versions and make changes to themes locally

When you want to make changes to one of your themes, you should first make backups of any files you want to edit. I recommend making your backups by adding the year, month, day, and time to the filename so that the backups look like file-2009-06-21-0510pm.php.

1. Create a backup of the file to be edited
   • Windows Instructions:
   1. Open windows explorer
      1. Right-click your start menu
      2. Select "Explore"
   2. Locate the file you want to make changes to
      1. On the left side, browse to the directory that contains the file you want to edit.
         For example, if you want to edit index.php in the atahualpa theme on privateerwebsolutions.com, you would browse to "My Documents\privateerwebsolutions_com\wp-content\themes\atahualpa"
   3. Create a copy of the file you want to edit
      1. Select the file you want to edit
      2. From the file menu select "Edit" → "Copy" to copy the file.
      3. Select the directory you want to place your copy in.
         For this example you would select the atahualpa folder on the left.
      4. From the file menu, select "Edit" → "Paste"
         This will create a copy with "Copy of " placed before the original name.
   4. Rename the copy you created
      You want to remove "Copy of" and add the date to it
      1. Select "File" → "Rename" from the file menu
      2. Delete the "Copy of " from the front of the file name
      3. Add the year-month-day-time to the filename as YYYY-MM-DD-HHMM
         For example, Copy of index.php would become index-2009-06-30-1201pm.php
2. Edit your file
   You should be editing the file with the original name, not the copy you created with the date after it as that is the original file as it existed during the date and time you gave it.

By creating backup files like this, you know what the file looked like during the dates given in the filename. Additionally, sorting them by filename keeps your backups with the original in order of date edited.

Upload your edited files

Once you have completed making changes to a file, you will need to upload it to your webserver to test it out.

1. Upload your edited file
   • FileZilla Instructions
   1. Open FileZilla
   2. Connect to your web server
   3. Copy your edited file to your server
      1. In the top left panel browse to the directory which contains your edited file
      2. Make sure you can see your edited file in the bottom left panel
      3. On the top right panel browse to the directory that contains that file on your server
      4. Make sure you can see the file you want to replace on the bottom right panel
      5. Drag your edited file from the bottom left to the bottom right
      6. Confirm that you want to overwrite the original when prompted
2. Repeat step 3 for each edited file
3. Check your changes
   Visit your website and verify that things look as you expect them to.

Should something go terribly wrong

If you put a file up and things go so badly that you cannot quickly fix them, you can overwrite your changes with your most recent backup of any files.

1. Change the name of your edited file
2. Rename your most recent backup to its original name
3. Upload your most recent backup to overwrite your changed version.
4. Verify that things look proper again.

That should get your site working again while preserving any changes you made so that you can attempt to fix them.

Alternate methods

Even better than the above is to setup a local copy of your WordPress site on your own computer along with backup software such as svn.

That way, you can make changes locally without worrying about messing up your site, get them fully tested, and only then upload your changed files to your live site.

Doing so is beyond the scope of this site currently, but I will likely provide instructions on doing this down the road.

Similar Posts:

• Setting up new plugins in WordPress
• How to upload files to your server with FTP
• Theme root directories in WordPress