Gameplan 1.3 - Responsive Multi-Purposes Wordpress Theme

The Documentation


For support please checkout CACTUSTHEME SUPPORT FORUM

Install and Update


 

Always remember to download the latest version from your ThemeForest account. The Installable Wordpress Themes is just the installable Wordpress theme files. The Main Files includes these following files and folders:

  • Documentation Folder - contains this document and other materials
  • Installation Files Folder - contains all installable files, including theme & plugins
    • theme/wp-theme-gameplan.zip - GamePlan theme
    • plugins/plg-gameplan-shortcodes.zip - A plugin which contains all shortcodes for theme. It contains Visual Composer plugin which helps you visually build pages
    • plugins/plg-gameplan-portfolio.zip - A plugin which enables Portfolio feature for theme
    • plugins/plg-gameplan-tribe-addons.zip - A addon plugin which works with The Event Calendar and Event Calendar Pro (highly recommended). You must install The Event Calendar plugin first before install this addon. Choose to install one (and only one) between GamePlan Event and GamePlan Tribe Addon (more features)
    • plugins/plg-gameplan-member.zip - A plugin which enables Member feature for theme
    • plugins/plg-revslider.zip - The amazing Revolution Slider which creates beautiful image sliders for your website.
  • Sample Data Folder - contains sample data files
    • gameplan-data.xml All posts, pages, menus data
    • gameplan-data.xml.gz Zip file of gameplan-data.xml
    • theme-options.txt Sample Theme Options Settings
    • widget_data.json Widget Settings
    • revslider-home-demo.zip Sample Revolution Slider
    • w3-total-cache-settings.php Settings for W3 Total Cache Plugin
  • Backup
    • plugins/plg-gameplan-event.zip - A plugin which enables Event feature for theme. This plugin will not be supported anymore. Please use The Events Calendar and Gameplan Tribe Addons instead.
 
Step 1. Log into your WordPress Admin area.
 
Step 2. Look down the left hand column for “Appearance” and then click on the word “Themes”.
 
Step 3. In the "Themes" page, click “Install Themes”
 
 
Step 4. In the "Install Themes" page, click "Upload", then click “Browse” to browse for the theme installation file in [path-to-your-downloaded-package]/Installation File/gameplan.zip). Click "Install Now".
 
Step 5. After installed successfully, click "Activate" to make the theme active
 
