Welcome to Spectrum! This 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! 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.
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:
- Go to: Spectrum > Settings > General Settings
- Upload your logo image – we recommend using either a .jpg or .png for this.
- 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:
- Go to: WordPress Dashboard > Settings > General to enter your site title.
- Go to: Spectrum > Settings > General Settings and check the box to enable the text based site title and tagline.
- Optionally adjust the typography settings.
- Save All Changes.
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:
Adjust the Typography Settings:
Finally, you can chose to have the sidebar on the left or right side under the Layout Settings:
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.
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.
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“.
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:
- 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 post.
- Upload a featured image for the post.
- Optionally, set the post category or tags.
- To embed a video go to the Spectrum Custom Settings and paste the video link in the Embed Video area.
- Optionally, override the layout settings for the post page.
- 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 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:
- Go to: Pages > Add New.
- Add a page title and optionally include page content. Page content will display just beneath the slider.
- 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 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 purchased, downloaded, installed and activated the WooSlider to include the slider on your business page template:
- Go to: Pages > Edit 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.
You must upload images directly to your business page template in order for the Business Page Template WooSlider feature to show.
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.
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
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.
Minimum recommended product image width: 615px
Settings from the demo:
Featured Blog Images ↑ Back to top
To set the Featured Blog Image size for the blog page go to: Spectrum > Settings > Dynamic Images
To learn more about Featured Images please see our tutorial here: Featured Images
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: Spectrum > 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 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.
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.
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 );.
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|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|