- About
- CSS Styles
- Structure
- JS Files
- Shortcodes
- Widgets
- Languages
- Credits
- Changelog
- Support

# GymBase - Responsive Gym Fitness WordPress Theme

GymBase is a gym fitness WordPress theme designed in a minimalist style. It has a responsive layout that looks great on mobile and tablet devices. The main point of focus is represented by home page slider which scales down automatically depending on your screen resolution. Theme contains blog page with comments, filterable portfolio with details page, responsive timetable page, classes based on accordion page and contact page with map of location and working contact form.

Theme Features

- Responsive design
- jQuery Powered
- Home page template
- Blog template
- Full width template
- Timetable shortcode
- Filterable gallery
- Pack of shortcodes included
- 7 sidebars (widget areas)
- 9 build-in widgets
- Fully customizable
- Built in color picker to customize the theme colors
- Over 800 fonts variants to choose
- 4 custom post types (classes, weekdays, trainers, gallery)
- Working contact form
- Map of location
- Latest Tweets
- Social icons included
- Valid HTML5 code
- Font Face Fonts
- Documentation included

#### Instructional Videos

- Activate and Import dummy-content, you will need for this 2 free plugins: WordPress Importer and Widget Settings Importer/Exporter
- Set theme options
- Set the blog page
- Add class
- Configure widgets

Please note: For importing dummy-content from live preview/demo page you need two files: gymbase-content.xml and widget_data.json. You can find both in zip archive downloaded from ThemeForest.

#### Need HTML (non - WordPress) version?

There is also HTML version of this theme available. You can find it here: Responsive Gym Fitness Template

# CSS Styles

The project uses the following cascade of theme styles (in order):

- jquery.qtip.css - default styles for tooltips (overwritten in style.css),
- superfish.css - default styles for superfish menu,
- fancybox/jquery.fancybox.css - default styles for fancybox,
- style.css - base styles for the entire project,
- responsive.css - styles for responsive design (you can disable it under Appearance->Theme Options),
- reset.css - styles which resets default browsers styles.

# Theme Structure

Project is divided by four main files: index.php, header.php, footer.php and functions.php

#### index.php

It's main project file which calls other. It contains get_header and get_footer calls.

#### header.php

The file contains head section of the html tree structure. You can find here also wp_head call.

#### footer.php

The file contains bottom part of the page, including copyright area and footer area. You can find here also wp_footer call.

#### funstions.php

The file contains definition/includes of the functions for:

- widgets,
- shortcodes,
- sidebars,
- ajax calls,
- load javascript and css files,
- base configuration,
- menu generation,
- custom meta box and options pages.

# Javascript Files

#### Plugins and library

- JavaScript Linkify v0.3 (minified) - http://benalman.com/projects/javascript-linkify/,
- jQuery v1.7.2 (minified) - jQuery JavaScript Library, http://jquery.com/,
- jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/,
- Isotope v1.5.19 - An exquisite jQuery plugin for magical layouts http://isotope.metafizzy.co,
- jQuery blockUI v2.42 - http://malsup.com/jquery/block/,
- jQuery bxSlider v3.0 - http://bxslider.com/,
- qTip2 (minified) - Pretty powerful tooltips, http://craigsworks.com/projects/qtip2/,
- jQuery FancyBox v1.3.4 - Simple and fancy lightbox alternative, http://fancybox.net/,
- jQuery timeago - Plugin that makes it easy to support automatically updating fuzzy timestamps, http://timeago.yarp.com/,
- jQuery UI 1.8.21 (custom) - jQuery User Interface plugin used for tabs and accordions, http://jqueryui.com/,
- jQuery BBQ v1.2.1, Plugin which provide support for browser histry, http://benalman.com/projects/jquery-bbq-plugin/,
- jQuery carouFredSel v5.6.1 - caroufredsel.frebsite.nl.

#### Other files

- jquery.hint.js - script which supports hints on form inputs,
- main.js - script contains all executable instructions of jquery plugins, events handlers etc.

# Shortcodes

#### Timetable

You can display timetable with your classes by using below shortcode:

    [timetable]

Shortcode can also display tabs for each class, so users be able to display hours from certain class. Please use class slug/slugs in class parameter. Examples:

    [timetable class='gym-fitness,indoor-cycling,yoga-pilates,cardio-fitness,boxing']

    [timetable class='indoor-cycling']

You can also set url to classes page, where user will be redirected after click on class name (default is home_url/classes):

    [timetable classes_url='http://yourdomain.com/classes-page' class='indoor-cycling']

Available shortcode parameters:

