Setting up your sidebars

Fortunately, WordPress makes adding, altering, and removing widgets from your sidebars fairly simple.

To see what is currently in your dynamic sidebars:

• Login to your WordPress admin panel.
• Select "Appearance" → "Widgets".

• If you have an older wordpress version, you might have to select the sidebar you want to view to display sidebar information. Otherwise your sidebar display will look something like that above, showing the various dynamic sidebars available for widget placement.
• On the left side, you will see the currently available widgets. You can get more widgets by installing and activating wordpress plugins which have widgets.
• To place a widget in a sidebar, drag it to the sidebar you want it to show up in.
• To edit widget options, select the drop down arrow next to the widget in question while it is in your sidebar.

In the above image, the options for the Flexi Pages widget are shown. You can set the options you want and select "Save" to update the widget. You can also remove the widget or cancel your changes.

Once you have your widgets the way you want them, view your site and you should see them displayed.

Note: When you add a widget to a sidebar, the default widgets displayed in that sidebar disappear.

Note: For the Atahualpa theme, I recommend adding the following widgets to the left sidebar:

• Flexi-Pages
• Categories
• Tag Cloud

I also recommend adding a text widget to the right sidebar and creating a link to your store in it as well as a link to your newsletter if you have one. To link your Bonanza Store, you would enter something like the following into a text booth widget:

Visit our store for great deals on <a href="http://www.bonanzle.com/booths/YourBoothName" title="Your Booth Name">The-Types-Of-Items-You-Sell</a>.

You could, of course simply use the name of your store, but if you want better search engine ranking for your store, it is good to have links on keywords you want your store to be competitive for.

Installing new plugins via WordPress

If you are running a newer version of WordPress, you can locate and install plugins directly from within the WordPress admin panel. To do so:

1. Log into your WordPress admin panel
2. Select "Plugins" → "Add New" from the menu
3. To search for plugins:
   1. Set the dropdown to "Term", "Author", or "Tag"
      If you know the name of the plugin, use Term
   2. Enter the word you want to search for in the box
      If you know the name of it, enter the name here
   3. Select "Search Plugins"
      Results will be displayed below.
4. To browse by popular tags
   1. Under Popular Tags select a tag to view plugins which have that tag.
5. Select "Install" next to any plugins you want installed
   This will only install them.
   You will still need to activate them and possibly configure them.

Installing new plugins manually via FTP

If you prefer to install plugins manually, or want to install a plugin not listed on the wordpress plugins site, you will need to download the plugin, upload it to your server, and then activate and configure it.

If you are unfamiliar with FTP, see before continuing.

Downloading a Plugin

Find the plugin you want and download it to your computer. When you download it, be sure to make note of the file name in case you cannot find it and need to search for it on your computer.

Extracting Plugins

Once you have your plugin downloaded, you will want to extract it and locate the directory that you need to upload to your server.

For instructions on extracting files, see How to extract zip files in windows. Mac users should just need to drag the zip file to stuffit expander and linux users should know how to extract a zip file.

Once extracted, you need to find the root directory of the plugin. The plugin root directory will contain a file with the name of the plugin ending in .php.

For example, if you extract a plugin named “my-plugin” to the folder “my-plugin”, but there is only another directory inside of that folder, you will need to look in that directory and keep looking until you find .php files (at least one). The folder containing the php file(s) is the one that you will want to upload to your site in order to use the plugin.

Normally, plugin writers will place the plugin in the top level of the compressed archive, meaning that if you extract the contents to “my-plugin”, you will find “my-plugin.php” inside of it…and need to upload the “my-plugin” directory.

Uploading your plugin

Once you have found the root plugin directory, upload the entire directory to your servers "wp-content/plugins" directory.

If you are not sure how to upload files or directories, see How to upload files to your server with FTP.

• FileZilla Instructions:

1. Connect to your server via FTP
2. Browse to the directory containing your plugins root directory
   You should end up with the folder you want to upload displayed in the bottom left pane.
3. Browse to your plugins directory on the server
   1. In the top right pane select "public_html"
   2. In the top right pane select "wp-content"
   3. In the top right pane select "plugins"
      You should now see your currently installed plugins in the bottom right pane.
4. Upload your new plugin(s)
   1. Drag your new plugin folders from the bottom left pane to the bottom right pane
   2. Be sure you do not drag them into a folder on the bottom right pane

Once you have uploaded the plugin, you will need to locate and activate it within WordPress.

