“Continuum” Documentation by “Outer Spice Web Company” v1.0

Continuum Logo

Created: 4/20/2011
By: Outer Spice Web Company
Email: bmac@outerspiceweb.com

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email via our user page contact form here. Also, you should read the Socket FAQ on ThemeForest since it explains how to do a lot of specific things. Thanks so much!

Table of Contents

  1. Getting Started
    1. Summary
    2. Quick Start Guide
    3. Compatibility
  2. HTML Structure
    1. Single Pages
    2. Archive Pages
  3. CSS Files and Structure
  4. JavaScript
  5. PNG Files
  6. Sources and Credits
  7. PHP Code Explanation
  8. Detailed User Guide
    1. Reviews
    2. Custom Menus
    3. Widgets & Sidebars
    4. Shortcodes
    5. Page Templates
    6. Tips & Additional Info

A) Getting Started - top

Summary

Continuum is best used for magazine-style blogs, but has been built with all types of websites in mind. There are almost 200 options available to you in the theme options page, so you can really customize it to do exactly what you want it to do. However, even if you don't adjust any of the settings and just want to get your website up quickly, Continuum has been built to present your website in a professional manner by default. Following are the essentials for running Continuum, and then if you want to know about anything in more detail, you can find a wealth of information further down this page.

Quick Start Guide

Installation - To get started, open the ContinuumTheme folder that you downloaded and find the folder named Continuum. Upload this folder into your wp-content/themes/ folder and then activate it in your Wordpress admin panel under "Appearance" >> "Themes". Once Continuum is activated, you'll notice all the custom post types appear in the right hand column (Movie Reviews, Music Reviews, etc.) as well as the Continuum Theme Options page under the "Appearance" menu, which is where all of the theme settings are.



Theme Options - The Continuum Theme Options page is separated into several tabs. The first tab contains all the information you need to use the options tabs. In addition, every single option is named and described in an intuitive way so that you always know what a setting will do.



Your Front Page - On the "Settings" >> "Reading" page for the "Front Page Displays" option, you can either choose "Your latest posts" or "A static page". If you select "A static page", you will want to create a page in Wordpress and select "Home Layout" for the Template. Regardless of the method you choose, all of the layout options for the home page layout are located on the theme options page.



jQuery Sliders - It is very simple to get posts to show up in the jQuery sliders. Simply tag posts "breaking" (no quotes) to get them to display in the breaking panel at the top of every page, and tag posts "spotlight" (no quotes) to get them to display in the main spotlight slider on the home page.

Menus - There are three custom menus that you need to setup, which are:

  1. Top Menu - The top menu bar which also houses the search box. This is a good place to put your pages.
  2. Small Menu - The right-aligned menu that sits directly below the header and directly above the larger menu with the white background. This is a good place to put special pages and/or your review pages.
  3. Main Manu - The full-width menu that sits directly above the main content wrapper. This is a good place to put your categories.
By default these menus will display pages, pages, and categories, respectively. That means if you don't go in and setup the custom menus, you will have two menus listing your pages which you probably don't want. Go to "Appearance" >> "Menus" and create your three menus in the panel on the right. Once you have created the menus, add them to the pages using the Theme Locations panel on the left, and click Save.



Reviews - Continuum gives you five custom review post types: Movie, Music, Video Game, Book, and Product reviews. You can add reviews similarly to how you add new posts or pages. If you want to add a new Movie Review, for instance, go to "Movie Reviews" >> "Add New", and then fill it out just like a post with the following differences: A) Just like a post lets you select categories, a movie review lets you select genres, directors, and actors (each of which work just like post categories); B) To give your new review a rating, add a custom field named "Rating" with a value of 0 thru 5 (increasing at 0.5 increments); and C) give a brief summary of the positives and negatives of what you are reviewing using a custom field named "Positives" and a custom field named "Negatives", and for the value write the positive/negative text.



