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.
Homepage Overview ↑ Back to top
The Upstart homepage displays a Featured Slider, Features, Testimonials and Blog Posts.
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:
- Go to: Settings > General to enter your site title and tagline.
- Go to: Upstart > Settings > General Settings > Quick Start and select the box to enable the text based site title and tagline.
- Optionally Enable the site description and adjust the typography settings.
- Save All Changes.
To upload your own image based logo:
- Go to: Upstart > Settings > General Settings > Quick Start > Custom Logo.
- Upload your logo image – we recommend using either a .jpg or .png for this.
- 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.
To edit additional Homepage Featured Slider settings go to: Upstart > Theme Settings > Featured Slider > Slider Settings.
To add slides to your homepage:
- Go to Slides > Add New.
- Add slide content in the main content area, including a title and description.
- Add a Featured Image for the slide.
- Scroll down to review additional settings in Upstart Custom Settings for URL to link to or to add video embed code.
- Publish slide to save.
Add a Button to a Slide
Testimonials ↑ Back to top
To enable the Testimonials homepage content:
- Download, install and activate the Testimonials plugin.
- Go to: Testimonials > Add New.
- Add a Featured Image or email linked to a Gravatar email account.
The Featured Image will override the Gravatar image.
- 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.
Features ↑ Back to top
To enable the Features homepage content:
- Download, install and activate the Features plugin.
- Go to: Features > Add New.
- Add a title and description.
- Add a Featured Image.
- Publish and repeat!
Blog Posts ↑ Back to top
To add a blog page to your site and posts to your homepage:
- Go to: Pages > Add New to create your blog page template.
- Title the Page, example: Blog.
- Select ‘Blog‘ from the Page Attributes > Template dropdown option. Learn more about Page Templates here.
- Publish your new Blog Page Template.
- Go to: Posts > Add New to add a few posts.
- Add a Featured Image if you want an image to display on the homepage.
- 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.
Our Team ↑ Back to top
To add Team Members to the homepage:
- Go to: Team Members > Add New.
- Add a title and description.
- Add a Featured Image.
- 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.
- 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:
- Go to: Pages > Add New.
- Add a title and the page content.
- Go to: Page Attributes > Template just below the publish module to select the Business page template.
- 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).
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:
- Go to: Upstart > Settings > Business Template to select Display WooSlider.
- Next, go to: Pages > Edit to add images to your newly created business page.
- Select Add Media.
- Upload as many images as you’d like. Each image will create 1 new slide.
- Close (X) the Media Uploader pop-up window.
- Finally, save changes by selecting Update.
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.
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.
Here are the WooCommerce image size settings from the demo:
- Catalog Images: 600px x 600px
- Single Product Images: 1000px x 1000px
- Product Thumbnails: 200px x 200px
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.
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.
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:
- Go to: Pages > Add New
- Title your Contact Page
- Go to: Page Attributes > Template just below the publish module to select the Contact page template.
- Publish your page.
- Go to: Upstart > Settings > Contact Page to enter the Contact Form Email address.
- 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)
- Be sure to Save All Changes when finished.
To learn more about how Page Templates work please see our video tutorial here: Page Templates
Contact Page Maps ↑ Back to top
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:
- 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: