GymBase - Gym Fitness WordPress Theme

Dedicated for webmasters seeking to establish an online home for a fitness center, Gymbase is the most popular and #1 selling gym WordPress Theme. Uniquely suited to work with fitness center and gym websites, Gymbase combines not only a vibrant, and professional visual styling but a number of niche market features such as Build-In Schedule Manager.
Gymbase layout is responsive and retina-ready, every single theme component has been tested to display perfectly on any device. Add to that uncomplicated and hassle-free initial setup as it involves a single-click demo content importer. Moreover, the integrated premium Slider Revolution and WPBakery drag & drop page builder requiring absolutely no coding knowledge and gives you total control over your website’s look and feel. Additionally, introduce your classes in a modern way and let your clients meet your staff and trainers. The built-in filterable and multi-column gallery will allow you to present your gym in the best possible way. This is by far one of our most polished products and we highly recommend it to anyone because thousands of users tested and proven this theme to deliver outstanding results for gyms and sports centers.

Theme Features

  • Responsive design
  • jQuery Powered
  • Cost Calculator For WordPress (Value of $39) Included
  • Slider Revolution Responsive WordPress Plugin (Value of $109) Included
  • WPBakery Page Builder for WordPress (Value of $99) Included
  • Streamline Premium Icon Font with 90+ Icons (Value of $69) Included
  • Build-In Schedule (Timetable) Manager
  • 50+ Page Builder Components Including 25+ Custom Made
  • One Click Demo Content Importer
  • Theme Options Panel
  • WooCommerce Integration
  • Theme Color Picker
  • Sticky Menu
  • Mobile Touch Friendly
  • Ajax Contact Form
  • Isotope Gallery
  • Parallax Backgrounds
  • Google Location Map
  • 800+ Google Fonts to Choose From
  • WPML Compatible. Translation Ready With Mo/Po Files
  • Unlimited Menus & Sidebars
  • Page Templates
    • Home Style 1
    • Home Style 2
    • Blog
    • Single Post
    • Search Template
    • About Us
    • Team
    • Single Team Member
    • Our Classes
    • Our Classes Style 2
    • Single Class
    • Gallery 2 Columns
    • Gallery 2 Columns Style 2
    • Gallery 3 Columns
    • Gallery 3 Columns Style 2
    • Gallery 4 Columns
    • Gallery 4 Columns Style 2
    • Daily Calorie Needs
    • Body Mass Index
    • Membership Pricing
    • 404 Not Found
    • Timetable
    • Contact Style 1
    • Contact Style 2
  • Social Icons Font with 33 Icons to Choose From
  • PSD Files Included (Please Contact Us to Receive Perfectly Organized PSD Files)
  • Documentation Included
  • Retina Ready
  • Valid HTML5 Code
  • Crossbrowser Compatible
  • Clean Design

Instructional Videos


Need HTML (non - WordPress) version?

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

Getting Started

1. Downloading theme archive

To install GymBase on your WordPress website, you need to download the theme archive file from your Downloads section on ThemeForest. Downloaded archive will look like this 'themeforest-TcOFFSgY-gymbase-responsive-gym-fitness-wordpress-theme.zip'. Please unzip this file and inside you will find 'gymbase.zip' archive (screenshot) which contains all theme files necessary to install the theme.



2. Theme installation

Please login to your WP dashboard and go to 'Appearance->Themes' panel, over there you can use the 'Add New' option to install new themes. Click on 'Upload Theme' button located at the top left corner of the screen (near the 'Add Themes' page title, screenshot) and select the 'gymbase.zip' file from your computer, now use the 'Install Now' button and if everything goes right, you should notice 'Theme installed successfully' message (screenshot), after that you can activate the theme.



3. Plugins installation

Once the theme is active, you need to install required plugins, you can do that in 'Appearance->Install Plugins' panel. After installation please activate plugins if necessary.



4. Dummy data import

The last thing is to import the dummy data, this will create sample content and configure your WordPress settings, making your website look exactly as in our preview version. This step is optional, you don't need to install dummy content if you don't need it but it will help you to see how content has been configured on demo site, you can also take it as a base for your customized website. To do this, please go to 'Appearance->Theme Options' panel and click on 'Import dummy content' button, please remember that this can take some time, so you should wait until the confirmation message is displayed (screenshot). After that, your website will be ready and now you can start adding your own content or customize the theme. All steps from the dummy content process can be viewed on this instructional video.

CSS Styles

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

  • animations.css - styles for animated elements,
  • jquery.qtip.css - default styles for tooltips (overwritten in style.css),
  • odometer-theme-default.css - styles for Odometer smoothly transitioning numbers plugin,
  • superfish.css - default styles for superfish menu,
  • prettyPhoto.css - default styles for prettyPhoto lightbox,
  • 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.


Javascript Files

Plugins and library


Other files:

  • jquery.hint.js - script which supports hints/placeholders for form fields,
  • main.js - script contains all executable instructions of jquery plugins, events handlers etc.

How To?

1. How to install GymBase theme?

