Stitched

Important: This theme was retired in October 2015 and is not for sale. Documentation is no longer being updated.

The Stitched theme includes a Business page template with WooSlider support, as well as support for our Projects, Our Team, Features and Testimonials, Sensei and WooCommerce plugin.

Stitched Theme Demo: demo.woothemes.com/stitched

Installation ↑ Back to top

To learn how to install your theme please reference our documentation here: Installing a Theme

Checking your theme version ↑ Back to top

You can confirm your theme and WooFramework version by going to: Stitched > Framework

Activate your Theme Key ↑ Back to top

After you install your theme, be sure to activate your theme key by downloading and installing the WooCommerce Helper plugin. This will verify your site when contacting support and will enable 2-click updates for quick theme upgrades down the road.

Updating your theme

It is very important to ensure you have the latest version of your theme at all times. This is the best way to proactively troubleshoot issues on your site.

Please reference the WooCommerce Helper Documentation to learn more.

Adding your Logo ↑ Back to top

You have two options when adding a logo to your site. You can either use a text based Site Title and optional Tagline or you can use an image based logo as shown in the demo.

To upload your own image based logo:

  1. Go to: Stitched > Settings > General Settings > Custom Logo.
  2. Upload your logo image – we recommend using either a .jpg or .png for this.
  3. Save All Changes.

If you don’t have an image based logo, you have the option to add your Site Title and Tagline, you will find the settings for this just below the logo image upload area.

To enable the text based Site Title:

  1. Go to: Settings > General to enter your site title.
  2. Go to: Stitched > Settings > General Settings and check the box to enable the text based site title .
  3. Optionally adjust the typography settings.
  4. Save All Changes.

Stitched Styling Options ↑ Back to top

The Stitched theme has a few basic options for styling. You can set a background color or image:

stitched-styling

 

Adjust the Typography Settings:

stitched-typography

In order to customize the typography make sure you Enable custom typography by selecting the checkbox.

Finally, you can choose to have the sidebar on the left or right side under the Layout Settings:

stitched-layout

Homepage Overview ↑ Back to top

Introductory Message ↑ Back to top

The Introductory Message shown below is a combination of the site admin’s Gravatar image as well as the site tagline text.

Stitched-Homepage-Intro

To set this up go to: Settings > General:

Setting up the Homepage Introductory Message
Setting up the Homepage Introductory Message
  • Add a Tagline for the introductory message.
  • The admin’s email setting will display the Gravatar image. You must setup a Gravatar account if you want an image to display for the introductory message.

Projects by Woo ↑ Back to top

Stitched is built to prominently display your projects on the homepage of your website. In order to set this up you will need to download and install the Projects plugin.

The pink quote bubble is a Testimonial, you can learn more about how to setup this section below.

Please follow the link to the documentation to learn how to set up your Projects.

Once you add Projects to your site the most recent projects will be included on the Stitched homepage.

Testimonials ↑ Back to top

Testimonials will display on your homepage once you download, install and add a testimonial. Here is an example of a Testimonial displayed on the homepage:

Stitched-Homepage-Testimonial

To enable the Testimonials homepage content:

  1. Download, install and activate the Testimonials plugin.
  2. Go to: Testimonials > Add New.
  3. Add a Featured Image or email linked to a Gravatar email account.
    The Featured Image will override the Gravatar image.
  4. Publish.

Our Team ↑ Back to top

Our Team will display on your homepage once you download, install and add profiles for your team members. Here is an example of the Our Team section on the Stitched homepage demo:

Stitched-Homepage-Our-Team

To enable the Our Team homepage content:

  1. Download, install and activate the Our Team plugin.
  2. Go to: Our Team > Add New.
  3. Add a Featured Image or email linked to a Gravatar email account.
    The Featured Image will override the Gravatar image.
  4. Publish.
  5. Repeat.

Featured Products ↑ Back to top

Here is an example of the Featured Products on the Stitched homepage:

Stitched-Featured-Products

To display featured products on your homepage:

  • First, you must download and install WooCommerce plugin.
  • Follow the WooCommerce Installation Guide to setup.
  • Add products to your shop.
  • To mark a product as featured go to: Products > Products and select the Star in the featured column (see below).
  • You can alternatively select the Quick Edit option to select the Featured option.
Select the Star in the featured column to mark featured products.
Select the Star in the featured column to mark featured products.

Blog Posts ↑ Back to top

To add blog posts page:

  1. Go to: Pages > Add New to create your blog page template.
  2. Title the Page, example: Blog.
  3. Select ‘Blog‘ from the Page Attributes > Template dropdown option. Learn more about Page Templates here.
  4. Publish your new Blog Page Template.
  5. Go to: Posts > Add New to add a post.
  6. Upload a featured image for the post.
  7. Optionally, set the post category or tags.
  8. To embed a video go to the Stitched Custom Settings and paste the video link in the Embed Video area.
  9. Optionally, override the layout settings for the post page.
  10. Publish your post.

Business Page Template ↑ Back to top

Stitched comes with a useful Business Page Template to help display additional content on your site, including support for the WooSlider plugin. You must purchase the WooSlider plugin separately in order to use it on the Business Page Template.

To create a new business page template:

  1. Go to: Pages > Add New.
  2. Add a page title and optionally include page content. Page content will display just beneath the slider.
  3. Go to: Page Attributes > Template just below the publish module to select the Business page template.
  4. Publish the page.

Setting the Business Page Template as the Homepage ↑ Back to top

To set the Business Page Template as your Homepage go to: Settings > Reading > Front Page Displays and select the Static Page > Front Page as your newly created Business Page (instead of the recent posts setting).

Please note! By manually setting a static front page in the Reading settings you will be disabling the Homepage widgetized area and the Homepage Theme Option settings. You must have ‘Recent Posts’ set as the homepage if you want to use the Widgetized Homepage.

To learn more about how Templates please see our video tutorial here: Page Templates

Including WooSlider in the Business Page Template ↑ Back to top

The Business Page Template slider in Stitched uses the WooSlider – Attached Images slideshow type. After you have purchased, downloaded, installed and activated the WooSlider to include the slider on your business page template:

  1. Go to: Pages > Edit to your newly created business page.
  2. Select Add Media.
  3. Upload as many images as you’d like. Each image will create 1 new slide.
  4. Close (X) the Media Uploader pop-up window.
  5. Finally, save changes by selecting Update.

You must upload images directly to your business page template in order for the Business Page Template WooSlider feature to show.

Pro Tip! in the new WordPress 3.5+ Media Uploader you can select Uploaded to this Page from the dropdown to only view the images uploaded to this page and thus used in the featured slider (see below). Drag and drop the images from here to reorder if you’d like.

Image Dimensions ↑ Back to top

Here are the ideal image dimension to use for Stitched. Larger images will be dynamically resized to fit, while smaller images will be stretched larger to fit. Product images will scale width and height and will not be cropped into a square (unless you use the ‘Hard Crop’ setting found in WooCommerce > Settings > Product > Product Image Options). For greatest control of your image sizes, it is best to save out your images to the exact size before uploading.

Please note! We do not recommend that you force the height of your slider or product images with CSS as this will break the responsiveness of the theme images. Rather, it is best to save out your slider/product images with the same height before uploading.

Recommended Image Sizes ↑ Back to top

To edit these settings go to: Stitched > Settings > Dynamic Images > Thumbnail Settings

stitched-thumbnails

  • Thumbnail Image Dimensions: 1200px x 1200px
  • Single Post Thumbnails: 1200px x 1200px
  • Gravatar profile images: 250px x 250px

WooCommerce Product Images ↑ Back to top

To adjust the Shop Image settings go to WooCommerce > Settings > Product and scroll to the bottom of the page to find image size settings. If you change these settings after you’ve uploaded images, you must Regenerate Thumbnails for the changes to take effect.

Due to the product layout on archive shop pages, square product images work best to help evenly align the rows. This can be achieved by using the WooCommerce Hard Crop feature and setting the same pixel dimension for both the width and the height.

Minimum recommended product image width: 615px

Settings from the demo:

Stitched-WooCommerce-Image-Settings

To learn more about WooCommerce product images please see further documentation here: Adding Product Images and Galleries and here Using the Appropriate Product Image Dimensions

Featured Blog Images ↑ Back to top