Parameter | Possible values | Description
--- | --- | ---
mode | 12h 'empty' | Specifies timetable hour display mode. Use mode='12h' for 12 hours (am/pm) mode or leave empty for 24 hours mode. Example:
    [timetable mode='12h' class='gym-fitness,indoor-cycling,yoga-pilates,cardio-fitness,boxing']
class |  | Specifies the classes tabs with ability to filter with. Example:
    [timetable class='gym-fitness,indoor-cycling,yoga-pilates,cardio-fitness,boxing']
hour_category |  | Specifies the hours category/categories from which classes hours will be displayed. This category/categories can be assigned to class hours under 'Class hours' box on class add/edit page. Example:
    [classes hour_category='category1,category2']
classes_url | home_url/classes | Specifies the classes page url. Example:
    [timetable classes_url='http://yourdomain.com/classes-page']
filter_style | dropdown_list | Specifies the classes categories style. By default they will be displayed as tabs, when using dropdown_list value they will be displayed as select dropdown list.

#### Classes

You can display classes accordion by using below shortcode:

    [classes]

Shortcode can display classes from certain category/categories. Please use category parameter for that. Examples:

    [classes category='gym-fitness,indoor-cycling,yoga-pilates']

    [classes category='indoor-cycling']

You can also set url to timetable page, where user will be redirected after click on 'Timetable' button/tab (default is home_url/timetable):

    [classes timetable_url='http://yourdomain.com/timetable-page' order='DESC']

Available shortcode parameters:

Parameter | Possible values | Description
--- | --- | ---
category |  | Specifies the category/categories from which classes will be displayed. Example:
    [classes category='gym-fitness,indoor-cycling,yoga-pilates']
timetable_url | home_url/timetable | Specifies the timetable page url. Example:
    [classes timetable_url='http://yourdomain.com/timetable-page']
order | ASC | Specifies the order in which the classes will be displayed. Example:
    [classes order='DESC']

#### Trainers

You can display trainers by using below shortcode:

    [trainers]

Shortcode can display trainers from certain category/categories. Please use category parameter for that. Examples:

    [trainers category='gym-fitness,indoor-cycling,yoga-pilates']

    [trainers category='indoor-cycling']

Available shortcode parameters:

Parameter | Possible values | Description
--- | --- | ---
category |  | Specifies the category/categories from which trainers will be displayed. Example:
    [trainers category='gym-fitness,indoor-cycling,yoga-pilates']

#### Lists shortcodes

GymBase offers 2 type of list: standard list and scrolling list. You can use it with [scrolling_list] and [items_list] shortcodes. Examples:

    [items_list color='light_green' class='margin_top clearfix']
    	[item icon='card_white' value='$ 5.95']One Time Entry[/item]
    	[item icon='card_white' value='$ 30.25']Weekly Card[/item]
    	[item icon='card_white' value='$ 90.95']Monthly Card[/item]
    	[item icon='card_white' value='$ 790.95']Annual Card[/item]
    [/items_list]

    [scrolling_list title='Scrolling List' id='some_id']
    	[item]One Time Entry[/item]
    	[item]Weekly Card[/item]
    	[item]Monthly Card[/item]
    	[item]Annual Card[/item]
    [/scrolling_list]

Available [items_list] shortcode parameters:

Parameter | Possible values | Description
--- | --- | ---
class |  | Specifies the custom css class for the list.
color | light_green green gray dark | Specifies the list color.
type | normal simple | Specifies the type of the list. Use simple for create lists without padding between items. Example:
    [items_list type='simple']
    	[item icon='small_arrow right_white']Lorem ipsum pheretra interdurum[/item]
    	[item icon='small_arrow right_white']Suspendise venis[/item]
    [/items_list]

Available [scrolling_list] shortcode parameters:

Parameter | Possible values | Description
--- | --- | ---
title |  | Specifies the title of the list.
id |  | Specifies the id of the list.

Available [item] shortcode parameters:

Parameter | Possible values | Description
--- | --- | ---
icon | small_arrow left_black small_arrow right_black small_arrow margin_right_black small_arrow left_white small_arrow right_white small_arrow margin_right_white small_arrow top_white clock_green clock_black card_green card_white small_arrow top_black | Specifies the icon of the list item.
value |  | Specifies the value of the list item.
border_color | 'hex color value' none | Specifies the color of bottom item border. Please set border_color='none' for no border.
text_color |  | Specifies the color of item text (hex value without leading '#').
value_color |  | Specifies the color of item value (hex value without leading '#').

#### Columns