Please read our Getting Started guide, it presents step-by-step instructions on how to install the theme. Alternatively you can install theme manually. In that case please connect with your FTP account using FTP client like FileZilla and now upload the unpacked theme directory to the 'wp-content/themes/' subdirectory, after that, you can activate it in Themes panel of WP dashboard.



2. What is the correct way to update the theme?

To update the theme you need to download its latest version from ThemeForest downloads page. Now there are two ways to update the theme, if you don't have any custom modifications then you can simply remove the old theme version from admin panel and install new one on 'Appearance->Themes' page. Otherwise, if you want to keep some theme files, which were modified, then you need to update it manually. Please unpack the downloaded theme archive, login to your FTP account using FTP client (e.g. FileZilla) and replace the current theme files by uploading the newest ones. If your theme has custom modifications then you can upload only those files which were changed in theme update, you can check those files in the documentation that's included in theme directory(Changelog section). This way you can keep most(or even all) of your modifications after the update.



3. How can I update the WPBakery Page Builder plugin?

Firstly you must update your theme to the latest version, which includes new version of WPBakery Page Builder plugin.
Now if you use WordPress MultiSite installation, then just go to 'Network->Plugins' panel and delete the 'WPBakery Page Builder' plugin. Login once again to your website dashboard and you will be asked to install the WPBakery plugin, follow the instructions and the update will be complete.
For standard WordPress installation, please login to your FTP account and go to 'wp-content/plugins/' subdirectory and delete entire 'js_composer/' folder, after that visit your WordPress dashboard. You should notice new message at the top of a screen, that asks you to install the required plugin, follow the instructions and the WPBakery Page Builder plugin will be installed.



4. How can I setup a Child Theme?

To setup a child theme please first install the theme and import dummy data, instructions can be found here. Now you need to create a new folder in '/wp-content/themes/' subdirectory, you can name it 'gymbase-child' and then add two files: style.css and functions.php. In 'style.css' file please use below code:

/*
Theme Name:   GymBase Child
Description:  GymBase Child Theme
Template:     gymbase
Version:      1.0
Text Domain:  gymbase
*/

above code includes basic details about your child theme, you can edit above information as you like. For the second file 'functions.php' please use this code:
<?php
function child_theme_enqueue_styles() {
	wp_enqueue_style("parent-style", get_template_directory_uri() . "/style.css", array("reset", "superfish", "prettyPhoto", "jquery-qtip", "odometer"));
}
add_action("wp_enqueue_scripts", "child_theme_enqueue_styles");

above code loads the styles of parent gymbase theme. Now in your WP dashboard go to Themes panel and activate the 'GymBase Child' theme, you will also need to activate the WPBakery Page Builder plugin and it is possible that WordPress will deactivate widgets and main menu, so you will need to re-assign them in Widgets and Menus panel. After that your child theme should be working correctly. More details about Child Themes can be found here: https://codex.wordpress.org/Child_Themes



5. How can I translate the theme?

Theme supports translations. To create your language translation, please download this usefull tool Poedit. Then find in languages directory gymbase.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');



6. How can I control the single post layout?

If you have imported dummy content you should see 'Single Post Template' page under 'Pages' admin menu. Please edit it using WPBakery Page Builder editor to control single post layout.

If you haven't imported dummy content you can create this template from scratch. To do that please add new page: 'Pages->Add New'. Name it 'Single Post Template' and select 'Single post' template for it under 'Page Attributes' box (screenshot). After that please switch content editor to WPBakery Page Builder by clicking 'Backend Editor' button and click on 'Templates' button (screenshot). The templates popup will be displayed, please select 'Default templates' tab from it (screenshot). Find 'Single Post Template' on the list and click on it (screenshot). Close the 'Templates' window. Template is ready, please publish it (screenshot) and from now you can edit it to control single post layout.



7. How can I control the blog layout?

If you have imported dummy content you should see 'Blog Template' page under 'Pages' admin menu. Please edit it using WPBakery Page Builder editor to control blog layout.

If you haven't imported dummy content you can create this template from scratch. To do that please follow the instructions from point 6 (How can I control the single post layout?) but name the page 'Blog Template' and select 'Blog' template for it under 'Page Attributes' box (screenshot). Please also use the 'Blog Template' as base for it (screenshot).



8. How can I control the search results page layout?

If you have imported dummy content you should see 'Search Template' page under 'Pages' admin menu. Please edit it using WPBakery Page Builder editor to control search results page layout.

If you haven't imported dummy content you can create this template from scratch. To do that please follow the instructions from point 6 (How can I control the single post layout?) but name the page 'Search Page Template' and select 'Search' template for it under 'Page Attributes' box (screenshot). Please also use the 'Search Template' as base for it (screenshot).



9. How can I control the single class page layout?

If you have imported dummy content you should see 'Single Class Template' page under 'Pages' admin menu. Please edit it using WPBakery Page Builder editor to control single class page layout.

If you haven't imported dummy content you can create this template from scratch. To do that please follow the instructions from point 6 (How can I control the single post layout?) but name the page 'Single Class Template' and select 'Class' template for it under 'Page Attributes' box (screenshot). Please also use the 'Single Project Template' as base for it (screenshot).



10. How can I control the single gallery page layout?

If you have imported dummy content you should see 'Single Gallery Template' page under 'Pages' admin menu. Please edit it using WPBakery Page Builder editor to control single gallery page layout.

If you haven't imported dummy content you can create this template from scratch. To do that please follow the instructions from point 6 (How can I control the single post layout?) but name the page 'Single Gallery Template' and select 'Gallery' template for it under 'Page Attributes' box (screenshot). Please also use the 'Single Gallery Template' as base for it (screenshot).



11. How can I control the single trainer page layout?

If you have imported dummy content you should see 'Single Trainer Template' page under 'Pages' admin menu. Please edit it using WPBakery Page Builder editor to control single team member page layout.

If you haven't imported dummy content you can create this template from scratch. To do that please follow the instructions from point 6 (How can I control the single post layout?) but name the page 'Single Trainer Template' and select 'Trainer' template for it under 'Page Attributes' box (screenshot). Please also use the 'Single Trainer Template' as base for it (screenshot).



12. How to integrate WooCommerce (shop) plugin?

Please check this instructional video to see how to setup Shop.



13. How to control Theme Options?

You can control Theme Options in WP Dashboard area under 'Appearance->Theme Options'.



14. What steps should I take after update from version 12.1 and lower?

GymBase from version 13.0 is not fully backward compatible. We've added many improvements in code and for the layouts. So if you were using version 12.1 or lower and you have just updated theme, please follow below steps:

1. Clear browser cache.

2. Home Slider has been replaced with Slider Revolution plugin. You can import new slider under 'Slider Revolution' menu in admin area (screenshot). For import, please use gymbase-home.zip file which you will find in 'dummy_content_files' directory in the theme package downloaded from ThemeForest.
After the import please open your home page for edit and set the 'Template' for it to 'Default without breadcrumbs' (screen). Then please add new row in the content editor and insert 'Revolution Slider' component to it. In the row settings, please set 'Full width' type (screenshot). If you would like to have sidebar with home boxes on the slider, please add another row and insert 'Widgetised Sidebar' component to it. In the 'Widgetised Sidebar' component settings, please choose 'Home Top' and set home-box-container-list for-home-slider margin-minus in the 'Extra class name' field (screenshot).

If you would like to keep displaying old slider (deprecated), please open your home page for edit and select 'From Theme Options (deprecated)' under 'Main Slider' dropdown (screen).

3. Default margin values for components has been set to 'None'. If after theme update you see spacings/margins layout problems, please open particular row component settings and set 'Top margin' value (screen).

4. Sidebar Footer Bottom is displaying 4 columns now instead of 3. If you would like to have 4 columns there, please first import new sidebars under 'Appearance->Theme Options' by checking 'Import only template pages and sidebars' and clicking 'Import dummy content' button (screen). Then go to 'Appearance->Sidebars' and choose 'Footer Bottom' for edit. Then set below values in the configuration (screenshot):
'Before widget':

<div id='%1$s' class='widget %2$s vc_col-sm-3 wpb_column vc_column_container'>
'After widget':
</div>
'Before title':
<h5 class='box-header animation-slide'>
'After title':
</h5>

5. There is new 'Sidebar Copyright Area' available. After you will import new sidebars under 'Appearance->Theme Options' by checking 'Import only template pages and sidebars' and clicking 'Import dummy content' button (screen) you will see it under 'Apperance->Widgets': (screenshot). You can use it for example to display 'Social Icons' widget.

6. There is new menu location: 'Footer Menu'. You can assign menu to it under 'Appearance->Menus->Manage Locations' (screen).

7. If trainers details are not displaying correctly for 'Trainers list' component, please under component settings set 'Load content from description in details' option to 'No' (screen).

8. For some pages you might get 404 error after update, to fix it simply go to 'Settings->Permalinks' in your WP Dashboard and click 'Save Changes' button there. WordPress will flush the rewrite rules which should help in this case.

9. You can use 'Regenerate Thumbnails' plugin to regenerate all images and make them compatible with current version of theme. You can download this plugin here.

10. YouTube and Vimeo links format has been updated. Please update your links for gallery items to new format. Vimeo: https://vimeo.com/%video_id% YouTube: https://www.youtube.com/watch?v=%video_id%

15. Have another questions?

Please check the FAQ section on our Support Forum.

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.


functions.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.

WPBakery Page Builder

WPBakery Page Builder documentation is available here.

Widgets

There are 9 build in widgets:

  • Cart Icon,
  • Home Box,
  • Footer Box,
  • Upcoming Classes,
  • Classes Accordion,
  • Contact Details Box,
  • Scrolling Most Commented Posts,
  • Scrolling Most Viewed Posts,
  • Scrolling Recent Posts,
  • Social Icons,
  • Twitter Feed.

You can see how to configure widgets on this video.

Credits

Fonts used


Images

Premium images used for live preview purpose (not included in downloadable package):

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:

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: GymBase - Gym Fitness Template