WooThemes: Aperture Help: The Missing Manual

If you’re using WooThemes, you know the value they provide. If you’re using the Aperture theme, then you know how complex it is. I was recently working with some clients who are employing the Aperture theme and created a solid outline for how to setup this theme.

I call this post “Aperture: The Missing Manual.” If you follow these instructions, note for note, you will understand the Aperture theme in and out. Good Luck!

BTW: My clients are using Aperture as a storefront site. Very creative use of this remarkably complex theme.

THE WOOTHEMES DOCUMENTATION:

NOTE: To my eye, images sized 700×700 pixels work best with the WooThemes “dynamic image resizer.”

NOTE: Some of these instructions require copy and paste maneuvers. I suggest keeping a text editor application open, e.g., Word, Text Editor, WordPad, etc., and use it to record the data you’ll be copying and pasting.

NOTE: For browser optimization, you might want to create a separate set of images for your Category images. Make them about 400 pixels wide. This isn’t necessary. The 700 pixel wide images will work fine, but the 400s will display a little quicker.

NOTE: In the steps below, I recommend uploading each image individually, so that you can add metadata to each one. I’ve recently learned that you can upload multiple images by shift-clicking or control-clicking them at upload. I did this the other day to like 44 images – and it went off without a hitch.

Setup your Categories:

1. Go to: Posts>Categories. Name them appropriately and be sure to save.
2. Categories are our first point of entry, i.e., the boxes beneath the feature slider.
   1. When a user clicks on a box, a page will display containing images and excerpts of all the posts inside that Category.
3. You can create as many Categories as you’d like – don’t worry about the homepage display or layout (see next step).

Setup your Category boxes on the Homepage:

NOTE: Categories won’t display until you add posts to them.

1. Go to: Aperture>Theme Options, scroll down to “Homepage Category Boxes to Exclude.”
   1. This section displays every Category you created.
2. Check the boxes of each Category you wish to exclude from the Homepage boxes.
   1. NOTE: The “Select a category” dropdown-list-box on the right-side of the header will still display the Category.
      1. I don’t know if you want to keep this or not. I didn’t include it in the Photoshop draft. We can change it to read “Product Categories” or something else, but it needs to be about two words in length.

Setup the Category images.

NOTE: Complete the steps below sequentially, i.e., complete them for each Category image:

1. Upload the image that you want to represent a Category.
   1. Go to: Media>Add New
      1. The upload process is similar to attaching an image to an email: you’ll click the “Select Files” button, then locate the image on your PC and upload it.
   2. Complete the file information fields with the appropriate data.
      1. NOTE: This data doesn’t pertain to the Category, but to the image itself, i.e., it isn’t important to write something like “Soap category” in the description field; just write something about the image, not the Category.
   3. Highlight and copy the text in the “File URL” field.
2. Attach the image to the appropriate Category.
   1. Go to: Aperture>Theme Options, scroll down to the “Homepage Category Box Image” section.
   2. Paste the File URL into the field underneath the “Browse” button.
   3. Click the “Save Changes” button.
      1. NOTE: When you do this step, you will notice that you could have just uploaded the image from the “Homepage Category Box Image” section, i.e., you didn’t really have to do all the stuff in step one above. Personally, I think the method described above is better because it prompts you to add the appropriate meta data for that image. So if you use it for Post image later on, the meta data will already be completed.
3. Repeat steps one and two for each category image.

Add a Post for each Category.

NOTE: Use the steps below for adding all of your Posts, but for right now let’s just get at least one Post in each Category.

NOTE: All Posts added after the Feature Slider is setup (see next section) must have their Publish Date post-dated.

1. Upload the Post Image.
   1. See step one in the “Setup the Category Images” directions above.
2. Go to: Posts>Add New.
   1. Enter the appropriate data in the title and text fields.
      1. The text should include a link to your merchant site.
   2. Add Tags in the “Post Tags” section.
      1. Separate each Tag with a comma, i.e., tag1,tag2,.
         1. Do not put spaces between the comma and the Tag.
      2. Search engines use Tags to index pages. Tags should be descriptive of the Post. For example, if the Post is for a fancy soap that uses milk and honey in the ingredients, examples of appropriate Tags would be: soap,fancy,custom,natural,milk,honey,all,online,order.
      3. When you create Tags they are stored in the database, so that you can use them for other posts. After a Tag has been saved, you will have the option of selecting it on other Posts.
   3. Enter a descriptive sentence or two in the “Excerpt” section.
      1. The Excerpt text is what will display below the Post Image on the Category page.
   4. Select the appropriate Category in the Category section on the right.
   5. Scroll-down to the “Discussion” section.
      1. Uncheck the “Allow comments on this post” option (unless you would like to offer users the ability to add a Comment)
         1. You will administrate Comments via your email. Every time a Comment is added, you will receive an email asking you to Approve it.
   6. Scroll-down to the “Aperture Custom Settings.”
      1. Paste the Post Image URL in the “Image” field.
   7. Scroll up and click the “Save Draft” button.
   8. Click the “Preview” button.
3. If you are happy with the Post, click the “Publish” button.
4. Repeat these steps for each Category until you have added a Post to every Category.

Setup the feature slider

The Feature Slider is a little tricky. Basically, it displays a set number of Posts in chronological order. In order to control which Posts display, you need to change the dates of the desired Posts so that they are chronologically ordered in the proper sequence.

IMPORTANT: Because of this chronology issue, you will have to post-date Posts created after the Feature Slider is setup.

1. Go to: Aperture>Theme Options.
   1. Scroll-down to the “Home Page Options” section.
2. Select how many Posts you’d like to display in the Feature Slider.
   1. Use the dropdown-list-box to select the number of Posts to display.
3. Change the Publish Date of your Posts so that the desired Posts display in the desired sequence.
   1. Go to: Posts>Edit
   2. Review your Posts and decide which ones should display in the Feature Slider and determine their order.
   3. Hover-over the first Post, i.e., the one you want to display first, and click the “Edit” link.
   4. Click the third “Edit” link in “Publish” section on the right, i.e., the line that reads, “Published on: Month Day, Year @ HH:MM Edit.”
   5. Change the Hour and Minutes to be ten minutes in the future from the current time, i.e., the time on your watch at this moment, not the original Published Date.
   6. Click the Update Post button.
   7. Repeat steps a-f for the other Feature Slider Posts, but use the same Hours and Minutes that you used in step e above AND subtract one Minute from each consecutive Post such that the final Post is the oldest Post.
4. Wait until your future time has elapsed and test.

Setup the About Module

This is the small black box that appears on the right of the Feature Slider.

1. Upload the About Image.
   1. See step one in the “Setup the Category Images” directions above.
2. Go to: Aperture>Theme Options.
   1. Scroll-down to the “Home Page Options” section.
3. Enter the heading text you want to display in the box in the “About Title” field.
4. Scroll down just a little to the “About Photo” field. Paste the URL of the About Image in the “About Photo” field.
5. If you want the “About Module” to link to a page, enter the URL of the page in the “Read More Button URL” field.
6. If you want to change the text in the “Read More” button, type the text in the “Read More Button Text” field.