GymBase - Responsive Gym Fitness WordPress Theme
(shared on grabtemplates.com)

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

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


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']
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


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:

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

Changelog

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

© 2012 QuanticaLabs