To set the Featured Blog Image size for the blog page go to: Stitched > Settings > Dynamic Images > Thumbnail Settings.

Please note: The Blog Featured Image will only display on the Blog page. If you want an image on your single post page, then you should insert the image into your post.

To learn more about Featured Images please see our tutorial here: Featured Images

Contact Page ↑ Back to top

To setup a Contact Page:

Stitched Contact Page

  1. Go to: Pages > Add New
  2. Title your Contact Page
  3. Go to: Page Attributes > Template just below the publish module to select the Contact page template.
  4. Publish your page.
  5. Go to: Stitched > Settings > Contact Page to enter the Contact Form Email address.
  6. From here you can also enable the information panel (see below), and enable the Subscribe & Connect panel to display your social icons.
  7. Be sure to Save All Changes when finished.

contact-settings

To learn more about how Page Templates work please see our video tutorial here: Page Templates

Contact Page Maps ↑ Back to top

Contact-Map-Settings

To setup Google Maps:

  • Enter your Google Maps coordinates. Example: -33.924868,18.424055 – To find the Google Cordinates, search for your location on a Google Map, right click the pin and select “What’s Here”. This will input the Google Coordinates in the search box.
  • Optionally disable mousescroll for all the Google Maps on the site. This could improve usability on your site.
  • Set the map height.
  • Set the Default Zoom Level.
  • Select the Map Type: Normal, Satellite, Hybrid or Terrain.
  • Enter Map Callout text to be shown when you click on the map marker for your location.

FAQ ↑ Back to top

Can I re-order the components on the homepage? ↑ Back to top

Yes, there are 2 ways to do this: with code, or with a plugin. The plugin essentially wraps the code into a nice easy-to-use package, so if you don’t like getting your hands dirty with the code then give the plugin a try.

Using the Homepage Control plugin

Download, install and activate the Homepage Control plugin to gain complete control of the components in your homepage. You can re-order and toggle their visibility all from the WordPress dashboard. You can read about installing and using Homepage Control in the documentation.

Using Code

If you look in includes/theme-actions.php you will notice all the homepage components are hooked into the woo_homepage action. The number at the end of these add_action() functions represents the priority, or the order the hooked function is called. So for example:

add_action( 'woo_homepage', 'woo_display_introduction', 5 );
add_action( 'woo_homepage', 'woo_display_features', 60 );

The introduction section (woo_display_introduction) has a much lower priority value which results in earlier execution. If you wanted to display the Features section before the introduction, you would just need to set that priority value of 60 to something lower than 5. But instead of doing this in the parent theme and losing the change during an update, you can do it easily via your child theme.

First you unhook the features function from the woo_homepage action using remove_action() like so:

remove_action( 'woo_homepage', 'woo_display_features', 60 );

You then simply hook it back in with the new priority:

add_action( 'woo_homepage', 'woo_display_features', 3 );

This functionality also allows you to hook other functions into your homepage such as template tags from a third party plugin. Say you’re using a third party plugin to display a calendar, you can easily hook that into the homepage display using: add_action( 'woo_homepage', 'some_calendar_plugin_template', 10 );.

You can read more about add_action() here, and remove_action() here.

Can I remove the introduction section on the homepage? ↑ Back to top

Add the following snippet to your child themes functions.php file.

Can I change the text in the introduction section on the homepage? ↑ Back to top

Add the following snippet to your child themes functions.php file.

Can I change the email used for the gravatar in the introduction section on the homepage? ↑ Back to top

Add the following snippet to your child themes functions.php file.

Can I change the disable the gravatar in the introduction section on the homepage? ↑ Back to top

Add the following snippet to your child themes functions.php file.

Can I change the number of team members displayed on the homepage? ↑ Back to top

Add the following snippet to your child themes functions.php file.

Can I change the number of features displayed on the homepage? ↑ Back to top

Add the following snippet to your child themes functions.php file.

Can I add a slider to the homepage? ↑ Back to top

Add the following snippet to your child themes functions.php file.

Can I disable sections on the business template? ↑ Back to top

Add the following snippet to your child themes functions.php file. It will remove all sections of the business template. Just pick the one you need to remove.

WooCommerce - the most customizable eCommerce platform for building your online business.

Back to the top