Now that you know how to add reviews, you need to know how to get them to show up on your site. Using our Movie Reviews example, add a new standard Wordpress page with a title of Movie Reviews. Select the "Reviews - Movies" template. You do not need to put anything in the page content box. All you have to do is add this page to one of your custom menus, and it will automatically find all of your movie reviews and list them on that page. Follow this same method for the other four review types.

Important: You can name the pages whatever you want, but they must have the following page slugs or else some of the widgets will not link to the correct places:



Compatibility

Continuum is built with valid XHTML. It is certified compatible with Google Chrome, Mozilla Firefox (3.5, 3.6, and 4), Safari, Opera, and Internet Explorer (7, 8, and 9). Note, however, that the "breaking" slider does not rotate in Opera, and the entire site is pretty slow in Internet Explorer 7. If you want to cater to Opera users, you can simply set the "breaking" slider to only display four posts, which will disable the sliding functionality and Opera users will never know the difference. Continuum was built using Wordpress version 3.1, and has been tested and verified with versions 3.0 - 3.1.1.

B) HTML Structure - top

Continuum is a 960px fixed-width theme with indented and intuitively spaced HTML. You will find in-line commenting allthroughout the HTML so that you can always figure out what section of the layout you are in. All of the pages in Continuum can be divided into two main types: A) Single pages, and B) List pages.

Single Pages

"Single Pages" refers to single posts and page templates. Every single page wraps the content in a div called "page-content" and either uses a "left-panel" and "right-panel" div structure (for pages with a sidebar) or just uses a "content" div to hold the main content (for the full-width template). There are two main sections of each page: A) the main content area, which is mentioned above, and B) everything below the main content, including the feed, the comments, and the latest panel. All page templates call the following files:

Archive Pages

"Archive Pages" refers to any page that lists a set of posts, such as category.php, archive.php, taxonomy-book-author.php, etc. These pages all wrap their content in a div called "feed-wrapper", which is designed to list posts in a 3 x 3 grid format (or 2 x 1, or 1 x 1, depending on the theme options settings). You will know these pages because they call a function to include a file from the inc/ folder. These files include the same files as the "Single Pages", but they are distinct because they don't actually display any content that you enter into a Wordpress post or page editor. Instead, they are custom built to list a particular type of post.

You will notice there is no "sidebar.php" file in Continuum. That is because there are almost 20 unique types of sidebars. Rather than creating 20 separate files - one for each type of sidebar - the sidebars are included directly in each of the pages that they are assigned to.

C) CSS Files and Structure - top

The main styles are located in style.css. It is separated into sections and commented well, like so:

        
        /*************************************************
        css reset and general setup
        *************************************************/
The CSS reset which sets up the style for the theme. 
        
        /*************************************************
        page backgrounds
        *************************************************/
Specifies the images or colors to use for the background selected in the theme options page. 
        
        /*************************************************
        top bar
        *************************************************/
The top gray bar that houses the "top menu" custom menu and the search box (the menu is actually styled in a different file, see below) 
        /*************************************************
        breaking
        *************************************************/
The slider that displays posts tagged "breaking"

etc, etc.

All other positioning and layout styles are located in the css folder. The main style.css file clarifies in-line which file inside the css folder styles which elements. There are six files inside the style folder:

  1. feed.css - styles the feed panels
  2. ie7.css - specific styles for IE7
  3. latest.css - styles the latest panel above the footer
  4. menus.css - styles all three of the custom menus
  5. shortcodes.css - styles all of the shortcodes you can include in a post or page
  6. spotlight.css - styles the spotlight slider that displays on the home page templates (all three variations)

D) JavaScript - top