1. Log into your WordPress Admin Panel
2. Select "Plugins" from the admin menu
   This should display your currently installed plugins.
3. Locate your new plugin(s)
   If a plugin is not displayed, you most likely uploaded the wrong folder or uploaded it into the wrong folder on your server. Double check that you uploaded the plugins root folder and that you did not upload it into a subfolder of plugins on your server.
4. Select "Activate" next to your plugin(s)

Some plugins have configuration options. If your uploaded plugins do, you should look through them and make any necessary changes. Information on doing so can generally be found either in the installed plugin list or on the authors site (which is normally linked in the installed plugin list)

While that is nice, I prefer to control which tables have this effect.

Disabling Automatic Table Highlighting

1. Log into your WordPress admin panel
2. Select "Appearance" → "Atahualpa Theme Options"
3. At the top, under the Atahualpa Theme Options header, select "Tables"
4. Scroll down to "Hover effect for all tables?" and make sure it is set to No.
5. Save your changes

Enabling Highlighting on Chosen Tables

When you want hover highlighting on a table, add the class "hover" to the table in question.

If you normally use the visual editor when creating or editing posts, I recommend using the html editor for doing this.

Find the <table> entry at the beginning of the table in question and change it to <table class="hover"> and the table will now have the hover effect.

Enabling both Highlighting and Striping on Chosen Tables

If you turn off both hover and zebra striping for tables and want both on one table, you just need to add both classes to the table. To add multiple classes to a single item in html you include them both with spaces between them.

The result would look like <table class="zebra hover">

Table striping makes it much easier on the eyes to see what information is on each line.

The problem is that you may not want all tables to be striped. For example, many of the showcases I create use tables to display information simply because I find that getting results to look correct across different browsers is much easier that way…and striping makes them look quite odd.

Disabling Automatic Striping

1. Log into your WordPress admin panel.
2. Select "Appearance" → "Atahualpa Theme Options".
3. Select "Tables" under the Atahualpa Theme Options header.
4. Find the "Zebra stripe all tables?" section and set it to no.
5. Save the changes.

Making striped tables

With automatic table striping turned off, you can make individual tables striped by setting their class to zebra.

If you normally use the visual editor, use the html editor and find the <table> header for the table in question.

Add the zebra class so that it looks like <table class="zebra">.

If the table already has a class, add a space after the existing class then the word zebra. A good example is if you want a zebra striped table with hover highlighting, which would look like <table class="hover zebra">.

Removing the Atahualpa Blocks Logo

If you simply want no logo at all, you can stop displaying logos next to your site title by doing the following:

1. Log into your WordPress admin panel.
2. Select "Appearance" → "Atahualpa Theme Options".
3. Select "Header" from the options at the top.
4. In the Show logo image? section, delete the whatever is listed there.
5. Save your changes.

Replacing the Atahualpa Blocks Logo

If you would like to display a logo of your own next to your site title:

1. Upload your logo to "wp-content/themes/atahualpa/images" on your server.
2. Log into your WordPress admin panel.
3. Select "Appearance" → "Atahualpa Theme Options".
4. Select "Header" from the options at the top.
5. In the "Show Logo Image?" box, type the name of your image.
6. Save your changes.

For information on how to upload files, see:

• How to upload files to your server with FTP

Tweaking the displayed Logo in Atahualpa

You can changes how your logo is displayed in Atahualpa by editing its’ style. To do so:

1. Upload your logo to "wp-content/themes/atahualpa/images" on your server.
2. Log into your WordPress admin panel.
3. Select "Appearance" → "Atahualpa Theme Options".
4. Select "Header" from the options at the top.
5. Find "Logo Image: Styling" and enter any style modifications you want there.
6. Save your changes.

Some obvious tweaks would be to adjust the margins, place borders around it, etc.

While there are quite a few options, this quick tutorial will cover setting up a single banner with the Atahualpa theme and the various settings within it which relate to displaying banners.

Banners in Atahualpa

Atahualpa has fairly good built in documentation on banners. To read it:

1. Log into your WordPress admin panel.
2. Select "Appearance" → "Atahualpa Theme Options".
3. Under the Atahualpa Theme Options header, select Header Image.
4. You will see the options you have available with information about each of them.

As noted at the top of the Header Image page, you should have your images wide enough to be displayed properly on your site, which depends upon whether you use a fixed width, maximum width, or no maximum width for it.

If you want rotating banners (displayed randomly when pages are served), upload multiple banners to "wp-content/themes/atahualpa/images/header" .

