AutoFocus+
a child theme for Thematic

About AutoFocus+

In short, AutoFocus+ is a clean and simple WordPress theme developed for photographers looking to showcase their work. A slight departure from the original verision, AutoFocus+ takes things a bit further by providing stronger markup, better browser support, and Theme options that enable you to customize various elements of the theme without ever touching code. It’s also designed on an 800px, 8 column grid which truly allows your images to shine. This new version also boasts a sharper typographic approach with a 22px baseline grid, and a Garamond/Helvetica (Times/Arial for you PC users) font stack that’s much easier to read. I’ve also ported over the back-end to Thematic, one of (if not) the strongest WordPress theming frameworks to date. That means AutoFocus+ and Thematic come together to make for a pretty slick theme that can be used for almost any type of site.

Why ditch the original version? The original AutoFocus theme works fairly well but it has been really tough to develop and support. It was more-or-less a hacked version of Robert Ellis’s Aperio theme. Being more of a front end guy myself, maintaining and supporting a from-scratch theme proved to be a bit too much for me. Porting AutoFocus to Thematic allowed me to focus on UX and design, without racking my brain over syncing tons of template files. However, the switch doesn’t only benefit me. Child Themes almost always mean less code, which means making tweaks that aren’t provided through options should be much easier for most users. Check out the demo, and if you like what you see download it now. There’s also a pro version available for purchase, that comes with even more options and features — and it’s only $15⁰⁰! Check out the Pro demo.

Features

Features	Free	Pro
A strict grid based design mixed with clean typography and a baseline grid (screenshot).	✔	✔
A Theme Options page for easy customization of colors, post formating, etc (screenshot).	✔	✔
An optional Featured Posts section which pulls “sticky” posts and displays them front and center (screenshot).	✔	✔
5 widgetized sidebar areas (screenshot).	✔	✔
Support for Video and Gallery embedding and oEmbed (screenshot).	✔	✔
Optional EXIF data display (screenshot).	✔	✔
← Left and Right → arrow keyboard navigation short cuts.	✔	✔
Valid XHTML Markup with Microformats.	✔	✔
Browser proof CSS for Firefox, Safari, & Internet Explorer (including the dreaded IE6!).	✔	✔
Periodic error & bug fix updates.	✔	✔
Future feature improvements (additional templates, custom post types, HTML5, CSS3, etc.).	—	✔
An optional portfolio style layout with squared images (screenshot).	—	✔
A custom Blog style Page Template (screenshot).	—	✔
Custom Shortcode styling for displaying other types of content (screenshot).	—	✔
2 additional & optional ad-spaces for banners & widgets (screenshot).	—	✔
Add a custom logo option. (screenshot).	—	✔
A per-post sliding Gallery of attachments option. (screenshot).	—	✔

Download AutoFocus+ for Free.

Download Now

Version: 1.1
Updated for WP 3.0
File size: 356.0kb

Purchase AutoFocus+ Pro for only $15.00

Buy Now

Version: 1.3
Updated for WP 3.0
Buy safely and securely with PayPal.

Purchase Policy

Unfortunately, neither Feather Weight(fthrwght) or Allan Cole cannot offer refunds on any purchases due to the nature of the product being sold. Please review the demo and information below carefully before you purchase this theme.

Licensing

AutoFocus+ is Copyright © 2010 by Allan Cole. It is released under the GNU General Public License, version 2.0 just like WordPress.

Documentation

— Download PDF

Installation Instructions ( WordPress 2.9 or higher )

1. Download and extract the latest version of the Thematic Theme.
2. Upload the resulting /thematic/ folder to your WordPress /wp-content/themes/ directory.
3. Download and extract the AutoFocus+ or AutoFocus+ Pro Theme.
4. Using an FTP client, upload the resulting /autofocusplus/ or /autofocuspro/ folder to your WordPress /wp-content/themes/ directory.
   IMPORTANT! Only upload the /autofocusplus/ or /autofocuspro/ folder to your WordPress /wp-content/themes/ directory. For PC users, Leave out any /MACOSX/ folders that may appear.
5. Navigate to Appearance > Themes in the Backend and activate AutoFocus+ or AutoFocus+ Pro.
6. That’s it!

Upgrading

For users upgrading from any older version of AutoFocus, In order to give AutoFocus+ more flexibility, I needed to rework the overall functionality. The changes I’ve made make things easier across the board. At the same time, I can’t guarantee that everything will work exactly like how it did in the old versions — though I did leave in some scripts to help make the transition easier. Most modifications or customizations, done to the old version will mostly likely not work with this new version. Now that the coding is redone in a more streamlined way, I’m hoping that customizing will be much easier.

Usage

Adding Images

AutoFocus+ uses a 3 step process to determine which image it will use as the “Anchor Image.” The Anchor Image is what you see on the front page for each post and the main image on single posts.

