Upstart

Welcome to Upstart! This theme includes a Business Page Template as well as support for the WooCommerce, Features, Testimonials and Our Team plugins!

Note: This product has been retired and is not for sale. Documentation is no longer being updated.

Installing your Theme ↑ 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: Upstart > 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.

Homepage Overview ↑ Back to top

The Upstart homepage displays a Featured Slider, Features, Testimonials and Blog Posts.
upstart-homepage-overview

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. When using the text based option the tagline is built to display above the site title and the rocket ship is uses jQuery Waypoints with the Font Awesome rocket “\f135”.

To enable the text based Site Title and Tagline:

  1. Go to: Settings > General to enter your site title and tagline.
  2. Go to: Upstart > Settings > General Settings > Quick Start and select the box to enable the text based site title and tagline.
  3. Optionally Enable the site description and adjust the typography settings.
  4. Save All Changes.

To upload your own image based logo:

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

Social Icons in Header ↑ Back to top

To include the social icons in the header as seen in the demo, you need to add your social networks in the Subscribe and Connect settings.

Homepage Featured Slider ↑ Back to top

To enable the Homepage Featured Slider go to Upstart > Theme Settings > Featured Slider > Slider Content. From here you can set the number of slides to display on the homepage, optionally choose a Slide Group (category), or whether to show a title on Video slides or what order the slides should display.

upstart_settings_featured_slider

To edit additional Homepage Featured Slider settings go to: Upstart > Theme Settings > Featured Slider > Slider Settings.

 

upstart_settings_featured_slider_slider_settings

Add Slides

To add slides to your homepage:

  1. Go to Slides > Add New.
  2. Add slide content in the main content area, including a title and description.
  3. Add a Featured Image for the slide.
  4. Scroll down to review additional settings in Upstart Custom Settings for URL to link to or to add video embed code.
  5. Publish slide to save.
Please note! The Homepage Featured Slider for Upstart does not utilize the WooSlider plugin even though it uses similar functionality. After you purchase and install the WooSlider plugin the Slides menu option will be listed as Slideshows instead. The plugin is required if you would like to display a featured slider on your Business Page Template.
Slideshow menu with WooSlider installed
Slideshow menu with WooSlider installed
Slideshow menu without WooSlider
Slideshow menu without WooSlider

Add a Button to a Slide

The Upstart theme demo includes a slide with a button, which can be placed with a button shortcode. To learn more about Woo Shortcodes please see our tutorial here: Woo Shortcodes

Testimonials ↑ Back to top

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.
  5. Repeat to add a minimum of 4 or 6 Testimonials to properly fill the homepage region. If you want more/less than 4 or 6 testimonials this will not properly fill the homepage region and may require custom code for desired alignment.
To learn how to install a plugin, please see our video tutorial: Installing Plugins

Features ↑ Back to top

To enable the Features homepage content:

  1. Download, install and activate the Features plugin.
  2. Go to: Features > Add New.
  3. Add a title and description.
  4. Add a Featured Image.
  5. Publish and repeat!
Upstart Features is built to display the oldest published feature first on the homepage. If you want to change the order of your features, you can manually edit the publish date.

Blog Posts ↑ Back to top

To add a blog page to your site and posts to your homepage:

  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 few posts.
  6. Add a Featured Image if you want an image to display on the homepage.
  7. Publish your post(s).

WooCommerce Theme Settings ↑ Back to top

 

Next you will notice on the demo the WooCommerce Featured products appear. To set this up first you will need to download and install the WooCommerce plugin. Then you will need to add some products and mark them as featured.

To configure the WooCommerce Theme Settings go to: Upstart > Theme Settings > WooCommerce to configure the following options:

  • Upload a Custom Placeholder to be displayed when there is no product image.
  • Display a Header Cart Link in the main navigation.

upstart_settings_woocommerce

Our Team ↑ Back to top

Upstart includes homepage support for the Our Team plugin. To get started download and install the plugin. After installing you will see a new menu item for Team Members.

To add Team Members to the homepage:

  1. Go to: Team Members > Add New.
  2. Add a title and description.
  3. Add a Featured Image.
  4. Beneath the team member description you can optionally add team member details such as: a Gravatar email, (for the team member image rather than a featured image) Role, Link to their Website(URL) or Twitter handle.
  5. Publish and repeat!

It is recommended you upload at least 4 team members to properly fill the homepage space.

Business Page Template ↑ Back to top

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

Go to: Upstart > Theme Settings > Layout > Business Template to select the business page modules you would like to display.

To set the business page template:

  1. Go to: Pages > Add New.
  2. Add a title and the page content.
  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 Theme Option settings. You must have ‘Recent Posts’ set as the homepage if you want to use the Homepage theme settings.

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 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: Upstart > Settings > Business Template to select Display WooSlider.
  2. Next, go to: Pages > Edit to add images to your newly created business page.
  3. Select Add Media.
  4. Upload as many images as you’d like. Each image will create 1 new slide.
  5. Close (X) the Media Uploader pop-up window.
  6. Finally, save changes by selecting Update.
Please note: 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.

ImageUploader-AttachedtoPost