Caulk imports 15 Javascript files, as follows:

  1. jQuery: jQuery is a Javascript library that greatly reduces the amount of code that you must write.
  2. jQuery UI: jQuery user-interface plugins which add functionality to the core jQuery framework.
  3. Easing plugin: the rotations between slides in the featured and popular areas are accomplished with the AnythingSlider jQuery plugin.
  4. Cycle: the jQuery plugin that rotates the testimonials.
  5. AnythingSlider plugin: the way that the AnythingSlider animates the rotations in these panels is accomplished with the Easing jQuery plugin.
  6. Nivo: one of the three possible spotlight sliders.
  7. Superfish: the jQuery plugin that creates fancy menu dropdowns.
  8. Cufon: the jQuery plugin for font replacement.
  9. Adelle: the js file that contains the Adelle font used by the cufon plugin for font replacement.
  10. Gentesque: the js file that contains the Gentesque font used by the cufon plugin for font replacement.
  11. TipTip: the js file that adds the hover functionality that explains what links and images do when clicked.
  12. Twitter plugin: the latest tweets are loaded via the Twitter plugin.
  13. Colorbox: the jQuery plugin used to pull Flickr images.
  14. jflickrfeed: another jQuery file that helps with Flickr.
  15. custom.js: the file that contains all of the js setup functions.

Note: The settings for most of the jQuery plugins are located in the custom.js file, but some of them are located in the header.php file since they require php variables from the theme options page. An explanation of what each setting does is commented in-line. You should only ever need to edit the javascript in the header.php file or the js/custom.js file. For instance, if you want to change the transition method used in the "breaking" slider, you would adjust this code in the header.php file:

        $('#breaking').anythingSlider({
            easing: "easeInOutExpo",        // Anything other than "linear" or "swing" requires the easing plugin
			...
        });

You could change it to something like this instead:

        $('#breaking').anythingSlider({
            easing: "easeInOutBack",        // Anything other than "linear" or "swing" requires the easing plugin
			...
        });

E) PNG and PSD Files - top

Every image used in the Continuum theme has a corresponding layered PNG file located in the main Continuum-Theme folder that you downloaded from ThemeForest, inside of the PNG folder. Look in the source of the code to find the image that you want to edit, and find the corresponding image file located in the PNG folder. Open the file in an image editor that is capable of editing PNG files, such as Adobe Fireworks, edit the file, and export the file to the images folder inside of the continuum theme folder (located inside the main ContinuumTheme folder that you downloaded from ThemeForest).

Additionally, to find the image you wish to edit using a more visual approach, open the PSD folder inside the main ContinuumTheme folder that you downloaded from ThemeForest and open the file that corresponds with the page that contains the image you wish to edit. Then, export the image as a PNG file and place it in the images folder inside of the continuum theme folder (located inside the main ContinuumTheme folder that you downloaded from ThemeForest).

F) Sources and Credits - top

I've used the following images, icons or other files as listed:

G) PHP Code Explanation - top

The main functions.php file in the root continuum folder calls several PHP files (commented in-line) located inside the functions/ folder, which are as follows (in alphabetical order):

H) Detailed User Guide - top

Now that you know about the specs of Continuum, let's dive deeper into how it all works. If you are an experienced Wordpress user you were most likely able to get up and running using the Quick Start guide at the beginning of this document. IF you need a little more instruction on how to use Continuum, or if the Quick Start guide left you with further questions, this is where you'll find the answers. The Detailed User Guide also explains more features that weren't mentioned above, such as an explanation of the widgets, custom field values, and shortcodes that come with Continuum.

Reviews

You can be up and running with your own review site in three easy steps, detailed in this section. Continuum comes with five custom post types, each one a type of review:

  1. Movie Reviews
  2. Music Reviews
  3. Video Game Reviews
  4. Book Reviews
  5. Product Reviews

Step 1: Setup the custom taxonomies
You can use all of the reviews together, just a few of them, or none at all. By default they are all active, but you can disable them one by one in the theme options. Each review type has three custom taxonomies (think "categories") that you can assign items from. You can add items to each custom taxonomy in the review menus (pictured to the right) or directly on the add/edit review screen. Here is the list of custom taxonomies along with examples of what you could use for each one:



As you can see demonstrated by the Product Category taxonomy, any of the custom taxonomies can have multiple-levels of categories added. You can even go more than two levels deep if you want. This is designed to help you classify whatever it is that you want to review and organize it in a way that presents as much content to your users as possible.