You can create columns layout with [columns] shortcode. Example:

    [columns]
    	[column_left]
    		[box_header]Column left title[/box_header]
    		Column left content
    	[/column_left]
    	[column_right]
    		[box_header]Column right title[/box_header]
    		Column right content
    	[/column_right]
    [/columns]

Available [columns] shortcode parameters:

Parameter | Possible values | Description
--- | --- | ---
class | full_width | Specifies the custom class for the columns layout. If you would like to have the columns of the full page width, please use full_width class. Example:
    [columns class='full_width page_margin_top']
    	[column_left]
    		[box_header]Column left title[/box_header]
    		Column left content
    	[/column_left]
    	[column_right]
    		[box_header]Column right title[/box_header]
    		Column right content
    	[/column_right]
    [/columns]

#### Latest News

You can display latest post with [latest_news] shortcode. Example:

    [latest_news count='3' order='DESC' category='gym-fitness,boxing']

Available [latest_news] shortcode parameters:

Parameter | Possible values | Description
--- | --- | ---
count |  | The number of news to display
order | DESC ASC | The number of news to display
category |  | The category slug/slugs from which posts should be displayed.

#### Contact form

This project includes a contact form ready for use.
All you need is to configure some constants located under Appearance->Theme Options->Contact Form admin area submenu position. Then you can use in page content below shortcode:

    [gymbase_contact_form]

#### Google Map & Contact info/details

GymBase includes also Google Map shortcode.
It can be added to the page with [gymbase_map] shortcode. Example:

    [gymbase_map class='contact_details_map' lat='-37.732304' lng='144.868641' zoom='12' marker_lat='-37.732304' marker_lng='144.868641']

You can use this tool to designate your lat & lng location coordinates.

Available shortcode parameters:

Parameter | Possible values | Description
--- | --- | ---
id | map | Specifies the identifier of the map. Should be unique for each map, if they are displayed in the same page.
class | contact_details_map | Specifies custom class for the map container.
map_type | ROADMAP SATELLITE HYBRID TERRAIN | Specifies the type of map display view.
lat |  | Specifies the latitude coordinate of the map center point.
lng |  | Specifies the longitude coordinate of the map center point.
marker_lat |  | Specifies the latitude coordinate of the map marker.
marker_lng |  | Specifies the longitude coordinate of the map marker.
zoom |  | Specifies the zoom value (number) for the map.
streetviewcontrol | false true | Specifies if the map should have street view control icons.
maptypecontrol | false true | Specifies if the map should have map type control icons.
icon_url |  | Specifies the path to marker icon file.
icon_width |  | Specifies the marker icon width (in pixels).
icon_height |  | Specifies the marker icon height (in pixels).
icon_anchor_x |  | Specifies the marker icon x anchor (in pixels).
icon_anchor_y |  | Specifies the marker icon y anchor (in pixels).

There are also contact details shortcodes.
It can be added to the page with [contact_info] shortcode and [contact_details] shortcode. Example:

    [contact_info]
    	[contact_details]
    		33 Farlane Street
    		Keilor East VIC 3033
    		Australia
    	[/contact_details]
    	[gymbase_map]
    [/contact_info]

You can configure [contact_details] shortcode under Appearance->Theme Options->Contact Details admin area submenu position.
To reach nice looking contact details part of the page please put [contact_details] and [gymbase_map] shortcodes into [contact_info] shortcode.

#### Accordion

Accordion can be added to the page with [accordion] shortcode. Example:

    [accordion width='200']
    	[accordion_item id='item-1' header='Accordion 1' subheader='Subheader 1']Test content[/accordion_item]
    	[accordion_item id='item-2' header='Accordion 2']Test content 2[/accordion_item]
    [/accordion]

Available [accordion] shortcode parameters:

Parameter | Description
--- | ---
width | Specifies the width of the accordion in pixels.

Available [accordion_item] shortcode parameters:

Parameter | Description
--- | ---
id | Specifies the identifier of the accordion item. Required
header | Text for the header of the accordion item.
subheader | Text for the subheader of the accordion item.

#### Tabs

Tabs can be added to the page with [tabs] shortcode. Example:

    [tabs width='300']
    	[tabs_navigation]
    		[tab id='tab-1']Tab 1 title[/tab]
    		[tab id='tab-2']Tab 2 title[/tab]
    	[/tabs_navigation]
    	[tab_content id='tab-1']Tab 1 content[/tab_content]
    	[tab_content id='tab-2']Tab 2 content[/tab_content]
    [/tabs]

Available [tabs] shortcode parameters:

Parameter | Description
--- | ---
width | Specifies the width of the accordion in pixels.

Available [tab] shortcode parameters:

Parameter | Description
--- | ---
id | Specifies the identifier of the tab navigation item. Required. Should match id of the one of the [tab_content] shortcodes.

Available [tab_content] shortcode parameters:

Parameter | Description
--- | ---
id | Specifies the identifier of the tab content container. Required. Should match id of the one of the [tab] shortcodes.

# Widgets

There are 9 build in widgets:

- Home Box,
- Footer Box,
- Upcoming Classes,
- Classes Accordion,
- Contact Details Box,
- Scrolling Most Commented Posts,
- Scrolling Most Viewed Posts,
- Scrolling Recent Posts.
- Twitter Feed.

You can see how to configure widgets on this video.

# Languages

Theme supports translations. To create your language translation, please download this usefull tool Poedit. Then find in languages directory default.po file and open it in Poedit. Translate appropriate texts and save the file giving it appropriate name (check here for more). For example French: fr_FR, German: de_DE, etc.
The last step is setting the language in wp-config.php file. Please open it and find (or add if it doesn't exists) below line:

    define ('WPLANG', '');

Then set your language, for example French:

    define ('WPLANG', 'fr_FR');

That's all.

# Credits

#### Fonts used

- Droid Sans By Steve Matteson, Apache License, version 2.0
  http://www.google.com/webfonts/specimen/Droid+Sans,
- Droid Serif By Steve Matteson, Apache License, version 2.0
  http://www.google.com/webfonts/specimen/Droid+Serif,
- Arial - default system font.

#### Icons

All icons by QuanticaLabs. Icons are an integral part of this template, please do not use it separately for other purposes.

#### Images

Images that are an integral part of this template, please do not use it separately for other purposes:

- Fitness young woman on gym bike spinning By CandyBoxImages
  http://photodune.net/item/fitness-young-woman-on-gym-bike-spinning/350646,
- Dumbbells in a row By IS2
  http://photodune.net/item/dumbbells-in-a-row/960939,
- bodybuilder man doing biceps muscle exercises By kadmy
  http://photodune.net/item/bodybuilder-man-doing-biceps-muscle-exercises/2321595.

Images under creative commons attribution 2.0 generic (CC BY 2.0) for commercial use:

- love your body - 2 By lululemon athletica
  http://www.flickr.com/photos/lululemonathletica/4906334228/,
- love your body - 3 By lululemon athletica
  http://www.flickr.com/photos/lululemonathletica/4906335200/,
- Salutation Nation - 077 By lululemon athletica
  http://www.flickr.com/photos/lululemonathletica/4870445028/,
- Salutation Nation - 108 By lululemon athletica
  http://www.flickr.com/photos/lululemonathletica/4869847135/,
- Salutation Nation - 094 By lululemon athletica
  http://www.flickr.com/photos/lululemonathletica/4869840809/,
- Rolling By sportsandsocial
  http://www.flickr.com/photos/sportsandsocial/2944270197,
- Free weights By sportsandsocial
  http://www.flickr.com/photos/sportsandsocial/2945528496/.

# Changelog

13 June 2013, ver. 6.8

- Twitter widget update (Twitter API 1.1 compatibility)

    functions.php
    js/main.js
    widgets/widget-twitter.php
    --- new files ---
    libraries directory added
    -- removed files ---
    js/jquery.linkify.js

15 May 2013, ver. 6.7

- Fix for contact form (js error when publishing first comment)
- Fix for body text color
- Fix for text translation

    custom_colors.php
    search.php
    single.php
    js/main.js

- Fix for text translation

    search.php
    single.php

29 March 2013, ver. 6.6

- Fix for pagination in comments

    comments-form.php
    js/main.js

28 March 2013, ver. 6.5

- Fix for 'posted by' in search results
- Fix for pagination in comments

    functions.php
    search.php
    js/main.js

15 March 2013, ver. 6.4

- Fix for port settings in SMTP configuration of contact form

    contact_form.php

14 March 2013, ver. 6.3

- Fix for not showing icons bug

    style.css

14 March 2013, ver. 6.2

- Timetable update (displays only weekdays added under 'Weekdays' submenu)
- Main css styles moved from style/style.css file to root style.css file

    functions.php
    shortcodes/timetable.php
    --- removed files ---
    style/style.css
    --- moved files ---
    style/custom.css -> custom.css

04 March 2013, ver. 6.1

- Align images classes added in styles
- Single templates for trainers and classes added
- Fix for not validated uppercase email addresses in contact form
- Fix for unescaped search query

    contact_form.php
    search.php
    style/style.css
    --- new files ---
    single-classes.php
    single-trainers.php

25 February 2013, ver. 6.0

- Fix for submenu background color option
- Fix for overflowing tooltip text when grouping classes in timetable)
- Fix for google map aligment bug in Chrome

    custom_colors.php
    main.js
    timetable.php
    admin/js/theme_admin.js
    style/style.css

