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


Swagger Logo

Created: 1/30/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. Latest Slider
    2. Featured Slider
    3. Spotlight Slider
    4. Article Slider
    5. Category Panels
    6. Related Articles
    7. Custom Menus
    8. Writing A Review
    9. Widgets & Sidebars
    10. Shortcodes
    11. Page Templates
    12. Layout Panel
    13. Important Tips & Info

A) Getting Started - top

Summary

Swagger is best used for magazine-style blogs, but has been built with all types of websites in mind. There are tons of options available to you in the theme options pages, 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, Swagger has been built to present your website in a professional manner by default. Following are the essentials for running Swagger, 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 Swagger-Theme folder that you downloaded and find the folder named swagger. Upload this folder into your wp-content/themes/ folder and then activate it in your Wordpress admin panel under "Appearance" >> "Themes". Once Swagger is activated, you'll notice the Theme Options page under the "Appearance" menu, which is where all of the theme settings are. You'll also notice the Review Options page under the same menu which lets you create unlimited review types.



Theme Options - The 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 - There are several areas that posts can be displayed on your front page:

You can also select a unique sidebar for the front page using the Theme Options >> Front Page >> Display Sidebar options.



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. Main Menu: The right-aligned menu that sits below the Top Menu and above the header ad. This is a good place to put special pages such as login/register and contributor pages.
  3. Category Menu: The full-width menu that sits directly above the main content wrapper. This is a good place to put your categories and review types.
By default these menus will display nothing, pages, and categories, respectively. That means if you don't go in and setup the custom menus, you will have nothing in the top menu, pages in the main menu, and categories in the category menu. 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.



Setting Up Review Types - Before you can write any reviews you have to specify what your review types are. Go to Appearance >> Review Options and follow the instructions on that page to create your review types. You can create as many review types as you want, or you can use just one if you prefer. For each review type, you can specify all sorts of things like color, icon, layouts, and custom taxonomies (review-specific categories).



Writing Reviews - Once you have set up your review types you will notice the review type appear in the admin menu. Click Add New to write a new review, and then give it a title, body content, featured image, tag, and categories just like a regular post. The difference is you will also need to specify custom taxonomies and fill out the Review Info fields (these are specified when you first set up the review type).



Creating The Review "Mini-site" - Once you have setup your review types and written at least one review per review type, you are now able to create your review "mini-site". This is basically a website within your website catered just to a particular review type. To do this, create a new WordPress page and select Reviews as the page template. Then Add a new custom field named "Review Type" with a value that matches the name of your review type. For this example it is "Movie". You should always match capitalization. All the rest of the settings for the review mini-site are specified when you first set up the review type.



AJAX Thumbnail Rebuild - If you already have articles with featured images in your WordPress site before you install Swagger, you will need to resize your featured images to fit the dimensions of all the thumbnail areas used in Swagger. To easily and quickly do this, install and run the AJAX Thumbnail Rebuild plugin. After the first time you run it, you will not have to run it again since any images uploaded after you have installed Swagger will automatically be sized correctly. It only applies to images uploaded to your media library before you install Swagger. Note: if you have a lot of images it might take a while to complete - just let it work its magic and if for some reason it doesn't finish the first time feel free to run it again.

Compatibility

Swagger is built with valid XHTML. The only XHTML errors are on the single posts page and are due to the social share buttons which have supplied their own code and is not due to the way Swagger is built or caused by any code used in Swagger. It is certified compatible with Google Chrome, Mozilla Firefox, Safari, Opera, and Internet Explorer 7+. Swagger was built using Wordpress version 3.3.1, and has been tested and verified with versions 3.3+ at the time of this writing. Check the update log to see if Swagger has been updated to work with a future version of WordPress. Here are a few very minor style differences that happen in IE:

B) HTML Structure - top

Swagger 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. The backbone of every page is as follows:


<body>

    <div id="top-menu-wrapper">
    
        ...page menu, social links, search box...
    
    </div>
    
    <div id="page-wrapper">
    
        <div id="logo-bar">
        
            ...logo, main menu, header ad...
        
        </div>
        
        <div id="content-wrapper">
        
            <div id="cat-menu-wrapper">
            
                ...category/review menu...
            
            </div>
            
            <div id="latest">
            
                ...latest slider...
            
            </div>
            
            <div class="main-content-left"> ...or... <div class="main-content"> (for full-width pages)
        
                ...all page content, including featured slider, post loop, and article slider...
                
            </div>
            
            <div class="sidebar"> (only applies to non full-width pages)
            
                ...all sidebar widget content...
            
            </div>
        
        </div>
        
        <div id="footer-wrapper">
        
            ...footer widgets, copyright bar...
        
        </div>
    
    </div>

