Introduction

Introduction
So you’ve purchased a WooTheme and you are dying to get it up and running on your
website?
First off we are presuming you have installed and configured your WordPress
installation, if not we have a tutorial guiding you through the installation of WordPress
on your domain. Further detailed information can be found on the WordPress.org site.
Now that’s out the way, let’s get started.
Installing a WooTheme
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 tutorial, 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.
The below video tutorial shows you how to install a WooTheme using two different
methods – via the WordPress backend theme installer OR via FTP (which gives you
better control over the theme files and customizing them).
How To
Important: Please have a thorough read through the WooCommerce Codex and
familiarise yourself with using the plugin and it’s various features. It will stand you in
good stead when setting up your theme.
Setting up the homepage
After activating Boutique you will no doubt notice that your homepage looks a little
bleak. This section explains how to populate your homepage with content.
The introductory text will either pull in your latest post or from a specified page within
WordPress (this is what we’d recommend). To set that up simply create a new page (for
example; “home”) and set that to be your static homepage within the WordPress reading
settings.
The Boutique homepage slider pulls in products which have been set to ‘featured’ within
WooCommerce. If you’re not keen on the slider you can replace it with a static grid of
products by navigating to the ‘Homepage Settings’ tab without the Boutique custom
options.
Don’t forget to create a page specifically for displaying your posts too (e.g. ‘blog’).
Recent Products
There is no configuration to be done in this section. Recent products will appear
automatically as soon as you begin populating your WooCommerce catalog.
Configure the colour scheme
There are various aspects of the Boutique colour scheme which you can modify to match
your corporate colours. The main background colour, navigation and footer can all be set
within the ‘Styling Options’ tab inside the Boutique theme options.
The main background colour can be altered via the colour picker. By default the
navigation and footer will be set to black with a 10% opacity which will suit many block
colours (IE the navigation / footer will simply appear a slightly darker hue of your chosen
background colour).
If however you set a background image (which can also be done in this tab) you may
need to change the opacity of the menu / footer to ensure legibility. This is easily done by
inserting a value between 0 and 1 into the ‘Menu / Footer Opacity’ option. As an
example, entering ’0.5′ here would result in a 50% opaque black menu / footer.
There is also an option to modify the strength of the container box shadow. This works in
much the same was as the menu / footer opacity. 0 will result in no box shadow while 1
will result in a very strong box shadow.
You can also specify a different link colour here to match your chosen colour scheme.
Widgets
Custom Boutique widgets
The theme includes custom widgets that you can add to any of your widgetized regions.
Go to Apperance > Widgets to add these to your theme.
The custom woo widgets included are:
•
•
•
•
•
•
•
•
•
•
•
•
Woo – Get in Touch
Woo – Feedback
Woo – Contact Information
Woo – Archives
Woo – Adspace
Woo – Search
Woo – Tabs
Woo – Twitter Stream
Woo – Flickr
Woo – Blog Author Info
Woo – Embed/Video
Woo – Subscribe/Connect
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.
View more of our WordPress101 video tutorials, as well as other video tutorials here.
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.
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!
Sidebar Manager
SBM Overview
The Sidebar Manager (SBM) enables you to create a unique sidebar — or widgetized
area — for specific pages of your site. You can now customize each page with specific
content and widgets that are relative to the content on that page.
In fact, the Sidebar Manager enables you to create new widget areas for use on specific
pages, page templates, and archives throughout your theme.
More information on the Sidebar Manager can be found in the WooCodex.
Menus
WordPress Menus and how to use them
All our WooThemes work seamlessly with the WordPress 3.0 addition of “menus”.
Thanks to WordPress menus, which was originally built by WooThemes and named
WooNav before being committed to core, you can add any page, category, or link item to
your navigation menu (overwriting what usually might have been a category only or page
only navigation).
Where to build your navigational menus
To build your own menu simply navigate to Appearance > Menus in your WordPress
backend, create your menu and choose which custom menu to associate it with, or you
can use widgets to put custom menus in a widgetized area of the theme.
The WordPress menus functionality is well documented on the WordPress codex –
http://codex.wordpress.org/Appearance_Menus_SubPanel
Adding drop down menus with WordPress Menus
Once an item is added to a menu, those menu items can be rearranged. Placing the mouse
cursor over the menu item title, when the mouse cursor changes to 4-arrows, hold the
left-mouse button down, drag the module to where you want to place it, then release the
mouse button (this is called drag-and-drop).
You can drag a menu item slightly to the right of the menu item above it to create a
hierarchy (parent/child) relationship in the menu.
Shortcodes
Introduction
Included in the WooFramework are some custom shortcodes that you can use in all our
themes. Shortcodes make it simple to insert elements like buttons, boxes, columns etc.
without any knowledge how to code HTML. Shortcodes work in posts, pages and even
widgets. For extensive overview on all available shortcodes and usage you can check the
WooCodex Shortcodes page.
How to use Shortcodes
The Shortcode Generator functionality adds a button to the WYSIWYG post/page editor
in your WordPress back-end, which allows you to access all of the WooFramework’s
shortcodes in a one-click fashion. You can then tweak the attributes and settings for the
various shortcodes and drop them into your post. Quick and easy. Instead of having to
type out the shortcodes in your post – like you had to do in the past – you can now tweak
them live and even see a preview in real-time, before adding them to your content.
Magic.
The Woo Shortcodes Icon in the WYSIWYG page/post editor
The shortcodes allow for further diversity and aesthetics to your actual blog post and
page layouts.
SEO
Video overview
Overwhelmed by SEO? It can be a complicated topic, but it is all important. Make sure
your WooThemes powered website is optimized for search engines following this
comprehensive video tutorial.
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 – If you leave this option deselected, the custom title field on a
post will generate the title, i.e. your blog’s main title will not appear unless you enter it in
the custom field along with your post title. Select this option and the title is based on the
parameters you select below, i.e. Page Title | Blog Title.
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 SEO settings panel on your post/page admin. 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
WooFramework version: 5.3.7 (Changelog)What's this?
2012.04.17 - version 1.3.1
•
template-sale.php preparation for WooCommerce 1.5.4
2012.03.29 - version 1.3
•
•
•
•
•
•
•
•
header.php
includes/theme-woocommerce.php - html5 shim now hooked into wp_head
header.php
includes/theme-woocommerce.php - added woo_nav_before() action and hooked
search into it
header.php
includes/theme-woocommerce.php- added woo_nav_after() action and hooked
cart / checkout buttons into it
header.php - added woo_content_before() hook
footer.php - added woo_content_after() hook
2012.03.01 - version 1.2.2
•
style.css improved error message style when containing a list
2012.02.20 - version 1.2.1
•
/includes/theme-woocommerce.php - Update search fragment to use & instead of
?, in accordance with WooFramework update (requires WooFramework V5.1.3 or
higher).
2012.02.01 - version 1.2
•
•
•
•
index.php WooCommerce 1.4 preparation; replaced depreciated classes and
updated custom field IDs
header.php
search.php
includes/theme-options.php added option to make header search products or posts
2011.12.28 - version 1.1.5
•
includes/widgets/widget-woo-flickr.php - fixed flickr widget
2011.12.15 - version 1.1.4
•
REVERTED
2011.12.09 - version 1.1.3
•
template-sale.php added sale template
2011.11.24 - version 1.1.2
•
•
template-blog.php - Call remove_filter() to make sure the homepage posts
exclusion doesn't run on the "Blog" page template.
index.php - Removed filter on posts query arguments (filter is intended for the
"Blog" page template only). Resolved "undefined variable" warning messages on
non-existent $settings variable.
2011.11.21 - version 1.1.1
•
includes/theme-woocommerce.php fixed pagination bug
2011.11.17 - version 1.1
•
index.php fixed the loop on the homepage to cater for excluded categories
2011.11.03 - version 1.0.9
•
includes/theme-options.php changed homepage content description to avoid
confusion
2011.11.02 - version 1.0.8
•
archive.php added descriptions for categories and titles for taxonomies
2011.10.27 - version 1.0.7
•
•
•
•
style.css - adjusted #footer-widgets.col-4 .block margin
includes/sidebar-init.php - Added 4th sidebar widget
includes/theme-options.php - Added 4th sidebar widget
single.php - set video width to 500
2011.10.24 - version 1.0.6
•
•
•
•
includes/theme-woocommerce.php hooked WC sidebar differently for easier
removal
style.css small fix to the featured slider when not using hard crop
style.css fixed alignment of post image
includes/theme-woocomerce.php added search fragment for search pagination
2011.10.16 - version 1.0.5
•
•
style.css z-index fix re nav / sale flashes
includes/theme-woocommerce.php remove WC sidebar
2011.10.12 - version 1.0.4
•
index.php php class fix
2011.10.07 - version 1.0.3
•
•
•
includes/theme-options.php changed inputs to selects on menu / footer / shadow
opacity option. Also added custom typography options
includes/theme-actions.php added custom typography options
includes/theme-woocommerce.php moved google font declaration to
includes/theme-actions.php
2011.10.06 - version 1.0.2
•
•
•
style.css fixed a bug in header display in FireFox 7.
includes/theme-options.php adding product post type to Woo SEO panel
style.css added form-row-wide class
2011.10.03 - version 1.0.1
•
•
•
•
style.css fixed selects within tables displaying strangely in IE8.
style.css Made the quantity incrementer friendlier to 2 and 3 digit numbers.
includes/js/general.js removed uniform from checkboxes to fix contact form bug
added includes/theme-install.php for defining options on theme activation and
moved image option updates here