1. Post Thumbnails: First, it checks to see if you have uploaded an image and selected it as a thumbnail using the new WordPress 2.9 Post Thumbnail Feature.
2. Latest Attached Image: Then, If there is no thumbnail attached, AutoFocus+, will check to see if any images are attached to the post. It then takes the last attached image, and uses that as the post thumbnail.
3. Post Content Image: Lastly, if there are no attachments, then AutoFocus+ will attempt to find an image in your post content and use that as the Post Thumbnail.

Obviously, selecting Post Thumbnails in Step 1 gives you the most control. Steps 2 and 3 are more for people coming from older versions of AutoFocus. It’s important to think of the Anchor Image as a separate piece of supportive content for you posts.

Image Sizes

Please make sure to always upload images that are least 800px wide to ensure proper formatting. AutoFocus+ & WordPress will then, automatically create three custom images sizes that lock into the AutoFocus+ grid. These sizes are automatically set when you activate AutoFocus+ for the first time. For your reference, here are the sizes:

1. Thumbnail: 88px × 88px (cropped).
2. Medium: 188px × 188px.
3. Large: 494px × 494px.

Please note that these settings only effect the images that you upload after you activate AutoFocus+. I strongly suggest installing the Regenerate Thumbnails plugin by Viper007Bond, which regenerates all the image sizes in your blog so that they fit the dimensions of the AutoFocus+ grid and display areas. Here’s some more information about image sizes in WordPress.

Adding Video & Adding Photo Credits

AutoFocus+ adds some additional posting features to the Post Edit screen of WordPress.

1. oEmbed URL: Use this form to embed YouTube, Vimeo, Flickr galleries and other Media types. Simply insert any oEmbed supported URL scheme and it will override the Anchor Image on single pages. More information.
   oEmbed Examples:
   • Vimeo: http://vimeo.com/7757262
   • Youtube: http://www.youtube.com/watch?v=vk1HvP7NO5w
   • Flickr Photo: http://www.flickr.com/photos/bking/3598750242/
   • Flickr Gallery: http://www.flickr.com/photos/bking/sets/72157603789468441/show/
   • Hulu: http://www.hulu.com/watch/20807/late-night-with-conan
   • Wikipedia: http://en.wikipedia.org/wiki/Life_on_Mars_(TV_series)
   • See More oEmbed Examples.
2. Photo Credit: By default the Photo Credit is set to show the post author’s Display name. Use this form to override the default with your own text.

Adding a Featured area

AutoFocus+ utilizes the new Sticky Post feature to determine which posts show up in the featured area. Check out Nathan Rice’s site to find out how to make a sticky post. — it’s really simple. Please note that If there are no Sticky Posts in your site, the featured area will not appear. If there is more than 1 Post marked as Sticky, AutoFocus will choose one Sticky Post to show in the featured area at random.
Note: The Pro version comes with an additional slider for the Featured/Sticky Posts area.

Short Cuts / Hot Keys

Use the Left(←) and Right(→) arrows to navigate forwards and backwards respectively through the front page, and any archives or single post pages. Give it a try.

Using the Blog Layout (Pro Version only)

To use the blog layout, simply create a New Page and select the Blog Template under the Attributes panel in the Edit Post admin (example). You will also need to select which Category, you would like to use for the Blog posts. That selected category will be excluded from the loop on the Home Page, so that you can manage the blog posts separately.

Adding a Sliding Gallery of Attachments (Pro Version only)

To use the sliding image attachement gallery feature, simply attach 2 or more images to a post and turn the option on under the AutoFocus+ Pro Post Options.

Shortcode Content Types (Pro Version only)

I’ve built in some additional styling which allows you to showcase other types of content and mix up the layout on a post-by-post basis. Check out this post to see some examples.

1. Pullquote: Adds a pull quote about the project with some additional styles.
2. Large Image Area: Adds a larger post image with a hovering description. Requires an image at least 800px wide.
3. Narrow Columns: Adds a narrow paragraph column which you can use to change the flow of text. Use 2 narrow columns together with left and right parameters to create a 2 column post area.

More details about using AutoFocus+ shortcodes can be found on the AutoFocus+ Instructions Panel conveniently located on every Post Edit screen of the backend. You may want to check out the WordPress codex on the subject as well.

Sidebars

There are five sidebars included with AutoFocus+. These sidebars can be edited under Appearance > Widgets in the admin. There are 4 sidebars located at the bottom of every page. The fifth sidebar will only show up on single Posts and Pages, under the Post Meta (example). Here’s a list of the available sidebar.

1. 1st Subsidiary Aside: Located just above the footer.
2. 2nd Subsidiary Aside: Located just above the footer.
3. 3rd Subsidiary Aside: Located just above the footer.
4. 4th Subsidiary Aside: Located just above the footer.
5. Single Page Sidebar: Located on Single Posts and Pages just below the meta data.
6. Leader Board Sidebar (Pro version only): Located just above the header.
7. Intro Sidebar (Pro version only): Located on the Front Page just below the header.

Theme Options

There are a number of Theme Options that allow you to add a personal touch to AutoFocus+. These options can be found at Appearance > AutoFocus+ Options in the back-end.

1. Background Color: Change the background and highlight colors by entering a HEX color number. (ie: FF6600)
2. Text Color: Change the color of reading text by entering a HEX color number here. (ie: 003333)
3. Link Color: Change the color of links and hovering colors by entering a HEX color number here. (ie: 003333)
4. Background Color: Change the background and highlight colors by entering a HEX color number here. (ie: FF6600)
5. Photo Background Color:  Change the background color of Portrait (narrow) images by entering a HEX color number here. (ie: FF6600.)
6. Show Post Titles: Add a check here to show Post Titles instead of Post Dates on the home page.
7. Show EXIF data: Add a check here to show the Exif data for your images on image attachment pages (WP Gallery Images only).
8. Portfolio Mode (Pro Version Only): Add a check here to switch to the Portfolio layout on the home page.
9. Blog Category (Pro Version Only): Select a post category to be shown in the Blog Template and excluded from the Front Page loop.
10. Custom Logo (Pro Version Only) Removed from v1.3: Add a check here to show a small logo next to the Blog Title. Replace the logo.png file found in the /img/ folder with your own custom logo. (Recommended logo size: 50px × 50px).
11. Hide blog title? (Pro Version Only) Removed from v1.3: Add a check here to hide the Blog Title and Description. Combining this option with the custom Logo will allow you to display a wider logo image in the header.
12. Show Post Dates (Pro Version Only): Add a check here to show the Posts Dates. With the Pro version in Portfolio Mode, it may not be ideal to show the post dates throughout the site. This option gives you control over that.

Add a Custom Logo (v1.3+)

To add a custom logo, navigate to Appearance > AutoFocus+ Options, and follow the on screen instructions to upload a custom logo/ header image or use the default. Please note that any text color you choose will be replaced by the colors set in the AF+ PRO options panel.

Customizing Theme Images

Favorite Icon Image

Create a 16x16px favicon image using one of the many free services available on the web. Then replace the autofocus/img/favicon.ico file with the icon you created.

Custom Logo (Pro version only) Removed in v1.3

The logo can be customized by replacing the /autofocuspro/img/logo.png file (for IE6 you will also have to replace the /autofocus/img/logo.gif file). Included with this theme is a Photoshop file that you can use as a basis for your own logo.

Caveats

• n/a.

Changelog (Pro version only)

Version 1.3 (7/22/2010)

• Added WordPress 3.0 Header script for custom logo ( add_custom_image_header(); ).
• Added Post/Page visual editor styles ( add_editor_style(); ).
• Added a separate enqueued stylesheet for the default layout when the slider is activated.
• Fixed the default layout overlapping bug when using the slider.
• Fixed gallery slider on single pages in webkit based browsers.
• Fixed category logic for Next & Previous post excerpts.
• Removed logo option from AF+ Pro Options Panel.
• Removed JS loads when in the admin.

Version 1.2 (5/20/2010)

• Fixed category includes/excludes for Next & Previous links.
• Fixed a bug where Blog category posts were showing in the home page.
• Fixed some jQuery errors for WP 3.0.
• Fixed date formatting on activation.
• Updated Enqueue Scripts for WP 3.0. (More info)

Version 1.1 (4/22/2010)

• Added an optional Sliding Featured(sticky) Posts area on home pages.
• Added sliding image attachment gallery option for single pages.
• Re-Coded Post Meta options.
• Fixed custom Post Meta import/export bug.

Version 1.0 (3/29/2010)

• Initial release

Other Information

Developed using the Thematic Theme Framework by Ian Stewart of ThemeShaper.com.

All sample images in the demos were used with permission from James Brandon King for wordbk.com. This guy’s work is incredible!

jQuery powers all the animated elements. For more info check out The jQuery Project. AutoFocus+ also uses the JS-Hotkeys jQuery plugin by Tzury Bar Yochay, the imgCenter jQuery plugin by Drew Wilson, and the jsColor Javascript Color Picker by Honza Odvarko.

Support

AutoFocus+ is distributed AS IS. fthrwght and Allan Cole will not be offering support or customization help through this site. Please make sure that you have followed all instructions down to the smallest detail and be sure you are using the latest version of WordPress.

Recommended Support

WPQuestions is a problem-solving community for WordPress, ideal for users seeking quick, succinct answers they can't find in any WordPress forums. I’d recommend running your most pressing AutoFocus+ questions by the experts at WPQuestions.com

The Themeshaper Support Forums is also a great place to find information about using and tweaking child themes within this framework. The WordPress Support Forums is another great resource for everything related to WP and theming — I am sure you will find answers to almost all of your questions using these three resources.

Get Satisfaction Support

My Get Satisfaction Support Page is a great space to discuss issues publicly amongst other users. Feel free to post questions of any kind here. I will only be responding to bug/error reports, but anyone is welcome to offer help and support.

That said, here’s my email if you’d like to get in touch with me. ;-)

Enjoy!