</body>

In order to create this HTML structure, each page includes the header.php and footer.php files. You will notice there is no "sidebar.php" file in Swagger. That is because there are 16 unique widget areas, and rather than creating 16 separate files - one for each widget area - the sidebars are included directly in each of the pages that they are assigned to.


C) CSS Files and Structure - top

There is a blank custom.css stylesheet included in Swagger that is called after all other stylesheets. The purpose for this stylesheet is so you can do any edits you want to the style in this file instead of editing the default stylesheets so that when you update Swagger your CSS changes will not get overwritten. You can edit this file from within the theme editor in WordPress.

Almost all theme style is located in style.css, which is commented and well-organized. There are only two exceptions to this: 1) IE specific css fixes (located in the css/ folder) and 2) jQuery plugin default styles (located in the js/js.css file). Here is the layout of the style.css file:

        
/*************************************************
css reset and general setup
*************************************************/    
The CSS reset which clears out all browser pre-defined styles for elements
        
/*************************************************
ratings
*************************************************/  
How to display the ratings (stars, numbers, letter grades, and percentages)
        
/*************************************************
section headers
*************************************************/ 
The light or dark headers that separate content sections
/*************************************************
top bar
*************************************************/
The dark grey bar full-width bar at the very top of the page
/*************************************************
header area
*************************************************/
The logo, main menu, and header ad section directly below the top bar

etc, etc.


D) JavaScript - top

Swagger imports 4 javascript files:

  1. plugins.js: All jQuery plugins used by the theme, including jQuery UI, Nivo Slider, etc. This file is minified, so in order to modify this file use the unminified version plugins-expanded.js to make changes and then minify it into plugins.js.
  2. custom.js: All custom javascript functions used by the theme. This file is also minified and is accompanied with the unminified version custom-expanded.js.
  3. customcodes.js: TinyMCE custom buttons (used only by the admin panel, not on the front-end)
  4. plusone.js: Google +1 button (external js file imported in the footer)

Following is a list of jQuery plugins used in the plugins.js file:

  1. Viewport - jQuery selectors for finding elements in viewport
  2. Mosaic - Sliding Boxes and Captions jQuery Plugin
  3. jQuery EasIng v1.1.2
  4. jQuery jCarousel plugin
  5. jQuery Cycle Plugin (with Transition Definitions)
  6. jQuery Nivo Slider v2.7.1
  7. Superfish v1.4.8 - jQuery menu widget
  8. Twitter - jQuery latest Tweets plugin
  9. Flickr - jQuery Flickr photos plugin
  10. ColorBox v1.3.16 - lightbox plugin
  11. Color picker - jQuery color palette picker

Note: The settings for most of the jQuery plugins are located in the custom.js file, but some of them are located in the footer.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 footer.php file or the js/custom.js file (use the custom-expanded.js file and then minify it into the custom.js file). For instance, if you want to change the transition method used in the "Latest" slider, you would adjust this code in the footer.php file:

//latest slider	
jQuery(function() {
    jQuery(".latest-slider").jCarouselLite({		
        ...
        easing: "easeInOutExpo",
        ...		
    });	
});

You could change it to something like this instead:

//latest slider	
jQuery(function() {
    jQuery(".latest-slider").jCarouselLite({		
        ...
        easing: "easeInOutBack",
        ...		
    });	
});

E) PNG and PSD Files - top

Every image used in the Swagger theme has a corresponding layered PNG file located in the main Swagger-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 swagger theme folder (located inside the main Swagger-Theme 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 Swagger-Theme 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 swagger theme folder (located inside the main Swagger-Theme folder that you downloaded from ThemeForest).


F) Sources and Credits - top

Swagger uses the following images, icons or other files as listed:


G) PHP Code Explanation - top

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

There are a myriad of functions in this theme, espcially dealing with creating unlimited custom review types. You can see what each function does in the oswc-post-types.php file by reading the inline comments. The majority of the rest of the functions are in the custom.php file, which is also heavily commented for ease of modification. There are no third-party plugins required to run this theme since all the functionality is already included via these php files.