If you want a single banner to always be displayed, upload it to "wp-content/themes/atahualpa/images/header" and make sure that it is the only one there.

To create custom banners, use a program such as gimp ( a free graphics image manipulation program ), photoshop, or paint and save your banners as jpg, png, or gif files.

To upload your banners, see How to upload files to your server with FTP

By default, most themes use the H1 tag for your sites title. While that is nice for branding purposes, I’m not typically trying to be the next Target, Toys R Us, Walmart, or Amazon, so I’d prefer to use my H1 tags for page and post titles.

Fortunately, WordPress has a simple php mechanism for determining what kind of page is being displayed, and we can use them to swap out tags on single posts and pages while leaving the site title in H1 tags on other pages.

The WordPress Heirarchy determines which pages will need to be edited. Typically, you will need to edit one of the following pages and/or the header.php file for the theme in question:

• index.php
• single.php
• post.php

Which file(s) you need to edit are determined by the theme which you are using.

H1 and H2 Swapping of Site and Post or Page Title

Below, I will cover exactly how to go about changing your H1 and H2 tags about when pages and posts are displayed. The instructions are specific to the Atahualpa theme, but should give the clues necessary to modify most other themes without too much trouble.

NOTE and WARNING:

Before making ANY changes to a theme, please read WordPress Theme Editing Best Practices.

With the new built in editor to wordpress which uses color highlighting, a typo could break your ability to edit a file in WordPress, resulting in loss of previous customizations if you don’t have a backup!

If you want everything to be displayed smoothly, even while visitors are seeing your pages, you should first make any needed css changes and then make changes to the way your site and page titles are displayed.

That way, when you make the changes to site and page titles, the style information will already be in place to handle them.

If that is the case, you should perform step 3 before steps 1 and 2.

Step 1: Updating your title to display as H2 when on single pages.

In the Atahualpa Theme, the site title is created in the "bfa_header_config.php" file. We want the title to be H2 when on individual posts and pages, but h1 otherwise.

1. In your WordPress Admin Panel, select "Appearance" → "Editor"
2. On the right, select "bfa_header_config.php" to load the file we need to edit.
3. Once it loads, scroll down and look for the Blog Title section.
4. Find the section that starts with if ($bfa_ata_blog_title_show) == "Yes".

That sections should read:

if ( $bfa_ata_blog_title_show == "Yes" ) {
	$logo_area .= '<h1 class="blogtitle"><a href="' . get_option('home') . '/">' . get_bloginfo('name') . '</a></h1>';
}

We want to add a test to see if it is a single page and change it if so. When finished, that section should read:

if ( $bfa_ata_blog_title_show == "Yes" ) {
	$xtTag = "h1";
	if ( is_single() ) {
		$xtTag = "h2";
	}
	$logo_area .= '<' . $xtTag . ' class="blogtitle"><a href="' . get_option('home') . '/">' . get_bloginfo('name') . '</a></' . $xtTag . '>';
}

Save your changes and your title will now be written in an H2 tag when displaying individual posts and pages on your site.

Step 2: Update post and page titles to be H1 tags when displayed on single pages.

For themes with a "single.php" file, this change will probably be done to them.

For the default Atahualpa theme, you will need to load "index.php" and edit it. To do so, select "Appearance" → "Editor" then select "Main Index Template (index.php)" on the right side of the page.

Find the code section for the Post Headline ( it has <!– Post Headline –> before it ), which should start and end with an h2 tag.

We want that H2 tag to be an H1 tag on single pages and posts, so we need to test to see if the current page is single or not and display H1 instead of H2 if it is. Your results on Atahualpa will look like the following:

<div class="post-headline">
<?php
	$xtTag = "h2";
	if ( is_single() ) {
		$xtTag = "h1";
	}
	echo("<{$xtTag}>");
	if( !is_single() AND !is_page() ) { ?>
		<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php
		if (function_exists('the_title_attribute')) {
			the_title_attribute();
		}
		elseif (function_exists('the_title')) {
			the_title();
		} ?>"><?php
	} the_title();
	if( !is_single() AND !is_page() ) { ?>
		</a><?php
	}
	echo("</{$xtTag}>");
?>
</div>

There are numerous ways to write this. I chose to have a default tag (h2) and then override it for single pages..and simply echo the tags within appropriate html brackets in order to display them.

Save the changes and your individual posts and pages will have h2 for the site title and h1 for the post title.

Step 3: Updating styles so individual posts look normal.