Step 2: Create the reviews
When adding a new review, enter the title and content, and then assign custom taxonomies from the right-hand column. Then, add a featured image which will display in the review listings as well as the single review page. Finally, give the review the necessary custom fields, which are described in the Continuum Custom Field Guide located on every review edit screen. They are additionally described below: Here is a screenshot of an example Music review being edited with all of the necessary components added and labeled:

Step 3: Display the reviews on your site

Now that you have some reviews created, you'll need to display them on your site. In order to do this, you'll need to create a page for each review type that you want to use. We'll use "Music Reviews" as an example. Go to Pages >> Add New and name the page "Music Reviews" or any other title that you want to house the reviews. Then, select "Music Reviews" as the page template and click Publish. You don't need to add any content to the page - it will know to display your music reviews. You can change the layout of the review listings for each review type in the theme options. For example, if you want your review listings pages to list two reviews per line with a sidebar, you would go to Continuum Theme Options >> Reviews >> General Settings and set the Review Listing Layout option to layout "B" (this will affect all five of the review types). Remember, all theme options pages are explained on the Getting Started tab of the theme options page, plus there is a short description next to each option in the options tabs.

In addition to creating the review page, you need to create a link to the page by adding it somewhere on your site. A good place to do this is the "Small Menu" custom menu. Go to Appearance >> Menus >> Custom Small Menu, add the page to the list, and click Save.

Menus - There are three custom menus that are included in the header.php file of Continuum. The position and name of each of the menus is as follows:

  1. Top Menu - The top menu bar which also houses the search box. This is a good place to put your pages.
  2. Small Menu - The right-aligned menu that sits directly below the header and directly above the larger menu with the white background. This is a good place to put special pages and/or your review pages.
  3. Main Manu - The full-width menu that sits directly above the main content wrapper. This is a good place to put your categories.

By default these menus will display pages, pages, and categories, respectively. That means if you don't go in and setup the custom menus, you will have two menus listing your pages which you probably don't want. Go to "Appearance" >> "Menus" and click the plus to add a new menu. We'll use the Main Menu as our example. Name the new menu whatever you want, but it is recommended to follow the same naming convention already in place to help you remember which is which, so we suggest naming it something like "Custom Main Menu". Add any pages, posts, categories, or custom links from the panels on the left that you want to display in this menu, and then save it.

Next, find the Main Menu drop down box in the Theme Locations panel on the left and select the name of your new menu (e.g. "Custom Main Menu"), then click Save. The main menu will now display the items that you specifically added to it. Repeat this same process for the other two menus.



Widgets & Sidebars

Continuum comes standard with 11 custom widgets which extend the functionality of Continuum and 19 custom sidebars which allow you to place different widgets on different pages. Once you install the theme, the widgets and sidebars will automatically become available on the Appearance >> Widgets page. The custom widgets are all named beginning with "Continuum...". All of the widgets and sidebars have thorough descriptions that explain what they each do, but we will additionally list them in this section.

Widgets

Sidebars

Shortcodes

Continuum comes with 68 total shortcodes that do anything from create a styled button to group content into jQuery tabs to show your pre-defined sign-off text at the end of each post. In addition to offering these shortcodes, Continuum makes it easier than other themes by adding buttons for each shortcode in the visual editor toolbar as shown in the image above. That way, you don't have to remember what the shortcodes actually are. However, we will list them here so you have a reference, especially since you won't always necessarily use the visual editor toolbar to insert shortcodes. Remeber, you can add shortcodes whether you are viewing the Visual or the HTML editor. Here is a table of shortcodes by name, code, description, and corresponding button on the visual editor:

Name Shortcode Description Button
Dropcap [dropcap]...[/dropcap] Use on first letter of paragraph to make it larger
Divider [divider] Adds a light grey dividing line with spacing above and below
Quote [quote]...[/quote] Indents text inside a styled quote box
Left Pullquote [pullquote_left]...[/pullquote_left] Floats a block of text inside a styled quote box to the left of the content
Right Pullquote [pullquote_right]...[/pullquote_right] Floats a block of text inside a styled quote box to the right of the content
Dark Box [box_dark]...[/box_dark] Wraps content inside a styled box with light text on dark background
Light Box [box_light]...[/box_light] Wraps content inside a styled box with dark text on light background
Simple Toggle [toggle_simple title="Title" width="Width"]...[/toggle_simple] Displays the text inside the title attribute with a plus icon that, when clicked, toggles display of the rest of the content within the shortcode using a jQuery transition. You only need to include the width if you want the toggle to have a width other than 600px.
Box Toggle [toggle_box title="Title" width="Width"]...[/toggle_box] Same as Simple Toggle but additionally wraps the toggle in a styled box
Tabs [tabgroup]
  • [tab title="Title"]...[/tab]
  • [tab title="Title"]...[/tab]
  • [tab title="Title"]...[/tab]
[/tabgroup] 		Wraps content into separate styled tabs that, when clicked, tab between content using a jQuery transition. Important: you can only add one Tabs shortcode to a page, or else the tab functionality will break (will not affect tabbed widgets in the sidebars)
Signoff [signoff] Adds the text from the Signoff option (theme options >> miscellaneous tab) inside a styled box with a nice "info" icon
Columns Divides content into columns of varying widths
One Third [one_third]...[/one_third]  
One Third Last [one_third_last]...[/one_third_last]  
Two Thirds [two_third]...[/two_third]  
Two Thirds Last [two_third_last]...[/two_third_last]  
One Half [one_half]...[/one_half]  
One Half Last [one_half_last]...[/one_half_last]  
One Fourth [one_fourth]...[/one_fourth]  
One Fourth Last [one_fourth_last]...[/one_fourth_last]  
Three Fourths [three_fourth]...[/three_fourth]  
Three Fourths Last [three_fourth_last]...[/three_fourth_last]  
One Fifth [one_fifth]...[/one_fifth]  
One Fifth Last [one_fifth_last]...[/one_fifth_last]  
Two Fifths [two_fifth]...[/two_fifth]  
Two Fifths Last [two_fifth_last]...[/two_fifth_last]  
Three Fifths [three_fifth]...[/three_fifth]  
Three Fifths Last [three_fifth_last]...[/three_fifth_last]  
Four Fifths [four_fifth]...[/four_fifth]  
Four Fifths Last [four_fifth_last]...[/four_fifth_last]  
One Sixth [one_sixth]...[/one_sixth]  
One Sixth Last [one_sixth_last]...[/one_sixth_last]  
Five Sixths [five_sixth]...[/five_sixth]  
Five Sixths Last [five_sixth_last]...[/five_sixth_last]  
Small Buttons Adds a small linkable button to the page
Light Grey Button [button link="URL" variation="lightgrey"]...[/button]    
Grey Button [button link="URL" variation="grey"]...[/button]    
Dark Grey Button [button link="URL" variation="darkgrey"]...[/button]    
Black Button [button link="URL" variation="black"]...[/button]    
Slate Button [button link="URL" variation="slate"]...[/button]    
Blue Button [button link="URL" variation="blue"]...[/button]    
Sky Button [button link="URL" variation="sky"]...[/button]    
Green Button [button link="URL" variation="green"]...[/button]    
Moss Button [button link="URL" variation="moss"]...[/button]    
Red Button [button link="URL" variation="red"]...[/button]    
Rust Button [button link="URL" variation="rust"]...[/button]    
Brown Button [button link="URL" variation="brown"]...[/button]    
Pink Button [button link="URL" variation="pink"]...[/button]    
Purple Button [button link="URL" variation="purple"]...[/button]    
Large Buttons Adds a large linkable button to the page
Light Grey Button [button link="URL" variation="lightgrey" size="large"]...[/button]    
Grey Button [button link="URL" variation="grey" size="large"]...[/button]    
Dark Grey Button [button link="URL" variation="darkgrey" size="large"]...[/button]    
Black Button [button link="URL" variation="black" size="large"]...[/button]    
Slate Button [button link="URL" variation="slate" size="large"]...[/button]    
Blue Button [button link="URL" variation="blue" size="large"]...[/button]    
Sky Button [button link="URL" variation="sky" size="large"]...[/button]    
Green Button [button link="URL" variation="green" size="large"]...[/button]    
Moss Button [button link="URL" variation="moss" size="large"]...[/button]    
Red Button [button link="URL" variation="red" size="large"]...[/button]    
Rust Button [button link="URL" variation="rust" size="large"]...[/button]    
Brown Button [button link="URL" variation="brown" size="large"]...[/button]    
Pink Button [button link="URL" variation="pink" size="large"]...[/button]    
Purple Button [button link="URL" variation="purple" size="large"]...[/button]    
Lists Wraps around a list to give it a different bullet
Fancy List [fancylist]bullet list[/fancylist] Bullets become black minimal arrows  
Arrow List [arrowlist]bullet list[/arrowlist] Bullets become green standard arrows  
Check List [checklist]bullet list[/checklist] Bullets become checkmarks  
Star List [starlist]bullet list[/starlist] Bullets become stars  
Plus List [pluslist]bullet list[/pluslist] Bullets become pluses  
Heart List [heartlist]bullet list[/heartlist] Bullets become hearts  
Info List [infolist]bullet list[/infolist] Bullets become info icons  