H) Detailed User Guide - top

Now that you know about the specs of the theme, let's dive deeper into how it all works. If you have had some experience using Wordpress 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 the theme, 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.

Latest Slider

The latest slider works a little differently from the rest of the sliders in the theme. It is intended to display your latest article from each category or review type, instead of the usual method the rest of the sliders use, which is something like "get the most recent 5 or 10 articles with [x] tag or in [x] category". Think of the latest slider as 8 sets of 1 article, as opposed to the other sliders which would be more like 1 set of 8 articles. The reason this is important is becuase you can't just add a tag to an article to get it to show up in the latest slider. Instead, you have to specify a set of categories or review types in the theme options page. The more categories or review types you specify, the more articles will be rotated in the slider.

For review pages (pages that are within a specific review type) you can additionally specify that the latest articles should come from the primary taxonomy instead of a category or review type. Set this in the review options page, and it can be different for each review type. What this means is the slider will display the latest review from each of the specified primary taxonomies instead of general WordPress categories. Of course, if you choose taxonomy you'll need to enter in the names of your primary taxonomies instead of the names of categories in the Categories/Taxonomies Types input box for that review type in the review options page.

Keep in mind that, depending on how you setup the latest slider in your different review types, the latest slider will display different articles on your front page and regular post pages than it will display on specific review type pages. This is by design and shows the versatility of the latest slider.

The featured slider is under the latest slider, and leverages the jQuery Nivo slider plugin. The slider that displays on the home page is independant of the slider that appears on the front page of your various review mini-sites. All of the sliders require that you tag posts "featured", but the homepage slider looks at all posts regardless of review type, whereas the sliders on the front pages of your various review mini-sites only use posts that are in their respective review types.

You can only display 5 posts in each featured slider, so if you tag more than 5 posts "featured" it will use the 5 most recent posts. The width of the slider cannot be changed in the theme options, and requires that you edit code in the inc/featured.php and style.css files.

If you specify a full-width layout for any page that contains the featured slider, then the sidebar will only float to the right of the slider as opposed to the slider and the content. That means if the height of your sidebar is taller than the featured slider, it will push your post content down the page. To get around this, the theme comes with featured-specific sidebars that are unique to pages that contain featured sliders. For instance, if you create a review type named Movie, a widget panel will automatically be created called Movie Featured Sidebar, which is the sidebar that will be used on the front page of the review mini-site.

Spotlight Slider

The spotlight slider is under the featured slider and only displays on your homepage. It is a jQuery rotating panel that can display as many articles as you want. Using the Theme Options >> Front Page control panel, enter the names of the tags, categories, or the review type that you want to use to mark posts as Spotlight. You can use multiple tags or categories if you separate them using a comma, but you cannot mix and match tags and categories. You can only specify one review type. This setting does not apply if you have selected "Latest" for Type Of Posts.

Article Slider

The article slider is under the spotlight slider on your homepage, and it is above the footer on the rest of your pages. It is a jQuery rotating panel that can display as many articles as you want, and it also has left and right arrows to allow for user navigation. Using the various tabs in the Theme Options you can specify the number of articles to rotate through, tell which pages to display it on, and enter the names of the tags, categories, or review type that you want to use to mark posts as Article Slider posts. You can use multiple tags or categories if you separate them using a comma, but you cannot mix and match tags and categories. You can only specify one review type. This setting does not apply if you have selected "Latest" for Type of Posts. You can also hide this slider on a per-post and per-page basis using the Layout panel when editing a post or page.

Category Panels

The category panels are under the article slider and only display on your homepage. Each panel displays the latest x number of posts from a certain category (or review type or tag), with a larger first post and smaller subsequent posts. You can specify as many panels as you want. Using the Theme Options >> Front Page control panel, enter the slugs (not names) of the tags, categories, or review types that you want to use to mark posts as Category Panel posts. Separate tags, categories, or review types by a comma, and one Category Panel will be created for each term. You cannot mix and match tags, categories, and review types. You can specify as many terms as you want and that number of category panels will be created (they can stack on top of each other).

After each article and review there is a tabbed panel of related articles. This displays slightly different articles based on the post type, which is described below:

Reviews: First it looks for other posts in the same level taxonomies. If it finds at least one post in at least one of the assigned taxonomies, it displays that post in the related panel. If it doesn't find any, it scraps all of the current taxonomies and then goes up to the top level parent taxonomy for each of the assigned taxonomies and attempts to display posts from each of those taxonomies. If it finds at least one post in at least one of the parent taxonomies it displays that post in the related panel. If it doesn't dine any, it scraps all taxonomies altogether and looks at the assigned categories and looks for other posts in each of the assigned categories. The important thing to note here is that it cannot mix and match, meaning it can't display same-level taxonomies and parent level taxonomies and the category in separate tabs of the same related panel. The related panel is all or nothing, so it can only display one of the three possible lookups and cannot mix and match.

Regular posts: First it looks for other posts with the same tags (no parents involved here). If it finds at least one post with at least one of the assigned tags, it displays that post in the related panel. If it doesn't find any, it scraps all of the current tags and then looks based on category. So, it finds posts in all of the assigned post's categories and displays them. Again, as with reviews, you cannot mix and match - it is either all tags or all categories.

If it absolutely finds nothing, it will just display a blank related panel so that the user can see that there's supposed to be SOMETHING there, since it's not likely that a post/review will have no related taxonomies/categories/tags at all, and even if that does happen by some chance, the user can see a blank related panel and be prompted to figure out why they have nothing related. This is better than having the author box with nothing to the right of it but blank space.

Custom Menus

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. Main Menu - The right-aligned menu that sits directly below the top menu bar. This is a good place to put special pages like Login and Join.
  3. Category Manu - The full-width menu that sits directly above the main content wrapper. This is a good place to put your review types and 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.



Writing A Review

The following screenshot shows the necessary input fields to create a full review. You can also add categories and tags just like you would with normal posts. The meta fields, rating criteria, and custom taxonomies are all based on the options you specify for the review type in the Review Options panel. Notice that the Excerpt is used as the content for the "Our Review" overview excerpt at the bottom of the summary panel.

Widgets & Sidebars

The theme comes standard with 10 custom widgets and 11 widget panels which allow you to place different widgets on different pages. Additionally, each review type you create adds two more widget panels, giving you a potentially unlimited number of widget panels. 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 "Extended:". 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

The theme comes with 80 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, it's easy to add them to post content because there is a visual button in the post editor for each shortcode. 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, and description:

Name Shortcode Description
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
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)
Content Slider [slider]
  • [pane]...[/pane]
  • [pane]...[/pane]
  • [pane]...[/pane]
[/slider]
Same as tabs, except the content in each pane will be in a slider panel instead of a tab.
Signoff 1 [signoff1] Adds the text from the Signoff 1 option (theme options >> miscellaneous tab) inside a styled box with a nice "info" icon
Signoff 2 [signoff2] Adds the text from the Signoff 2 option (theme options >> miscellaneous tab) inside a styled box with a nice "info" icon
Signoff 3 [signoff3] Adds the text from the Signoff 3 option (theme options >> miscellaneous tab) inside a styled box with a nice "info" icon
Boxes Puts content into a styled box container
Light Box [box_light]...[/box_light]
Dark Box [box_dark]...[/box_dark]
Info Box [box_info]...[/box_info]
Download Box [box_download]...[/box_download]
Help Box [box_help]...[/box_help]
Success Box [box_success]...[/box_success]
Alert Box [box_alert]...[/box_alert]
Tip Box [box_tip]...[/box_tip]
Error Box [box_error]...[/box_error]
Warning Box [box_warning]...[/box_warning]
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 4 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. You can adjust certain elements of these pages in the Theme Options and also customize specific pages using the Layout panel on the page edit screen.
  2. Authors Page - Lists all authors inside styled panels on the left with a sidebar on the right. You can adjust settings for this page in the Theme Options >> Other Pages >> Authors Page and also customize specific pages using the Layout panel on the page edit screen. You do not need to enter anything for the page content.
  3. Full Width Page - Same as Default Template except it does not display the sidebar on the right. Uses the same settings from the Theme Options as the Default Template.
  4. Reviews - Displays a "mini-site" of posts just in that review type. IMPORTANT: In order to specify which review type a page refers to, add a new custom field named "Review Type" (no quotes) with the review type name as the value (the review type name is what you specified when you created the review in the Review Options page).

Layout Panel

The layout panel exists on every post and page underneath the post content editor. You can adjust the individual post/page layout using this panel.

Important Tips & Info

This section gives helpful tips and additional information for using the theme, including specific nuances and quirks that affect the general functionality 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