2021 Q4 Sale BFCM – Free Users Sitewide Banner

  1. Documentation
  2. Themes
  3. Spectrum

Spectrum 2.0

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

Welcome to Spectrum! This theme includes a Business page template with WooSlider support, as well as support for our ProjectsOur TeamFeatures and TestimonialsSensei, and WooCommerce plugin! Let’s get started!

Installing your Theme ↑ Back to top

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

Spectrum Theme Demo: demo.woothemes.com/spectrum

Checking your theme version ↑ Back to top

You can confirm your theme and WooFramework version by going to: Spectrum > 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: Spectrum > Settings > General Settings 
  2. Upload your logo image – we recommend using either a .jpg or .png for this.
  3. Save All Changes.

Logo

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: WordPress Dashboard > Settings > General to enter your site title.
  2. Go to: Spectrum > Settings > General Settings and check the box to enable the text based site title and tagline.
  3. Optionally adjust the typography settings.
  4. Save All Changes.

TextBased

Spectrum Styling Theme Settings ↑ Back to top

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

BackgroundColorImage

Adjust the Typography Settings:

TypographySettings

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

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

Layout

Homepage Overview ↑ Back to top

Slider Area ↑ Back to top

The homepage of Spectrum has a slider area where you can showcase your “featured” posts.  To add posts to the slider, simply publish a post and make sure that you have “tagged” that post with the same tag that you have set in the Theme Settings panel.

To set this up go to: Spectrum > Settings > General Settings > Slider Area where you can set the “tags” that you want to use for the posts.

Screenshot on 2014-07-01 at 13-11-49

Recent Posts Area ↑ Back to top

Immediately after the Slider area on the homepage, a list of the most recent posts published will be displayed.

If a post has already been displayed in the Slider Area, it will not be included in the Recent Posts area.

To set this up go to: Spectrum > Settings > Homepage > Post Settings.  You can customize the heading text here.

To customize the number of posts that are displayed here, you will need to go to: WordPress Dashboard > Settings > Reading and change the setting for “Blog pages show at most“.

PostSettings

Header Widget Area ↑ Back to top

The header area includes a widgetized region where you can add things like text, images, and adsense code.

To use this area, go to: Appearance > Widgets and add a widget into the “Header Area

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 Spectrum 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

Spectrum comes with a useful Business Page Template to help display additional content on your site, including support for the WooSlider pluginYou 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 Theme Option settings. You must have ‘Recent Posts’ set as the homepage if you want to use the standard Homepage.

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

Including WooSlider in the Business Page Template ↑ Back to top

The Business Page Template slider in Spectrum uses the WooSlider – Attached Images slideshow type. After you have purchaseddownloadedinstalled 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.

ImageUploader-AttachedtoPost

Image Dimensions ↑ Back to top

Here are the ideal image dimension to use for Spectrum. 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 > Products). 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: Spectrum > Settings > Dynamic Images > Thumbnail Settings 

  • Thumbnail Image Dimensions: 1200px x 1200px
  • Single Post Thumbnails: 1200px x 1200px

Thumbnail

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: Spectrum > Settings > Dynamic Images

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:

A fully set up contact page
A fully set up 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: Spectrum > 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.

ContactForm

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 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.

Screenshot on 2014-07-01 at 13-28-58

2.0 Upgrade Notes ↑ Back to top

2.0 is a major rewrite. Please do not perform an update on a live site without testing first. If you’re upgrading from 1.x you should be aware of the following:

Thumbnail Dimensions ↑ Back to top

Spectrum 2.0 introduced a slightly different blog layout with larger images. You may need to increase the size of your thumbnails and regenerate them. The process to do this is outlined in the ‘image dimensions‘ section of this document. To regenerate your thumbnails use the Regenerate Thumbnails plugin.

Check Menu Locations ↑ Back to top

In Spectrum 2.0 we updated the menu location names making them more understandable for new users. Changing menu names can ‘unset’ your current menus though so be sure to check your menu locations after performing the update.

Widget Removal ↑ Back to top

To reduce bloat several widgets have also been removed. You can see which ones, and how you can produce counterparts below:

  • Post Tabber – This can be added using WooDojo
  • Twitter Stream – This can be added using WooDojo
  • Flickr – You can display photos from your Instagram feed using WooDojo. For flickr there are many plugins on wordpress.org
  • Subscribe and Connect – This can be added via our Subscribe & Connect plugin
  • Blog Info – This can be added via a standard text widget
  • Advertisments – This can be added via text widget or Ad specific plugin
  • Search – This is included in WordPress core

Page Template Removal ↑ Back to top

Reducing bloat further some page templates have been removed:

  • Image Gallery – In modern versions of WordPress image galleries can be added to any page
  • Redirect – Redirect logic doesn’t belong in themes. There are many plugins (such as Quick Page Post Redirect) you can use to do this
  • Sitemap – This can be recreated using our Archives plugin

Header advert ↑ Back to top

The header advert option has been replaced with a widget region. This is more flexible allowing you to add any widget to the site header. You can easily add an advert by uploading the image to your media library then inserting it via a text widget as we do on the demo.

Footer Customisation ↑ Back to top

To streamline the configuration process we removed some unnecessary options such as the footer left / right text fields. To customise the footer we recommend creating a child theme, pasting the footer.php file from the parent theme in and making modifications to the template there.

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 the Homepage Control 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 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( 'homepage', 'woo_slider', 10 );
add_action( 'homepage', 'woo_display_recent_posts', 20 );

The introduction section (woo_slider) has a much lower priority value which results in earlier execution. If you wanted to display the Recent Posts section before the Slider, you would just need to set that priority value of 20 to something lower than 10. 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 Slider function from the homepage action using remove_action() like so:

remove_action( 'homepage', 'woo_slider', 10 );

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

add_action( 'homepage', 'woo_slider', 30 );

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( 'homepage', 'some_calendar_plugin_template', 10 );.

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

Can I add anything to the header widget area? ↑ Back to top

Yes, simply use the widgets screen, find this in the admin area under Appearance > Widgets. All you need to do is add the widget to the “Header Area” – we recommend using this area for text and images such as ads.

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.


add_filter( 'woo_business_slider', '__return_false' ); // Disable the slider
add_filter( 'woo_business_features', '__return_false' ); // Disable Features display
add_filter( 'woo_business_testimonials', '__return_false' ); // Disable Testimonials display
add_filter( 'woo_business_blog', '__return_false' ); // Disable blog section

view raw

functions.php

hosted with ❤ by GitHub

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

  • 30 day money back guarantee
  • Support teams across the world
  • Safe & Secure online payment