Introduction

So you’ve purchased a WooTheme and you are dying to get it up and running on your website?

To install a WooTheme, is not much different to installing any other (free) WordPress theme. Remember though, you’ll need to set up your theme options afterwards to have it functioning like our demos.

There are two ways to install a WooTheme on your website. Both methods are explained below in video tutorials, we however recommend doing it via the Wordpress backend.

Below is a quick overview of the Wordpress “Add New Themes” installation method:

1. Download your template file (wootheme_name.zip) from your WooThemes account.
2. Log into your WP admin panel and click on the “Appearance” tab. Now click on the “Add New Themes” tab.
3. Click on the “Upload” button, “Browse” for your zip folder you downloaded from our site to your computer and select “Open”.
4. Click the “Install Now” button.
5. Activate the theme from this page, OR “Return to Themes Page” and activate from there if you experience a problem. See screenshot of an activated theme.
6. REMEMBER to set up your theme option’s panel for it to display correctly. See example of theme option’s panel.
7. MAKE SURE your theme “cache” folder is CHMOD 777. View this tutorial for help.

Installing a WooTheme via the Wordpress Backend

Installing a WooTheme via an FTP program

Prior to Wordpress 2.8 this was the only way to upload and install Wordpress themes, but since then Wordpress have made the process much easier, documented above. Many users still prefer to install themes via FTP, as it offers more flexibility when modifying themes.

Installing a WooTheme from WooThemes on Vimeo.

Explaining the Theme Options

Below is a screenshot of the theme option’s panel included in this theme. The default settings used are what we have used in our demo.

Below is an image explaining what theme option’s control what sections of the home page. Please note widgetized zones Sidebar 1 and Sidebar 2 are available on all pages, not posts or archives.

How To

Setting up the blog

The idea behind Aperture was that it would be used by corporates to showcase their products, whilst also offering a blog that is not being displayed on the frontpage. Even though you will be able to add blog posts as normal, the blog requires a bit of setup first.

1. Go to Manage > Categories. Create a new category with name “Blog” and category slug “blog” (this can be different – just remember these, as we need it later). This first category is just a placeholder.
2. That means you need to now add your real categories (i.e. News, Announcements, New Products etc.) as sub-categories to your main category.
3. When adding posts, you would ideally only add posts to the sub-categories and not the main category itself. You would thus not need to select the main category when adding new posts, because it is automatically included once you have selected any sub-category.
4. Go to Aperture Options. Enter the category slug i.e. /category/blog/ (where “blog” is the slug you entered in step 1) in the “Blog Permalink” field.
5. Select the “Add Blog Link to Main Navigation” option to add the blog link to the main navigation section on your template.
6. All of your posts will now be displayed on the Blog page, as well as the news section of the homepage.

Note: You may find this tutorial helpful to find page / category ID’s & slugs.

Adding Images To Posts (Using the Image Resizer)

Background Information

Many of the different template pages within Aperture, uses an embedded image within a post when displaying the post to the user. This means that you need to add a custom image to a post should you wish to display the image with the post. If you decline to add an image to a post, it will not be displayed and won’t disrupt the theme in any way.

Our themes use a custom image resizing script (thumb.php) which will dynamically resize, crop & create an image in the appropriate size needed for the template.

Instructions:

Screenshot 4: Aperture Custom Settings.

1. On your Write > Post tab, complete all of the standard fields when adding a new post.
2. Now scroll down to the “Aperture Custom Settings” panel (just below your Post Revisions). Click on the “Browse” button to find the image you want to your use on your local computer. Once you’ve found it click “Save” and the url will automatically be inserted.
3. Save your post and voila!

Video Guide – Installation and basic setup

The Aperture Theme Installation Guide from WooThemes on Vimeo.

Widgets

Custom Aperture Widgets

Aperture includes a bunch of different widgetized spaces, along with custom, Aperture-specific widgets to allow you more customisation options than ever before. Here’s a brief run-down of both the widget areas and custom widgets:

Widgetized Spaces

There are 6 different widgetized spaces throughout the Aperture template:

• Sidebar 1 (displayed on inner pages; middle column);
• Sidebar 2 (displayed on inner pages; right column); and
• Footer 1 – 4 (displayed in the four columns in the footer).

Note: You will need to go to Design > Widgets to add any widgets to these spaces. By default the theme will not display anything in these spaces, until you add your own widgets.

The image below helps explain the widgetized footer zones.

Custom widgets

The theme includes 5 custom widgets that you can add to your widgetized area:

• Woo – Popular Posts;
• Woo – Recent Posts;
• Woo – Recent Blog Posts;
• Woo – Search;
• Woo – Feedburner Subscription;
• Woo – Twitter*; and
• Woo – Flickr*.

* denotes that there are options inside the widget that you may need to set for it to operate properly

Setting up widgets in a WooTheme

Widgets are hugely powerful optional modular blocks of content or functionality that you can place on your WooThemes powered, Wordpress website. This tutorial shows you how to set up widgets to further enhance your website’s appearance.

Page Templates

Custom Page Templates

This theme comes bundled with unique page templates for some additional functionality to your WooThemes powered website. Below is a list of some of the page templates available across our themes. Please note they are not all bundled with all our themes.

• Archives (template-archives.php) - Displays all categories, monthly archives, popular tags and the 30 latest posts
• Sitemap (template-sitemap.php) - An alternative to some WordPress plugins out there, this page template will create a sitemap, which you can use for SEO & user-usability purposes.
• Full Width (template-fullwidth.php) - A full width page template without the sidebar.
• Redirect (template-redirect.php) - Is a nifty page template used to “fool” Wordpress into creating a menu item in your page navigation, which is in fact a link to an external site. Simply follow the steps mentioned below under “Adding an external url to your page navigation menu”
• Image Gallery (template-imagegallery.php) * - Displays the images you have associated with your posts in an image gallery, linking back to the original article
• Contact Form (template-contact.php)* - A page with a contact form on it so that a web visitor can email you. Please note you will have to add your email address to the theme option’s panel of the theme to make sure it is set up correctly.

* This page template isn’t included in all themes

Setting Up Page Templates

If you still need some guidance after this video tutorial then follow the steps below:

1. Go to Write > Page in the WP admin panel.
2. Simply fill in the page title, which can be anything, and then ignore the page body content.
3. Scroll down to the “Templates” field in the “Attributes” box and select the page template you’d like to use.
4. And publish!

Adding an external url to your page navigation menu

1. Create a new page in WordPress
2. Add a title to the page (e.g. WooThemes)
3. Add an URL to the content of the page (e.g. http://www.woothemes.com OR woothemes.com OR www.woothemes.com)
4. Add the “Redirect” page template to the page (using the method described in the video tutorial above)
5. Publish! Your menu item will now be in your page navigation and link to an external site.

SEO

Getting started

WooSEO (SEO standing for Search Engine Optimization) will give you an immediate edge over your competition. This out of the box functionality will have your site optimized for Google, and other search engine results with a few clicks, helping you climb the rankings for keywords you want to be registered under.

SEO is by no means an easy skill to master, but getting the basics right is a great start to getting healthy traffic to your website.

Using 3rd party data

When using the Woothemes SEO functionality most users will prefer to disable any other 3rd party SEO plugins that they might have been using beforehand. In an effort to salvage any data previously added to posts with these plugins, this setting will enable WooSEO to use that data and make switching over easy and effortless.

Please note that the only supported plugins at this stage are the “All-in-One SEO” and “Headspace 2” plugins. All data is extracted from post custom fields and does not take preference over data added to WooSEO custom fields.

Page Titles

What are page titles?

This section controls the Page titles () of your theme.

Separator - This is what will appear between selected parts of your title segments.

Blog title & Blog Description - Also found in the Theme settings pages, you can quickly update your blogs main title and it’s description for use all over you site.

Use woo_title() - Recommended. Give yourself more control with the woo_title function. Enable this option to uncover a range of new options to modify your page titles.

Disable Custom Titles - This option voids any previously added custom page titles, and only uses the woo_title() basic output, ensuring that your page titles are uniform and predictable across your site.

Paged Variable - When browsing your site, this variable will appear when you page throughout your archives. Classically this comes into play when viewing older posts on a page and you get “Page 2″ of the browsing results. This variable lets you customize the word that gets used in the Pagination process.

Paged Variable Position - Choose to have the paging variable to appear before, or after the generated page title.

Homepage, Single, Page & Archive Title Layout - Select from the options available how you want to have your page title’s formatted when displaying on various templates and archives.

Meta

What is meta?

Meta information on your site helps search engines crawl and index your site. It also helps with adding value to your pages, resulting in better rankings in search engines. Typical meta tags for example, gets added to the head of your site serving many kinds of purposes.

Indexing Meta

Archive Indexing - Any WordPress site can have several archives to find/categorize posts. Be it by category, date, tags, search, etc. and all get indexed by search engines. This can create issues as search engines are forced to index pages containing the same data, thus diluting the overall value of keywords.

By default we have set the Archive indexing to the “category archives” so to focus in on more valuable sections of your site, in the words telling search engines only to index the selected archives.

Making Robots Follow

By default single.php and page.php pages do not let search engines follow any outbound links from the these, “Singular” types of pages, thus letting them focus in on your content, and not somebody else’s. If you did want search engines to follow links from singular pages, this option will let you do that.

Description Meta

Homepage Description

Off - Have no meta description for your homepage.

From WP Site Description - Add your site’s description (also used in page titles) to the homepage description

From Custom Homepage Description - Add a description (text area found below) to your site’s homepage meta description.

Single Post/Page Description

Off - Have no meta description for your post/page.

From Custom Field and/or Plugins - Add custom descriptions to posts and pages from the fields given in the edit backend. This option will also extract data from posts added via plugins.

When a post has been created previously with data from 3rd party plugins, this option will extract the data and use it when available.

Automatically from Post/Page Content - Choose to generate descriptions from the content already available on in the post or page. It will use content from the first segment of your content.

Keyword Meta

Homepage Keywords

Off - Have no meta keywords on your homepage.

From custom Homepage Keywords - This will add keywords (from the texture below) into you homepage keywords meta.

Single Post/Page Keywords

Off - Have no keywords on Posts or Pages.

From Custom Field and/or Plugins - Add custom descriptions to posts and pages from the fields given in the edit backend. This option will also extract data from post added via plugins.
When a post has been created previously with data from 3rd party plugins, this option will extract the data and use it when available.

Automatically from Post Tags & Categories - Generate keywords automatically from the current posts Tags and Categories. (Posts Only)

Changelog

• theme-widgets.php - Fixed Twitter widget title bug

• /styles/.css - Fixed Gravity form styling bug

• header.php - Added theme support for WordPress 3.0 Menu Management
• /includes/theme-functions.php - Added theme support for WordPress 3.0 Menu Management
• style.css - Added classes for trackback and pingbacks on the .comment class
• comments.php - Added variable for pings at the top of the loop.

• /styles/.css - Added styling for Gravity forms

• includes/theme-options.php - Added show image in RSS feed option

• header.php - added support for WooNav

• /functions/ - MAJOR UPDATE - Framework V.2.7.0
• header.php - Added SEO tags, woo_title(); & woo_meta();
• functions.php - Changed layout for loading required files.

• index.php - fixed thumb.php to woo_image function (line 34)

• includes/theme-options.php - Added option to specify featured slider category
• includes/featured.php - added featured category to query

• includes/featured.php - Fixed bloginfo to use template_directory so child theme works
• header.php - Fixed bloginfo to use template_directory so child theme works

• includes/theme-options.php - Added option to disable single post image
• single.php - added option (line 35)

• header.php - fixed php error on line 46

• /functions/ - Framework upgrade to 108

• includes/theme-widgets.php - Recent Posts widget, now setting the amount of posts works.

• /functions/ - Core framework upgrade to V.1.0.7
• /lang/aperture.po - Added language file. See: http://www.woothemes.com/2009/08/how-to-translate-a-theme/
• Added gettext functions to template php files to support localization.

• includes/theme-options.php - Fixed typo. 300px not 220px.

• /functions/ - Core framework upgrade to V.1.0.6
• header.php - fixed IE6 pngfix include (line 24)
• includes/js/pngfix.js - added IE6 pngfix
• includes/js/superfish - added superfish to dropdowns
• includes/theme-js.php

• /functions/ - Core framework upgrade to V.1.0.5

• /functions/ - Core framework upgrade to V.1.0.4a

• /functions/ - Core framework upgrade to V.1.0.4
• /includes/theme-options.php - Added Custom CSS backend option
• /includes/theme-functions.php - Removed duplicate get_page_id() function

• /functions/ - Core Update (V.1.0.3)
• /includes/theme-widgets.php - Flickr Widget Fix
• /ie.css - Added hacks for flick and latest blog boxes

• archive.php - Fixed archive leaderboard ad enable/disable feature

• /functions/ - Core functions upgrade
• footer-home.php - Added $force = true to homepage, and added preset div for pageload bug as a backup.

• /functions/ - Core functions upgrade
• index.php

• /ads/ - Added ad management facility
• style.css - Advert styling added
• index.php - Added optional leaderboard ad below featured slider
• includes/theme-options.php - Added the advertising theme options
• includes/widgets.php - Added widgetized ad space
• header.php - Added optional top banner ad in replace of category dropdown menu
• archive.php - Added optional leaderboard ad on archive page

• /functions/ - Core Update
• /includes/theme-options.php - Globals bug

• /includes/theme-options.php - Added Category Box Images
• /index.php - Implementation of category Box Images

• footer.php - removed duplicate google analytics line

• /includes/js/scripts.js - Removed redundant script

• /functions/admin-custom.php - Core update
• /functions/admin-functions.php - Core Update

• /functions/ - Core Update
• /theme-options.php
• single.php - added nulling values

• /functions/ - Core Update (get_categories bug)
• /includes/theme-options.php - Function nesting and init add_action
• index.php - get_categories() argument update

• /functions/ - Core Update (auto save bug)

• /functions/ - Core Update
• /includes/theme-functions.php - Checkbox fix
• /includes/js/scripts.js - Update
• /header.php - checkbox fix

• /functions/ - Core Update
• /includes/theme-options.php - New copy and added favicon option

• /functions/ - Theme core update (quick edit bug)
• /includes/js/scripts.js - Added stop() to image opacity animations
• /includes/theme-widgets.php - Fixed Subscribe Widget bug
• /includes/theme-options.php - New copy and adjusted template order, and added new default on style changer and dynamic images
• /single.php - Tweaked the woo_get_image to compensate for portrait images

• /functions/admin-functions.php - Corrected the WooAutoImg linking to the attachment permalink.
• /includes/theme-options.php - Added subheading for Dynamic Images and removed Layout Settings heading.

• /functions/admin-custom.php - Upload destination and empty $_POST fixes /functions/admin-funcions.php - Modified Woo_get_image()
• /functions/admin-interface.php - more settings with folder creation & error catching
• /includes/featured.php - removed links tags
• /includes/them-js.php - added is_home() to script loading
• /includes/theme-options.php - custom logo now an upload
• archives.php - Loop fix
• index.php - Edit on get_categories drop down

• /functions/ - Updated entire folder
• functions.php - Normalized to defualt WooThemes framework
• /includes/widget-init.php - changed to sidebar-init.php
• /includes/theme-options.php - Amended new Woo Auto Img functionality
• /includes/theme-comments.php - Not used, but more framework normilization.

• functions and includes folder file structure changes and updates
• custom.php - renamed to admin-custom.php
• functions/admin-interface.php - revert back to old upload scymatics, added javascript try and catch on page specific elements (”show” bug)
• includes/theme-options.php - Amended woo custom box
• includes/js/pngfix.js - removed (ie “expected” bug)
• includes/js/DD_belatedPNG_0.0.7a-min.js.js - added as png management
• header.php - added png managemant references
• functions.php - correcterd file name references
• style.css - added display styles to image .thumbnail class

• includes/theme-options.php - Removed duplicated blog permalink field
• archive.php, search.php, template-blog.php - pagination fix
• style.css - added styling for pagenavi plugin (under pagination comment)

• includes/featured.php - Fixed subscribe button linkage
• style.css - class added .rss_subscribe
• index.php - Converted category link argument to string

so what you waiting for Lets Go!!!

Now to the artwork…
I had the main image bookmarked for a long time.. Its from a good friend of mine Jeremiah (upheaval on istock)
Its a great pic and I was excited as it will work well and really help soften the ruggedness of the design.
I was also excited to introduce some morocan and islamic mosaic tile design into the design and is something im sure your going to see in more of my designs.

I’m also putting together a tutorial over at TUT candy on how to create this design for yourself…

check some of the progess of the design below

Now for the job… Mika contacted me as he had seen a fair bit of my work around the place so he already had a pretty good idea of what he wanted but I was basically given free rain and was basically busting with ideas and was excited to get started… I was really happy with round 1 of my illustration but instructions were to add in a previously designed character from the logo to the center of the design, the big problem is my style didnt match so I needed to put a fair bit of love into the previous illustration to have it tie into my design I also needed to give the previous illustration legs… and if theres anything im more suckier at drawing its gotta be legs closely behind hands hahahahaa

anyway i think in the end it all come together well… I still like my original design better but thats maybe because its 100% me but regardless I think its gonna pop out of the magazine so im happy.

check out the evoloution

Heres a couple of versions along the way so you can see the development…

So getting to the point once a year a Battle Royale competition is held to find out who is king (or queen) of the cage not only for the recognition but the winner recieves $5000 cold hard US dollars…

Unfortunately for me I cant compete but for you theres not many design related competitions that come close so make sure you go and enter.
The good thing is I still get to flex my design skills in the competition designing the header you see above and soon to be reveled seed photoshop files.

Heres the link to more details over at iStockphoto

and if you have any questions please drop a comment below

Anyway jump over to TUTcandy.com and please leave me some feedback… be brutal as I really want to know what I have to improve on.

A light weight phase 1 of the site is up but there’s still a long road ahead of the doors dot com, part of the tactic by the management company was to make the site in phases which is smart for a few reasons the site has a lot of traffic so keeping the site fresh with new additions creates further traffic and allows the site to grow organically rather then pre-empting where to focus their energy.

Client: Doors Management Co.
Agency: Simple Season

So check out the site thedoors.com

The massive problem with this site was there was pretty much no source content, I had 1 small web size picture and that pretty much was it.
Luckily we had video and from an early stage I knew the video was going to have to play a big part in the design of the site. Half way through the build John from SimpleSeason the agency I was working with on the project decided we need to create some fresh new content and commissioned up and coming artist Jeff McMillan to paint a bad ass picture of Tyson featured on the home page.

The site ended up being quite nice in the end, but some features were trimmed from the final build due to time constraints.

Client: Tyson Management Co.
Agency: Simple Season

Also had the privileged to do some design for the trailer for Tyson’s new film which should be released very soon

here’s some screen shots (click to enlarge) and make sure you check out the site officialmiketyson.com

I really enjoy illustrating in this style but very rarely get to do it, I hope to make some more stock images in this style over the coming months and really solidify and define the style to take it to the next level.

Illustration made in CorelDraw and Illustrator

click image to see full size version