An example of a category showcase

Below is an example category showcase built for the Atahualpa 3.2 WordPress theme.

The above category showcase does the following for a store traffic site:

It provides a general page for driving traffic related to roleplaying games

It has sections for information relevant to potential customers:

• Reasons to buy from you
• Links to news and resources published on site which are updated automatically as you create new content.
• A quick selection of subcategories for those interested in particular roleplaying items or systems
• A list of recently added roleplaying games which is generated automatically from the most recent product showcases published on site.
• A store widget to showcase a couple of specific products

Creating your own Category Showcase

To create a category showcase like the one above, you will need the following:

• A WordPress site
  • See my store traffic website page for details.
• The Recent Posts plugin for WordPress
• The Post Plugin Library for WordPress

Note:
See Setting up new plugins in WordPress for help with installation.

Step 1: Setting up the Recent Posts Plugin

The Recent Posts plugin needs to be configured to allow output in content.

Log into WordPress

Select "Settings" → "Recent Posts"

This will bring you to the recent posts setting screen.

Select "Placement" from the top menu

This will bring up the recent posts Placement Settings screen

Set "Output in content:" to "Yes"

This lets you place special tags in posts and pages to display recent posts.

Select "Save Placement Settings"

This will save your settings

Step 2: Add CSS entries to your site

The category above uses a few CSS settings to take care of placement.

You may want to add more for finer display control.

Add the below stylesheet information to your site

• Atahualpa version 3.2 Instructions:

Copy the contents of the box below

Click in the box

Select "Edit" → "Select All" from the file menu

Select "Edit" → "Copy" from the file menu

Login to your wordpress site

Select "Appearance" → "Atahualpa Theme Options"

Select "HTML/CSS Inserts" from the theme options at the top

Paste the copied code into the end of the CSS Inserts box

Scroll down to the end of the CSS Inserts Box

Click at the end of the last line

Select "Edit" → "Paste" from the file menu

Select "Save Your Changes" from the bottom of the screen

• For most other themes, copy the contents into your style.css file.

.pws-cat-list tr td {
    vertical-align: top;
}
.pws-cat-show tr td {
    vertical-align: top;
}

Step 3: Update Atahualpa Theme Options

Disable the right sidebar on "Page" pages

To do so:

• Log into WordPress.
• Select "Appearance" → "Atahualpa Theme Options".
• Select "Sidebars" under the Atahualpa Theme Options header.
• In the "Right Sidebar: Display on" section, uncheck "Page pages"
• Save your changes

Step 4: Create your new Category Showcase Page

To create a category page like that shown at the top of this page, use the following code snippet for the body and edit it to suit your tastes.

 CATEGORY BLURB 
<table class="pws-cat-show">
<tr>
<td width="50%">
<table width="100%">
<tr>
<th>Why buy from us?</th>
</tr>
<tr>
<td>

REASON-AND-INCENTIVE-INFO
</td>
</tr>
<tr>
<th>News and Resources</th>
</tr>
<tr>
<td>
  <!--RecentPosts limit=5&tag_str=*********************-->
 </td>
</tr>
</table>
</td>
<td>
<table width="100%">
<tr>
<th>Our store categories</th>
</tr>
<tr>
<td>
<ul>
<li><a href="URL_HERE">LINK_NAME</a></li>
<li><a href="URL_HERE">LINK_NAME</a></li>
<li><a href="URL_HERE">LINK_NAME</a></li>
<li><a href="URL_HERE">LINK_NAME</a></li>
</ul>
</td>
</tr>
<tr>
<th>RECENTLY_ADDED_CAT_NAME_HERE</th>
</tr>
<tr>
<td><!--RecentPosts limit=5&included_cats=**^**^**^**^**^**^**--></td>
</tr>
</table>
</td>
</tr>
</table>

<center>


WIDGET_HERE


</center>

Create a new Page in WordPress

Log into WordPress

Select "Pages"Add New" from the admin menu

This will bring up the new page dialogue.

Enter the name you want for your category showcase page

This should be the primary keyword for your category.

Copy the below text into the body of your new page

Click in the box below

Select "Edit" → "Select All" from the file menu

Select "Edit" → "Copy" from the file menu

Click in the body of your new page

Select "Edit" → "Paste" from the file menu

Set the page order and parent if wanted

Fill in Description and Keywords for Platinum SEO Pack if installed

Select Save Draft

Edit the page contents for your site

Edit CATERGORY BLURB

This should provide descriptive information about your category.

Edit REASON-AND-INCENTIVE-INFO

This should offer information on why buying from you is a good thing

Edit tag_str=***************

The *********** should be changed to a list of tags seperated by commas.

Posts with the tags listed here will automatically show up in the News and Resources box on the page.

For example, tag_str=books,fiction,adventure

Enter links to related store categories

These should be links directly to categories in your store.

Replace URL_HERE with the URL to your store category

Visit your store category in a different browser window or tab

Click in the box at the top where you see http://….

Select "Edit" → "Select All" from the file menu

Select "Edit" → "Copy" from the file menu

Back in your wordpress editor, delete the URL_HERE you want to replace

Place your cursor between the quotes after href=

Select "Edit" → "Paste" from the file menu

Replace LINK_NAME with the name you want for the link

This should be your primary keyword for the linked category.

Repeat for each category link you want to display

Remove any extra list item lines

To add more links copy a line and edit it.

Edit RECENTLY_ADDED_CAT_NAME_HERE

Something like "Newly added whatevers"

Set categories to have recent posts displayed for

Delete the **^**^**^**^**^**^** after included_cats=

Enter the IDs post categories you want to display here

Finding post category IDs

In a new window, go to your wordpress admin panel

Select "Posts" → "Categories" from the menu

Click the category you are interested in

In your browsers URL line, find cat_ID=#

That number is the ID for the category you selected.

Multiple IDs can be specified by seperating them with commas

Edit WIDGET-HERE

If you don’t want a widget, just delete everything after the last </table> tag

If you do want a widget:

Delete the WIDGET-HERE text

Copy a widget into the area it was in

See Bonanzle Widget Instructions

Select Save Draft

Select Preview to view your showcase

Make sure that everything looks ok

Test the links out to ensure they work

When you are satisfied that everything looks good, publish your new page.

Creating a Template for Future Category Showcases

Now that you have your first category showcase created, you might want to go ahead and create a template for it.

Read how to create templates for faster wordpress posting for full instructions on how to make a template for your category pages.

Note: As of WordPress 2.8, template creation is more difficult than it was because you can no longer edit templates with the plugin I use…but it still works just fine.

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.

Knowing what a themes root or main directory is can be helpful in knowing which directory to upload to your themes directory, where to place new files for the them to override default functionality, etc.

Theme root for themes already installed

For themes that are already installed in WordPress, the root directory is typically a directory with the name of the theme located in "wp-content/themes" on your server.

Theme root for extracted themes

Most people who write themes have the extracted folder as the root directory for the them. This should always be the case for themes downloaded from WordPress.

However, if you want to double-check, open the main directory for the extracted theme and see if there are files in it. If there are only directories (folders) in it, then look through them until you find a folder with the file "style.css" in it. That is your themes root directory…and the directory containing it is the one you want to upload to use the theme.

For example:
If you had downloaded a theme named "whatever" and extracted it, you probably created a "whatever" directory when you did so.

If the "whatever" folder has a style.css file in it, then you know to upload the "whatever" folder to "wp-content/themes" on your server.

If, however, the "whatever" folder only had another folder in it named "nevermind", you would open that folder. If it contained a "style.css" file, then you would upload the "nevermind" folder to "wp-content/themes" to get the theme to show up for selection in WordPress.