14 February 2013, ver. 5.9

- Fix for localization time function in posts

    single.php
    template-blog.php
    shortcodes/latest-news.php

13 February 2013, ver. 5.8

- Change gallery class to prevent conflict with other galleries
- Localization for time function in posts
- Other small inprovements

    post-type-gallery.php
    post-type-trainers.php
    template-blog.php
    single.php
    js/main.js
    shortcodes/latest-news.php
    style/style.css
    style/responsive.css
    widgets/widget-scrolling-recent-posts.php
    widgets/widget-scrolling-most-commented.php
    widgets/widget-scrolling-most-viewed.php

06 February 2013, ver. 5.7

- Text color settings for gallery box added
- onChange event support in Theme Options colors settings

    theme_admin.js
    theme-options.php
    custom_colors.php

30 January 2013, ver. 5.6

- Fix for '0' content in 'before_hour_text' and 'after_hour_text' fields

29 January 2013, ver. 5.5

- Fix for wrong displayed 'posted by' information

28 January 2013, ver. 5.4

- Tooltips for classes in timetable added
- Ability to assign trainers and categories to classes hours in timetable added
- New 'hour_category' parameter for [timetable] shortcode added

22 January 2013, ver. 5.3

- Fix for php warning on trainers page

16 January 2013, ver. 5.2

- Fix for tabs in classes (wrong tab has been opened after browser window reload)
- New Theme Options design
- Timezone setting for 'Upcoming Classes' widget

7 January 2013, ver. 5.1

- Fix for timetable button in classes
- Option to choose 'database' or 'server' time in 'Upcoming Classes' widget

17 December 2012, ver. 5.0

- Fix for filtering in gallery in WP 4.5

11 December 2012, ver. 4.9

- Compatibility with PHP 5.4.9

12 November 2012, ver. 4.8

- Categories for Trainers added

06 November 2012, ver. 4.7

- Ability to set different colors for each class box in timetable
- Categories for classes added

31 October 2012, ver. 4.6

- Link for classes page added in 'Upcoming Classes' widget

30 October 2012, ver. 4.5

- Fix for archives and categories pages titles

18 October 2012, ver. 4.4

- 12h hours mode (am/pm) option added for Upcoming Classes widget

17 October 2012, ver. 4.3

- Fix for Twitter feed issue in IE

15 October 2012, ver. 4.2

- 12h hours mode (am/pm) option added for timetable

12 October 2012, ver. 4.1

- Fix for Twitter feed issue
- Support for internationals characters in classes accordion and timetable tabs

24 September 2012, ver. 4.0

- Small code and styles improvements, few color options added

19 September 2012, ver. 3.9

- Information in upcoming classes widget when no classes found

12 September 2012, ver. 3.8

- New widget area (header-top)
- Social icons widget added

10 September 2012, ver. 3.7

- Small css and code fixes

06 September 2012, ver. 3.6

- Fix for timetable 'class' parameter

04 September 2012, ver. 3.5

- Check 'if published' for classes added

31 August 2012, ver. 3.4

- Comments settings bug fix

30 August 2012, ver. 3.3

- Small css upgrades

28 August 2012, ver. 3.2

- Bug fix - accordion colors settings doesn't work

27 August 2012, ver. 3.1

- Jumping slider title issue fix

21 August 2012, ver. 3.0

- Tabs and Accordion shortcodes added
- Bug with default WordPress content formatting fix

10 August 2012, ver. 2.0

- Color picker to customize the theme colors added
- Over 800 fonts variants to choose added
- New options in widgets configuration added

08 August 2012, ver. 1.4

- Fix for Classes Accordion widget (urls won't works for some permalinks structures)

02 August 2012, ver. 1.3

- Slider issue fix (image wasn't centered)
- CSS improvements

31 July 2012, ver. 1.2

- Bug fix for classes hours

30 July 2012, ver. 1.1

- Bug fix for weekdays in 'Class hours' section

27 July 2012, ver. 1.0

- First release

# Support

Support for all our items is conducted through our Support Forum.
Please register an account and search the forum or create a new topic, we'll answer as soon as possible.
We're in GMT +1 and we aim to answer all questions within 24 hours (Monday – Friday). In some cases the waiting time can be extended to 48 hours.
Support requests sent during weekends or public holidays will be processed on next Monday or the next business day.

#### Need HTML (non - WordPress) version?

There is also HTML version of this theme available. You can find it here: Responsive Gym Fitness Template