Step 6. Install optional plugins if needed. The four-included-plugins are optional, but we recommend to install at least GamePlan Shortcodes plugin to have full features. Navigate to Plugins > Add New to install and activate plugins. Besides, we recommend using these extra plugins (free). All has been tested and used on our demo page
  • Custom Sidebar - Allows to create your own widgetized areas and custom sidebars, and select what sidebars to use for each post or page.
  • The Events Calendar - Free but awesome Event Management plugin (highly recommended if you want an event site.
  • Contact Form 7 - Simple but flexible contact form plugin
  • Black Studio TinyMCE Widget - A WYSIWYG widget
  • TinyMCE Advanced - Enables advanced features and plugins in TinyMCE, the visual editor in WordPress
  • WP PageNavi - Adds a more advanced paging navigation to your WordPress blog. This is required if you choose in Theme Options > Blog > Pagination > Use WP-PageNavi plugin
  • Quick Flickr Widget - Display latest Flickr submissions in your sidebar
  • W3 Total Cache - A popular caching plugin for Wordpress to improve the speed and user experience of your site

Update GamePlan

Update new version is straight-forward as following steps:
All posts and settings will be saved. This is data-safe method.
 

Install Sample Data


One Click++ Install
Since Gameplan 1.2, there is One Click++ Install sample data feature. Following these quick steps to install data:
  • Step 1. Make sure you have installed all recommended plugins
  • Step 2. (Optional) As "One Click Install" feature appends data to current data, you may want to reset your site to default settings. Install and use Wordpress Reset plugin to do that
  • Step 3. Find Install Sample Data button at bottom of Appearance > Theme Options page. Click and confirm to install. Note: This process may take several minutes due to large data and hosting settings. If your server setting "Max Execution Time" is too low, increase it (as your hosting provider). Please do not close the browser until it finishes. If it fails, you can run this process again until seeing the Success message
  • Step 4. (Optional) Install Sample Revolution Slider. Go to Revolution Slider, click Import Slider and browse for /Sample-data/revslider-home-demo.zip in the full download package
  • Step 5. (Optional) If you have to run the process more than once, menu items may be duplicated. Just go to Appearance > Menus and edit Main Menu items
Manually Import
Alternatively, you have other option. In /Sample Data/ folder, you can find there are 5 files:
  • gameplan-data.xml All posts, pages, menus data
  • gameplan-data.xml.gz Zip file of gameplan-data.xml
  • theme-options.txt Sample Theme Options Settings
  • widget_data.json Widget Settings
  • revslider-home-demo.zip Sample Revolution Slider
 
Step 0. Make sure you have installed gameplan theme and all 5 related plugins (included in the package) and activated.
 
Step 1. Go to Tools > Import, then click on Wordpress
 
Step 2. If it is not yet installed before, you have to install it. On the popup window, click on "Install Now"
 
Step 3. After installed successfully, click on Activate Plugin & Run Importer
 
Step 4. Browse for [path-to-your-downloaded-package]/Installation File/Sample Data/gameplan-data.xml.gz and click Upload File and Import. If your server does not support .gz file, use gameplan-data.xml file.
 
Step 5. After uploaded, the confirmation page appears. Check the Download and import file attachments option and click Submit. If you have trouble with importing (it might breaks in the middle due to long execution time), try again with this option Unchecked! Or, try to import separate files as they are smaller
 
Step 6. After uploaded, the confirmation page appears. Check the Download and import file attachments option and click Submit
 
Step 7. When you see message "All done. Have fun!", you will know that the import is done. Note: you may need to re-import the second time if the data is large. Back to Step 1. until you see the message below
 


Step 8. Go to Settings > Reading, set Front page displays to A Static page. Choose Home page as Front page and Blog as Posts page
Step 9. Go to Appearance > Menus, choose Main Menu menu as Primary Menu
Step 10. Use Custom Sidebar plugin to create 2 sidebars named Home Next Games and Home Latest News
Step 11. Install Widget Settings Importer/Exporter and go to Tools > Widget Settings Import to import Sample-data/widget_data.json file
Step 12. Go to Option Tree > Settings > Import and paste content of Sample-Data/theme-options.txt into Theme Options text field, then click Import Theme Options button.
Step 13. OK, done!

Theme Options


GamePlan comes with a lot of options to help you totally customize the look & feel of your site. Go to Appearance > Theme Options to configure
 
1. General General settings including Style, Layout, Responsive, RTL Support, and Custom Code
 
2. Color Settings Color settings for site, text, heading and background
 
3. Font Settings Settings for Font Family and Font Size of text and heading
 
4. Social Accounts Settings for social network accounts, including Facebook, Twitter, Flickr...
 
5. Top Menu Settings for Top Menu section
 
6. Main Navigation Settings for Navigation section
 
7. Home Page Settings Settings for Home Page template
 
8. Blog Settings for Blog page
 
9. Single Post Settings for single post page
 
10. Single Page Settings for single page
 
11. Search Settings for Search Result page
 
12. 404 Settings for 404 (File-Not-Found) page
 
13. Portfolios Settings for Portfolios. Only available when GamePlan-Portfolio plugin is installed
 
14. Single Portfolio Settings for Single Portfolio page. Only available when GamePlan-Portfolio plugin is installed
 
15. Events Settings for Events. Only available when GamePlan-Event or GamePlan-Tribe-Addon plugin is installed
 

Shortcodes & Visual Composer


When GamePlan-Shortcodes plugin is installed, you will get Visual Composer mode and a full list of shortcodes. Visual Composer is a great plugin which helps you to visually build page layout. You can find full documentation of Visual Composer in [Documentation\Visual Composer] folder
 


GamePlan has a great bunch of built-in shortcodes. Below is list of GamePlan shortcodes. Most of them are in both Classic Editor and Visual Composer mode, except Button. There are two types of buttons, one in Clasic Editor (built by GamePlan) and one in Visual Composer (built-in shortcode of Visual Composer).
 
1. Icon 
 
2. DropCap 
 
3. Heading 
 
4. CheckList 
 
5. Button 
 
6. Compare/Pricing Table 
 
7. Facebook Like Button 
 
8. Tooltip 
 
9. Testimonial 
 
10. Alert 
 
11. Boxed Icon 
 
12. Carousel 
 
13. Divider 
 
14. Timeline 
 
15. Timeline Event List 
 
16. Modern Event List 
 
17. Member 
 
18. CountDown Clock 
 
19. Headline 
 
20. PromoBox 
 
21. Recent Post 
 
22. Counters 
 
23. Margin 
 
24. Portfolio 
 
And 20+ more shortcodes... 
 

Using Of Shortcodes

1. Checklist 

Checklist can be added using classic editor (OR you can add a text box shortcode to a row by using Visual Composer)
Step 1: In classic editor panel, use checklist button to add checklist shortcode. There are 2 types of checklist shortcode for you. (See image bellow)

After step 1, you will have the code for checklist as

Step 2: Add Content by using ul tag (see image bellow)


2. Compare Table 

Compare table can be added using classic editor (OR you can add a text box shortcode to a row by using Visual Composer)
Step 1: In classic editor panel, use compare table button to add checklist shortcode. There are 2 styles of compare table for you. (See image bellow)

Step 2: Adding content
Here is some note for you:


3. Other shortcodes 
Other shortcodes can be easily used via Visual Composer and/or Classic Editor.

Theme Layout


On the right is theme layout structure. Go to Appearance > Widgets and drag widgets to appropriate sidebars having the same name in the image. There are some notes below:
  • If there is no widget in sidebar, that sidebar position will be hidden
  • Navigation sidebar is optional, use it only when you want to replace default Wordpress Menu by a third-party menu widget
  • Main Sidebar only appears when a page layout is set to Sidebar Left or Sidebar Right (Layout can be set in Theme Options > Single Page or in a page when you Add New Pages & Posts). Main Sidebar can be replaced by diffent sidebars in specific pages, see Useful Tips > 3. Different Widgets for different Pages
  • Use Visual Composer to build more complex page layout. Check our Sample HomePages
  • Create Custom Sidebar if you want to have more position to add widgets. Go to Appearance > Sidebars to do that. After created, go to Apperance > Widgets to drag widgets to sidebar. To display custom sidebars, use Widgetised Sidebar element (in Visual Composer mode)

Setting Menu


Go to Appearance > Menus to manage menu items. Create a menu and set Theme location to Primary Menu. Open Screen Options and check to show CSS Classes
 
To add icons to each menu items, type a FontAwesome Icon into CSS Classes field of each menu item.

To have multiple columns for dropdown menu

Add multi-cols columns-2 for 2 columns or multi-cols columns-3 for 3 columns in CSS Classes field of parent menu items.

Setting HomePage & Blog


When first installed, your home page is blog page. To set up home page, follow the steps below
 
Step 1. Create a page named HomePage (or whatever you like). Go to Pages > Add New.

Choose Template > Full Width (no-sidebar) if you wish to have fullwidth homepage, and disable Comments on this page



If you do not see Discussion box, click on Screen Options grips on top of page and check Discussion
 
Step 2. (optional) Copy sample code for HomePage if you would like to have a quick start. Check Sample HomePages, copy and paste the code into text editor of HomePage
 


Step 3. Go to Revolution Slider menu and Create New Slider. Name it Home with alias home. Choose Full Width for this slider. Once you finish, click Create Slider to save.

If you want to have our demo slider, go back Revolution Slider > Home again, show Export/Import function and import file /Sample Data/gameplan-revslider-home-demo.txt


 
Step 4. Go to Settings > Reading and set Front page displays to A static page. Then choose appropriate Front Page (to the page you created in previous step)
 


Step 5. Go to Appearance > Theme Options > Home Page Settings. If you plan to use Revolution Slider, enter alias name of slider you have created. Rovolution Slider plugin is included in the package, you can also find documentation in [Documentation\RevSlider]. Choose Use Slider as Revolution Slider. If you just want to use a background image, set Use Slider to No Slider. In this mode, you need to upload an image as background and go to Step 6.
 
Step 6. (optional) If you do not use Revolution Slider, drag a widget to MainTop sidebar. Go to Appearance > Widget
 
Our demo Home Page is built with a lot of shortcodes. To quickly setup a home page as seen on our demo page, go to Sample HomePages section

To set up blog, follow the steps below

 
Step 1. Create a page named Blog (or whatever you like)
 
Step 2. Go to Settings > Reading and set Front page displays to A static page. Then choose appropriate Posts Page (to the page you created in previous step)
 
Step 3. Go to Appearance > Theme Options > Blog to configure your blog page.
 
Step 4. Go to Appearance > Widgets and drag widgets to Main Sidebar or Blog Sidebar if Blog Layout is set to Sidebar Left or Sidebar Right layout in previous step.
If there is any widget in Blog Sidebar, it will be used in stead of Main Sidebar
 

Add New Pages & Posts


Before reading next, see document for Visual Composer to learn how to use Rows & Columns to build page!




Although common settings for Pages can be done in Appearance > Theme Options > Single Page, each page can have its specific settings. When adding new page, there are 2 sections to setup: Page Attributes & Page Settings

Page Attributes

 Choose Page Template for this Page. There are 4 templates available

Page Settings

  • Page Sub-Heading Set text as sub-heading. Main heading is title of page
  • Background Set background for page header. It can be either color or image
  • Header Height Set height of page header (in pixels)
  • Show/hide social sharing Show or hide social buttons
  • Revolution Slider Name Alias Name of Revolution Slider if this Front Page template is chosen

Post Format

GamePlan only supports Default & Gallery Post Format

Post Settings

  • Sticky Tag Set text as sub-heading. Main heading is title of page
  • Background Set background for page header. It can be either color or image
  • Header Height Set height of page header (in pixels)
  • Show/hide social sharing Show or hide social buttons
  • Single Post Layout By default, it follows settings in Appearance > Theme Options > Single Post

Sample HomePages


If you want to faster setup homepage as seen on our demo page, you can use these sample code. Please note that it requires you to install GamePlan-Shortcodes plugin. You may also need to create a Revolution Slider wherever needed. Turn in to Classic Editor > Text mode to paste this code
There are 3 notes
  • Before continuing, go to Revolution Slider and create a new slider with Alias Name home (see Setting HomePage & Blog section)
  • Go to OptionTree > Settings > Import and import /Sample Data/gameplan-themeoptions-settings.txt to have demo settings
  • All images and background images have been replaced to solid color due to copyright issues. Upload and use your own images after building pages.
  • Home Page
    Home Page v2
    Home Page v3
    Home Page v4
    Home Page Light Version

WooCommerce Integration


Install WooCommerce

  • 1. Go to Plugins > Add New
  • 2. Type "woocommerce" in the search box and click "Search Plugins" or press Enter
  • 3. Install and activate the first result "WooCommerce - excelling eCommerce"
  • 4. Install WooCommerce Pages for the first time

Configure WooCommerce to match GamePlan

  • 1. Go to WooCommerce > Settings
  • 2. In tab "General", Check "Style and Scripts" > "Enable WooCommerce CSS"
  • 3. Set color for "Primary" and "Hightlight" property. This color should match with color setting in Gameplan (Appearance > Theme Options > Color & Background > Main Color)

    Save Changes.
  • 4. Switch to tab "Catalog", in "Image Options" section, set these values:
    • Catalog Images: 279x358px
    • Single Product Image: 410x520px
    • Product Thumbnails: 75x97px

    Save Changes.

FAQs & Other Configs


More FAQs can be found here http://cactusthemes.ticksy.com/faqs/

  1. Using Visual Composer and Shortcodes

    When adding, editing a Page or Post, turn the editor into Visual Composer mode http://d.pr/i/iSOm, add Rows and Elements into editor.
    To edit a element properties, click on the Pencil of a element to open popup form and edit properties. See screen-shot at http://d.pr/i/uFYX
  2. Using Row Background & Padding

    Row (Visual Composer mode) is the most common element you will use when editing a page or post. In GamePlan, Row has been extended to have more properties than default version in Visual Composer. Click on the Pencil icon (as seen in the right figure) to open Row Properties form.
    • Background Image Upload new image or choose from your media library to set up background for Row.
    • Background Color Choose background color for Row.
    • Padding Top Set Top Padding for Row. Default is 30px
    • Padding Bottom Set Bottom Padding for Row. Default is 30px
    • Full width If choose Yes, Padding Left and Right will be set to 0
  3. Using Padding shortcode to create horizontal space

    Padding shortcode is an empty content shortcode which does one thing: set margin top and bottom to create space between elements before and after it. Padding shortcode can be found in both Classic Editor and Visual Composer mode

  4. Different Widgets for different Pages

    This theme has prepared several sidebars for using in different pages.
    Go to Appearance > Widgets
    • Main Sidebar - Used by every pages has Left Sidebar or Right Sidebar layout.
    • Single Blog Sidebar - Used by single post pages. If there are no widgets, Main Sidebar will be used.
    • Single Event Sidebar - Used by single event pages. If there are no widgets, Main Sidebar will be used.
    • Blog Sidebar - Used by blog page. If there are no widgets, Main Sidebar will be used.
    • Event Listing Sidebar - Used by event listing page. If there are no widgets, Main Sidebar will be used.
    • Top Menu Sidebar - Used in Top Menu position (see Theme Layout).
    • Search Sidebar - Used in Search position (see Theme Layout).
    • Navigation Sidebar - Used in Navigation position (see Theme Layout). This position will be helpful if you want to use a third-party navigation widget. Widget in this position will be loaded instead of menu
    • Main Top Sidebar - Used in Main Top position (see Theme Layout). This position is used only in Home Page and when Appearance > Theme Options > Home Page Settings > Use Slider is set to No Slider
    • Body Bottom Sidebar - Used in Body Bottom position (see Theme Layout).
    • Main Bottom Sidebar - Used in Main Bottom position (see Theme Layout).
    • Copyright Sidebar - Used in Copyright position (see Theme Layout).
  5. Custom Sidebar - Unique sidebar for a specific page

    If you want a specific page to have unique sidebar (different from other pages), follow these steps:
    • Install Custom Sidebar (free) plugin
    • Go to Appearance > Custom Sidebars to create new sidebar
    • Go to Pages > edit page, enter name of sidebar you created in previous step in Custom Sidebar field of Page Settings
    • Go to Appearance > Widgets and drag widgets to that sidebar
  6. Configure Search Page

    Create a page named Search and configure layout for this page (see FAQ Custom Sidebar - Unique sidebar for a specific page). Then go to Appearance > Theme Options > Search and choose the page created before.
  7. Configure Event Page

    • Create new page and named, for example, "Events"
    • Go to Appearance > Theme Options > Events and choose "Event Listing Page" to created page in previous step
    • In the same setting page, choose "Listing Style", "Page Layout" and other settings
  8. Portfolio

    Use [portfolio] shortcode in Classic Editor or Visual Composer mode. Default settings for this shortcode is configured in Appearance > Theme Options > Portfolios. Default Settings can be overriden in each shortcode use.
  9. Change URL/Slug for Portfolio and Event

    URL to a single Event will be like this /event/your-event-name. URL to a single Portfolio will be like this /portfolio/your-portfolio-title.

    To change the word event and portfolio in the URL, go to Appearance > Theme Options > Portfolios or Appearance > Theme Options > Events and enter "Custom Slug" for them.
  10. Easter Egg - Custom Variation for Widget

    If you want to setup special style for a specific widget, use Custom Variation field to add CSS Class to widgets, then write your custom CSS code somewhere else, for example in style.css or in Appearance > Theme Options > General > Advance Code text field.

    There are some pre-defined CSS class you can use to style your widgets.
    • no-title - Hidetitle
    • dotted-style - Use dotted-line style for widget title
    • firstword - First word in widget title will be wrap by a <span> tag and has different color
    • icon-[fontawesome-icon-name] - Add a fontawesome icon in widget title
  11. Improve Site Performance

    We recommend using W3 Total Cache plugin to improve your site performance. It's totally free and super awesome. Your site performance can be increased by 30-50% with this plugin. We have configured something for this plugin. If you would like, use Performance > General Settings > Import/Export Settings, import the settings file included in the package at /Sample Data/w3-total-cache-settings.php

Translation & RTL


GamePlan is a WMPL compatible and multi-language ready theme. To translate this theme:
  • Download and install this tool POEdit
  • Open POEdit and load [/gameplan/languages/gameplan.po]
  • Translate the text and save the file
  • A file named gameplan.mo is created. Rename it with Code Name of your language. For example, de_DE.mo for German - Deutsche. See language code list here http://codex.wordpress.org/WordPress_in_Your_Language
  • Open [{wordpress root}/wp_config.php] and find this line define('WPLANG', '');. Change it with your language code, for example define('WPLANG', 'de_DE');
 
GamePlan also supports RTL - Right To Left languages. If your language is RTL, go to Apperance > Theme Options > RTL Support and choose Yes

Licenses


Used Assets

 

The list might not be complete by accident. Authors who think you owe a license in this theme, please contact us at admin@cactusthemes.com

Support


If you face problems with the installation or customization of our product please do not hesitate to contact us via our support ticket system:

http://cactusthemes.ticksy.com/