Note: "..." indicates where you should put your content inside of the shortcode. For Lists, where it says "bullet list", put a regular bulleted or numbered list.

Page Templates

Continuum comes with nine page templates that you can assign to a page using the Page Attributes >> Template drop down when editing a page. Some of them have already been mentioned in this document, but we will list them again here so that all of the information on page templates can be in one place:

  1. Default Template - Displays page content on the left, with a sidebar on the right, "The Feed" below the page content, and "The Latest" panel above the footer. You can specify a Unique Pages Sidebar, hide "The Feed", and hide "The Latest" panel in Continuum Theme Options >> Page Layouts >> Other Pages. You can also adjust settings for individual pages using custom fields (see the Continuum Custom Field Guide for options - located on the page edit screen)
  2. Authors Page - Lists all authors inside styled panels on the left, with a sidebar on the right, and "The Latest" panel above the footer. You can specify a Unique Authors Sidebar and hide "The Latest" panel in Continuum Theme Options >> Page Layouts >> Other Pages. You do not need to enter anything for the page content.
  3. Full Width - Same as Default Template except it does not display the sidebar on the right. Uses the same settings from the Continuum Theme Options as the Default Template.
  4. Home Layout - Displays the Spotlight slider at the top of the page, followed by "The Latest" panel, and then "The Feed". You can adjust settings for this template in Continuum Theme Options >> Front Page.
  5. Reviews - Books - Displays latest posts from the Book Reviews post type in a grid format. You can adjust settings for this template in Continuum Theme Options >> Reviews >> General Settings. You do not need to enter anything for the page content.
  6. Reviews - Movies - Displays latest posts from the Movie Reviews post type in a grid format. You can adjust settings for this template in Continuum Theme Options >> Reviews >> General Settings. You do not need to enter anything for the page content.
  7. Reviews - Music - Displays latest posts from the Music Reviews post type in a grid format. You can adjust settings for this template in Continuum Theme Options >> Reviews >> General Settings. You do not need to enter anything for the page content.
  8. Reviews - Products - Displays latest posts from the Product Reviews post type in a grid format. You can adjust settings for this template in Continuum Theme Options >> Reviews >> General Settings. You do not need to enter anything for the page content.
  9. Reviews - Video Games - Displays latest posts from the Video Game Reviews post type in a grid format. You can adjust settings for this template in Continuum Theme Options >> Reviews >> General Settings. You do not need to enter anything for the page content.

Tips & Additional Info

This section gives helpful tips and additional information for using Continuum, including specific nuances and quirks that affect the general functionality of Continuum which might not be obvious after having read the other sections of this guide.

Once again, thank you so much for purchasing this theme. We would be glad to help you if you have any questions relating to this theme. No guarantees, but we'll do our best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Outer Spice Web Company

Go To Table of Contents