You may need to alter your styles in order to have things look right after making these changes. Typically, you just need to copy any style information for the current title in h1 tags and make a new version for h3 tags as well…then do the same for content titles as well.

Fixing the title style for Atahualpa

In the bfa_header_config.php file, we saw that the h1 tag for the title looked like:

•<h1 class="blogtitle">

This means there is a css style called .blogtitle or h1.blogtitle for displaying the blog title and we will need to create a new one for h2.blogtitle.

In Atahualpa, there are entries in style.css and header.php for the blog title. Copy them, paste them in below the h1 entries you just copied, change the h1 to an h2 in all items you just placed in, and save your changes. When done, you should have a new section to each of the two files.

Added in header.php

h2.blogtitle {
	<?php echo $bfa_ata_blog_title_style; ?>
}

h2.blogtitle a:link,
h2.blogtitle a:visited,
h2.blogtitle a:active {
	color: #<?php echo $bfa_ata_blog_title_color; ?>;
	font-weight: <?php echo $bfa_ata_blog_title_weight; ?>;
}

h2.blogtitle a:hover {
	color: #<?php echo $bfa_ata_blog_title_color_hover; ?>;
	font-weight: <?php echo $bfa_ata_blog_title_weight; ?>;
}

Added in style.css

h2.blogtitle {
	display: block;
	/* more  ... */
}

h2.blogtitle a:link,
h2.blogtitle a:visited,
h2.blogtitle a:active {
	text-decoration: none;
	/* more  ... */
}

h2.blogtitle a:hover {
	text-decoration: none;
	/* more  ... */
}

Fixing the post or page title in Atahualpa

In the index.php file, we saw that post and page titles are contained in a div with the class "post-headline&quot within h2 tags by default. This means that we are looking for styles such as the following to copy:

• div.post-headline h2

Upon checking, you will find such in both header.php and style.css, so copy them, change the copy to use h1, and save your changes.

The new section in header.php should look like:

div.post-headline h1 {
	<?php echo $bfa_ata_post_headline_style_text; ?>
	}

div.post-headline h1 a:link,
div.post-headline h1 a:visited,
div.post-headline h1 a:active {
	<?php echo $bfa_ata_post_headline_style_links; ?>
	}

div.post-headline h1 a:hover {
	<?php echo $bfa_ata_post_headline_style_links_hover; ?>
	}

The new section in style.css should look like:

div.post-headline h1 {
	margin: 0;
	padding: 0;
	/* more  ... */
	}

div.post-headline h1 a:link,
div.post-headline h1 a:visited,
div.post-headline h1 a:active {
	/* more  ... */
	}

div.post-headline h1 a:hover {
	/* more  ... */
	}

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.

To do so, you have two options: Use WordPress to download and install the theme or install the theme manually.

Downloading WordPress Themes

I recommend getting your themes from wordpress or, if you really want a theme from somewhere else, reading each file completely to ensure that it does not have anything bad hidden within it. While not common, some themes will place hidden links to sites that will hurt your search rankings, serve up malware, etc. If you are not familiar with what to look for, I recommend sticking to the wordpress site or themes offered by those whom you trust.

Method One: Using WordPress to install a theme

If you have a newer version of WordPress, you can install a theme directly from within WordPress itself. To do so:

• Log into your WordPress admin manel
• On the menu, select "Appearance" → "Add New Themes"
• If you know the name of the theme you want:
  1. Leave the search dropdown as "Term"
  2. Enter the theme name in the box
  3. Select "Search"
  4. Once your theme is displayed, select "Install"
• If you are unsure of the theme you want:
  1. Select the options you want a theme to have
  2. Select "Find Themes" below the options box
  3. Look through the listed themes and select "Preview" for any that look promising
  4. Select "Install" for any which you want to install

Method Two: Installing themes manually

For installing wordpress themes manually, I recommend using an ftp program ( file transfer protocol ) such as FileZilla, CuteFTP, or ProFTP. If you are unfamiliar with ftp, it is worth noting that I use FileZilla for the instructions I provide on this site, so you may want to download and install that before continuing.

Downloading your WordPress theme

• Locate the theme you want to install on your WordPress site.
• Select the "Download" link.
  I recommend right-clicking it and selecting "Save Target As" so that you can specify where you want to save it. If you are using Mozilla Firefox, then you can always find your downloaded files by selecting "Tools" → "Downloads" from your browsers file menu then right-clicking the item in question and selecting "Open Containing Folder"

Extract your theme

• Locate the theme you downloaded. It should be in a zip file.
• Extract the contents of the theme.
  Windows Zip Extraction Instructions
• Locate the theme root folder.
  Theme root directories in WordPress

Now you know which directory (folder) you will need to upload to your server to install your new theme.

Upload the theme to your server

• Connect to your server via FTP
  Using FTP to upload files
• Browse to the "wp-content" → "themes" directory on your web server.
• Upload your new themes root folder.

Now your theme is uploaded, all that is left is to activate it in WordPress

Activating New Themes in WordPress

• Log into your WordPress admin panel
• Select "Appearance" → "Themes"
• Find the theme you uploaded and select "Preview" to see what it will look like on your site or "Install" to install it.

Instead of selecting individual files in a web browser, you can copy entire directories up and move on to other things while the files are being uploaded.

FTP Programs

There are a wide variety of FTP programs available for use. For these instructions, I will use FileZilla, an FTP program available for Linux, Windows, and Mac OS X.

The default interface for mozilla looks something like the following:

Status Information shows what is happening with your connection.

Your computer lets you browse the contents of your computer.

The files on your computer in your working directory displays your current working directory…which is the directory on your computer where files will be copied to if you download them from your server.

Your web server lets you browse the contents of your web server (or whatever computer you are connected to via FTP)

The files on your server in your working directory displays the files on your remote working directory. This is where files will be copied to when you upload them (unless you drag them into a displayed folder).

Status of File Uploads / Downloads displays status information related to file uploads and downloads.

Uploading files to your Webserver

For the purposes of this quick tutorial, we will cover uploading the Atahualpa theme to a WordPress site.

Step 1: Setup your site in the FileZilla Site Manager

The first thing you should do is to setup your site in the site manager.

• Select "File" → "Site Manager"
  This will open the FileZilla Site Manager.

Select "New Site"
This will bring up the new site dialogue.

• Enter a name for your new site
  This can be whatever you want.
  I recommend using the domain name.
• Enter your sites domain name in the "Host" box
  If you have a static IP, you could enter the IP address instead.
• Enter your sites ftp port
  Leave this empty unless you set ftp to a non default port.
• Select your ftp server type
  This should normally be FTP – File Transfer Protocol
  As noted in Blog LockDown, you might want to consider enabling and using SFTP for better security.
• Select your "Logintype"
  Use normal if you want Filezilla to store your password. (convenient)
  Use Ask for Password if you want to be prompted for the password. (safer)
• Enter your FTP username
  If you signed up with Host Gator, you received this in your welcome email. It is your account username.
• Enter your password
  This only applies if you selected "Normal" for Logintype.
• Select "OK" or "Connect" to save your new server entry
  Ok saves without connecting to your server.
  Connect saves and then connects to your server.

Step 2: Find the files you want to upload on your computer

Once you are connected to your web server, you will want to locate the files that you want to upload. To do so, use the left windows to find your files.

If you wanted to find "downloads/atahualpa" on your D: drive, you would:

1. Select D: in your top left window
   This would show it’s contents in the bottom left window
2. Select downloads in the top left window
   This would show its’ contents in the bottom left window.
3. Find atahualpa in the bottom left window
   This is the directory you want to upload.

Step 3: Find the location you want to upload your files to.

On the right side, use the two displayed windows to find the folder that you want to upload content to.

If you wanted to upload a new theme, you would upload it to "public_html/wp-content/themes"

1. Select public_html in the top right pane
   You would see subfolders below it in the top right pane.
   You would also see the contents of public_html in the bottom right pane.
2. Select wp-content in the top right pane
   You would see subfolders below it in the top right pane.
   You would also see the contents of wp-content in the bottom right pane.
3. Select themes in the top right pane
   You would see subfolders below it in the top right pane.
   You would also see the contents of themes in the bottom right pane.
   You would drag your new theme folders to the bottom right pane.

Step 4: Copy your files to your server.

To copy files to your server, drag them from the bottom left pane to the bottom right pane.

Continuing our example of uploading the atahualpa theme:

1. Click the atahualpa folder in the bottom left pane
2. Drag the atahualpa folder from the bottom left pane to the bottom right pane
   Be careful not to drop it into a folder on the bottom right as doing so would place the atahualpa folder into whatever folder you dropped it into instead of into the themes folder.

Your files will then start being copied up and you will see both the top and bottom windows displaying information related to the files being uploaded.

Copying files from your server to your computer

This is just like uploading files, but instead of dragging them from the bottom left to the bottom right, you drag them from the bottom right to the bottom left.