Image Dimensions ↑ Back to top

Here are the ideal image dimension to use for Upstart. 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

  • Featured Slider/WooSlider Business Slider suggested minimum width: 1600px – height will scale to fit
  • Features images suggested minimum width: 246px
  • Testimonials images: 228px x 228px
  • Single Blog Post Images maximum width: 1054px

WooCommerce Product Images ↑ Back to top

To adjust the Shop Image settings go to WooCommerce > Settings > Product > Product Image Options; 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. This can be achieved by using the WooCommerce Hard Crop feature and setting the same pixel dimension for both the width and the height.

Here are the WooCommerce image size settings from the demo:
Upstart-WooCommerce-Image-Settings

  • Catalog Images: 600px x 600px
  • Single Product Images: 1000px x 1000px
  • Product Thumbnails: 200px x 200px

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 Thumbnails and the Single Post image go to: Upstart > Theme Settings > Dynamic Images > Thumbnail Settings.

upstart_settings_thumbnail_settings

 

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

Subscribe & Connect

The Subscribe & Connect functionality for the Upstart theme can be used on single post pages, with the Subscribe & Connect widget, as well as a special Subscribe & Connect area above the footer region.

To add social media icons to your single posts page go to: Upstart > Theme Settings > Subscribe & Connect > Setup and select Enable Subscribe & Connect – Single Post.

 

upstart_settings_subscribe_and_connect

To add social media icons above the footer region go to: Upstart > Theme Settings > Contact Page > Contact Information and input the relevant details.

To setup Subscribe & Connect go to:

  • Subscribe & Connect > Connect Settings to link the icons to each social media page.
  • Subscribe & Connect > Setup to enable the related posts in the Subscribe & Connect box (example below).
  • Subscribe & Connect > Subscribe Settings to setup the email subscription form.
  • Upstart > Theme Settings > General Settings > Subscription Settings to enter your preferred RSS feed URL.

Contact Page ↑ Back to top

To setup a Contact Page:

ContactPage

  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: Upstart > 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 (see demo example)
  7. Be sure to Save All Changes when finished.

upstart_settings_contact_information

 

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

Contact Page Maps ↑ Back to top

 

upstart_settings_contact_map

To setup Google Maps:

  • Enter your Google Maps coordinates. Example: -33.924868,18.424055 – To find the Google Coordinates, 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 mouse-scroll 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.

Custom Upstart Widgets ↑ Back to top

The Upstart theme includes 5 custom widgets in addition to the Woo – Component widget mentioned above. Here are the other 5 custom widgets:

  • Woo – Adspace
  • Woo – Blog Author Info
  • Woo – Embed/Video
  • Woo – Flickr
  • Woo – Subscribe/Connect

To learn more about how to add Widgets please see our tutorial here: How to Add Widgets

Filter Reference ↑ Back to top

To customise Upstart beyond the included theme settings you can utilise various filters:

Homepage ↑ Back to top

The following filters can be used to modify the homepage.

  • upstart_homepage_features – Enables / Disables Features on the homepage
  • upstart_homepage_features_limit – Controls the number of features to display (defaults to 3)
  • upstart_homepage_testimonials – Enables / Disables Testimonials on the homepage
  • upstart_homepage_testimonials_limit – Controls the number of testimonials to display (defaults to 4)
  • upstart_homepage_blog_posts – Enables / Disables blog posts on the homepage
  • upstart_homepage_featured_products – Enables / Disables featured products on the homepage
  • upstart_homepage_featured_products_per_page – Controls the number of featured products to display (defaults to 12)
  • upstart_homepage_our_team – Enables / Disables Our Team on the homepage
  • upstart_homepage_our_team_per_page – Controls the number of team members to display (defaults to 4)

Example ↑ Back to top

To remove the features section, add the following code to the ‘custom functions’ area of your functions.php file:

add_filter( 'upstart_homepage_features', '__return_false' );

WooCommerce ↑ Back to top

The following filters can be used to modify the WooCommerce pages

  • upstart_products_per_page – Controls the number of products displayed per page on product archives
  • upstart_distraction_free_checkout – Enables / Disables the Distraction Free Checkout

Footer ↑ Back to top

The following filters can be used to modify the footer

  • upstart_footer_contact – Enables / Disables the contact bar in the footer
  • upstart_homepage_contact_phone – Enables / Disables the phone link in the footer
  • upstart_homepage_contact_email – Enables / Disables the email link in the footer
  • upstart_homepage_contact_address – Enables / Disables the address display in the footer
  • upstart_homepage_contact_twitter – Enables / Disables the twitter link in the footer

FAQ ↑ Back to top

How do I remove the rocket animation in the site title?
To remove the icon altogether add the following snippet to your child theme CSS:
https://gist.github.com/jameskoster/7821468
The content of my slides on the homepage gets cut off, why?
On page load the homepage slider is set to match the browser height to provide the ‘full screen’ illusion’. If your content is too long it will get cut off. From here you have 2 options:

  1. Make your slide content shorter.
  2. Disable the full screen slider effect by adding this snippet to your Child Themes functions.php file.

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

Back to the top