Introduction

Thank you for purchasing our product! We are very glad that you have decided on our Sportify WordPress Theme.

This documentation will help you to set up and use the Sportify WordPress Theme. The theme is very easy to use and we are here to guide and help you, so please read and follow the documentation, if there are some other issues you want to discuss then do not hesitate to contact us on support@teslathemes.com. This documentation is more of a reference work if you do not know what to do, or if you are not familiar to WordPress.

Please read the following very carefully as it will help you set the theme up, we have gone through the setup process multiple times and provided the best possible instructions.

We strongly recommend you to use a fresh install of WordPress and integrate your content into the pages according to the documentation. Of course, you can try to implement the theme into your current WordPress, but we will not provide in-depth support for it. The theme has specific settings that may conflict with your current setup of categories, plugins, javascript use, and more.

We wish you good luck in your work with Sportify WordPress Theme, and of course we would love to see your website and what you come up with by using this theme.

The theme is very easy to use and we are here to guide and help you, so please read and follow the instructions and if you have further questions write us a email support@teslathemes.com. This documentation is more of a reference work if you do not know what to do and need a better understanding on how the template is built write us an email.

Note: You can click on small images to zoom in and then move the mouse to the position you need.

Browser and Devices support

Since Sportify is built on Bootstrap 3 framework, it supports the same browsers as Bootstrap.

This template is responsive and should look fine on all standard mobile devices.

browsers

Installing WordPress

To start working with Sportify you need to have WordPress installed on your server (local,dev or production)

Step 1: Download and Extract

Download and unzip the WordPress package from Download Wordpress.

Step 2: Upload

Copy the extracted contents of wordpress zip to the corresponding path of the server. Make sure WP has permissions to write the folder it is located in.

Now when accessing the corresponding URL you should see the following message:

Wp first

Step 3: Edit the Configuration File

Auto Mode: After clicking on "Create a configuration file" then "Let's Go" you will get the configuration page:

Establishing a connection

If the information is correct and everything works fine you will receive:

Successful

If it's successful then skip the "Manual Mode" if not, follow the instructions bellow.

Manual Mode: You can either rename the file wp-config-sample.php to wp-config.php on your local machine or on you server (you'll still need to tell WordPress your database information).

Open wp-config.php with a txt editor and enter your database information under the section labeled:

// ** MySQL settings - You can get this info from your web host ** //
/** The name of the database for WordPress */
define('DB_NAME', 'wordpress');

/** MySQL database username */
define('DB_USER', 'root');

/** MySQL database password */
define('DB_PASSWORD', 'root');

/** MySQL hostname */
define('DB_HOST', 'localhost');

/** Database Charset to use in creating database tables. */
define('DB_CHARSET', 'utf8');

/** The Database Collate type. Don't change this if in doubt. */
define('DB_COLLATE', '');

After the information is edited upload the file to the server.

Step 4: Site name and login data

If it's all sparky then you click Run the Install and fill all the lines shown bellow:

Login Information

This being the last step you will see a success message.

Success

Click Log in and now you can proceed to you site. Now you can go to installing your Sportify WordPress Theme.

Installing Theme

To install the Sportify WordPress Theme you will need WordPress v3.6 or newer.

Option A

Follow the steps and upload the Theme's installation zip file through the WordPress admin backend:

  1. Download the theme archive, Sportify.zip
  2. Unzip the theme archive
  3. Find the installation file, Sportify.installation.zip
  4. Go to your WP admin – Appearance – Themes – Add New – Upload Theme – Choose file
  5. Upload the Sportify.installation.zip file.

upload

Then, when prompted activate the theme.

Note: If you can't get passed the file upload limit and/or if you get an error message mentioning exhausted memory size or something in those lines, you could try to increase that limit by adding to the "wp-config.php" the following line of code:

define('WP_MEMORY_LIMIT', '64M');

Option B

Uploading directly to the Server:

  1. Download the theme archive, Sportify.zip
  2. Unzip the theme archive
  3. Find the installation folder, Sportify
  4. Connect to your server via FTP or any other way that will allow you to explore and upload files directly.
  5. Navigate to your WP Installation Folder/wp-content/themes/
  6. Upload the Sportify folder here.

If everything went well in Option A or B, the theme should appear under Appearance → Themes like shown below:

cover

Then, when prompted activate the theme. Or go to Appearance->Themes and press the Activate button next to the theme.

Now you are ready to customize your theme.

Blog & Front Pages

Create a page that will serve as homepage - In wordpress admin panel under Pages → Add New, name it for example "Front Page Default". Also, select "Home" as the template used by the page.

Create a page that will serve as the archive page of blog posts - In wordpress admin panel under Pages → Add New, name it for example "Blog". Make sure that the permalink slug is "blog" only. Also, select "Default Template" as the template used by the page.

Set the front page to display as a static page: - Go to Settings → Reading → A static page (select below) → Front page: → Choose your page from the drop-down menu.

Choose your posts page from the drop-down menu. It should be the "Blog" page we have just created.

Your page should look something like:

home page

Tesla Framework

FW tour

All our themes are powered by Tesla Framework ( Tesla Framework Tour ), a powerful administration tool that comprises all our great features and allows you to easily customize the look and functionality of your theme, without advanced knowledge of programming. It gives you the possibility to customize and manage your theme settings from a dedicated area within your Wordpress Admin. Tesla Framework works smoothly, is intuitive and easy to use, once you install one of our themes you will be able to personalize its logo, site background and color, SEO options, social media networks and more; all from one place.

Our Framework is in continuous development and improvement process, we are working hard to provide you an easy administration tool, and we're guided by the latest UX trends and new technologies.

To personalize your theme you need to follow the instructions below.

Note: Options will vary from theme to theme depending on their features.

General Settings

Use these settings to customize the logo,favicon and insert custom css.

General Options

Site Colors

Use these settings to change available theme colors and background image.

Site colors

SEO & Socials

Choose what social share platforms to be used on single post pages and in footer/header. Also you can insert a tracking code that will be appended in the body of your website.

SEO Social

Additional Options

This section of the framework differs the most from theme to theme. Most of the settings have descriptions or are pretty self explanatory, so please try to play with them before asking for support :) .

Additional Options

Here is an example on the Sportify's 404 error page with the colors corresponding to the image above.

Top Banner Sportify

404 Sportify

Shop Banner Sportify

Page Banner Sportify

Contact Info

These options tweak your Contact page ( the one using either contact template or contact shortcode.

Contact Info

The options left blank will not appear.

Export/Import Options

To clear, export, import options for the settings explained above, go to WP Admin -> Tesla Theme -> Export/Import Options.

Export/Import Options

Clear Options: Restores all the inputs to default values. You will lose all customization made in the theme options tabs.

Import Demo Options: Imports the options predefined by our developers as seen on demo page.

Note: Importing demo options will not make your website look entirely as on our demo. You still need to import demo content and use specific plugins and widgets if theme requires so.

Export Options: Saves the current options to a file. This file can be later used to import options as described below. Useful when migrating to a new server.

Import Options: Loads options from an earlier exported file.

Warning ! Importing or clearing options will erase your theme current settings from Tesla Theme page . Make sure you make a backup first by "Exporting Options".

Import Demo Content

To import the content that is used on our demo page, go to WP Admin -> Tesla Theme -> Import Demo.

Import Demo

Warning ! Importing Demo Content will add posts and media files to your wordpress. It is not recommended to do it if you already have your own content. It would be better if you back up your data before importing the demo content.

Some error may happen due to permissions or repeating media. If the final message is green and successful just ignore them. If it fails or takes longer than 15 min to load please contact our support team and send the WP + FTP credentials.

Theme Updates

Warning ! You will lose all the customizations made in the parent theme if you make this update. Make sure that you work with Child Theme to keep the customizations during updates.

Wordpress will check for updates each hour and our themes will be displayed on the WP's updates page automatically.

To check for updates manually go to WP Admin -> Tesla Theme and at the top click on the Check Updates button. If there are updates, the newest version will be displayed and the "Go to updates page" button will appear, clicking on it will lead you to the Wordpress' updates page.

Theme Updates

Note: Click on View Changelog before updating to see what has been added or changed.

Select the checkbox next to the Tesla Theme and then click on Update Themes

Theme Updates 2

If you get any errors during this process please be sure that WP has permission to write in /wp-content folder.

Contact Form Builder

This feature is not available on all themes.

Tesla Contact Form Builder is meant to give the user as much customizability over the view of the contact forms in the theme as the layout permits.

To create the form go to Forms menu and start building in the first form by default created for you.

Insert an id, email receiver and choose the location where the form should appear (or leave it blank to use the form in a shortcode or widget).

Form Builder

Now to display the form on the front end we need to use a shortcode, contact widget or the form will appear automatically in a predefined Location that was choosed in the builder.

Shortcode:

[tesla_form id="1"]

Widget: Drag the Contact Form Widget to a sidebar and insert an id of the form to be displayed.

Theme Updates 2

Custom Posts & Shortcodes

Custom Posts

To ease the process of creating a website our TeslaFramework combines Theme Options, Custom Posts, Shortcodes and Templates.

Most of the custom posts are linked with a shortcode that you can use on any page. Some will need a specific page template to be called on. Others have their own placement and will be used as content for static locations.

The best way to understand and start working with our custom posts and shortcodes is to Import Demo Content and modify it.

Next we will explain each custom post in part. It's parameters and limitations of use. But don't be afraid to experiment.

Note: In the following screens, the colors from WP Admin match the generated content on the frontend.

Revolution Slider

Revolution Slider Demo

Sportify Revolution Slider



Create Slider

Create Revolution Slider


How to create new Slider?
  • Select the New Installed Revolution Slider
  • Press Create New Slider


New Revolution Slider


Your First Slider
  • Set the Slider Title and the Slider Alias (please don't use special chars and spaces here !)
  • Select your Layout and Settings and press Create Slider. (below you will see a Description for each settings in and Possibilities)



Main Settings


Editing Main Settings
  • Once you Created a Slider, you can open the Slider Settings (Settings) any time to manage any general settings per Slider


Settings Revolution Slider

Edit Revolution Slider


Slider Title

A Internal used Name for the Slider. Only for Backend Usage


Slider Alias

An individual name of the slider. Dont use Speical chars and spaces here. This will be used for ShortCode embeding and for any other art for embeding and corresponding / link internal to the slider.


Slider Shortcode

This is the Shortcode to embed into your Wordpress Pages, widgets etc.


Source Type

Posts
Pull content for the slides from Wordpress Posts by Categories and/or Tags

Specific Posts
Pull content for the slides from specific choosen Wordpress Posts

Gallery (this was the only type in previous versions)
This is the default type, no content from other sources will be pulled. This type will be used most of the times.




General Settings

General Settings Revolution Slider


Delay

Set the Delay Globaly for each slide. You can modificate the Delay Time per Slide under the Edit Slide function.


Shuffle Mode

Random Order of Slides on/off


Lazy Load

Use Dummy images during Document Load. Main images per slider are loaded on Demand when the slide is shown first time.


Use Multi Language (WPML)

If WPML is installed, this enables the multilanguage option for the Slider. After this is set to true, you can choose in which languages each slide can be seen, and each slide can have multiple versions for each language with own captions and so on.


Stop Slider

Use this setting to stop the Slider after a predefined Loop and at a predefined Slide. Loops 0 means in the first loop to stop and Stop At Slide 1 would stop directly at First slide. i.e. Stop After Loops 2 and Stop At Slide 3 would stop the slider after 2 Loops ath the 3thd slide


Position

Position Revolution Slider

The Position of the Slider within the Contaienr which is wrapping the slider.


Appearance

Appearance Revolution Slider


Shadow Type

Choose between different Shadow Effects under the slider. Shadow Height is excluded of the Slide Height ! You may need to set extra margin bottom via the Position Settings !

Navigation Revolution Slider

Here is a Detailed Guide For REVOLUTION SLIDER

Services

This custom post in combination with [tesla_services] or [tesla_services_2] shortcodes generates a Services box. Below is the example using [tesla_services]:

Services Demo

To create it , go to WP Admin -> Serviceses -> Add New -> Add a title -> Add content -> Add a featured image. Choose or create a category if you want different Serviceses in different locations.

Services

Then go to a page and insert the following shortcode :

[sportify_services title="Services" description="You Can Trust Us"]

Testimonials

This custom post in combination with [tesla_testimonials title="Testimonials"] shortcodes generates a Testimonials slider as show below:

Testimonials Demo

To create it , go to WP Admin -> Testimonials -> Add New -> Add a title -> Add content -> Add a featured image. Choose or create a category if you want different Testimonial sliders in different locations.

Testimonials

Then go to a page and insert the following shortcode :

[tesla_testimonials title="Testimonials"]

Our Friends

This custom post in combination with [sportify_friends_box title="*Our Friends*" description="You Can Trust Us"] shortcode generates a slider as show below:

Our Partners Demo

To create it , go to WP Admin -> Partners -> Add New -> Add a title -> Add a link.

Our Partners

Then go to a page and insert the following shortcode :

[sportify_friends_box title="*Our Friends*" description="You Can Trust Us"]

Team

This custom post in combination with "Team" Page template will create a team members section as shown below:

Team Demo

To create it , go to WP Admin -> Team -> Add New -> Add Title -> Add Content -> Choose featured image -> Insert position -> Select social platform and it's link -> Press Add button for a new social platform input.

Team

Then go to a page and choose the "Team" Page template. Add a title.

Team Template

Pricing Tables

This custom post in combination with [tesla_pricing_tables] shortcode generates a section as show below:

Pricing Tables Demo

To create it , go to WP Admin -> Pricing Tables -> Add New -> Add a title -> Add content -> Fill the options. Choose or create a category if you want different Pricing Tabless in different locations.

Pricing Tables

The shortcode which generates "Pricing Tables" inserted in template-classes.php which is located: Sportify_Theme_folder/template-classes.php:

[sportify_pricing_tables title="*Pricing Tables*"]

This custom post in combination with [sportify_gallery_slider title="*Here you can see our Photos, giving you a clear view about our Trainings and events" image="http://teslathemes.com/demo/wp/sportify/wp-content/uploads/2014/10/gallery-background.jpg"] shortcode generates a section as show below:

Gallery Slider Demo

To create it , go to WP Admin -> Gallery Slider -> Add New -> Add a title -> Add photo -> Select the options.

Gallery Slider

Gallery Slider

The shortcode which generates "Gallery Slider" inserted in template-about.php which is located: Sportify_Theme_folder/template-about.php.

The second usage of the shortcode which generates gallery you can find in page "Lessons", shortcode placed in page content area

The

[sportify_gallery_slider title="*Here you can see our Photos, giving you a clear view about our Trainings and events" image="http://teslathemes.com/demo/wp/sportify/wp-content/uploads/2014/10/gallery-background.jpg"]
shortcode uses the following attributes:

  • title: Generates title for Sportify Gallery Slider
  • image: This attribute sets background image for Sportify Gallery Slider

About Us Header

This custom post in combination with [about_box title="About Us" image="http://teslathemes.com/demo/wp/sportify/wp-content/uploads/2014/10/about-slide.jpg" image_small="http://teslathemes.com/demo/wp/sportify/wp-content/uploads/2014/10/about-background.jpg"] shortcode generates a section as show below:

About Box

The

[about_box title="About Us" 
image="http://teslathemes.com/demo/wp/sportify/wp-content/uploads/2014/10/about-slide.jpg" 
image_small="http://teslathemes.com/demo/wp/sportify/wp-content/uploads/2014/10/about-background.jpg"]
shortcode uses the following attributes:

  • title: Generates title for About Us Page
  • subtitle: Generates title description for About Us Page
  • second_title: Generates child title for About Us Page
  • image: This attribute sets background image for Sportify Gallery Slider
  • image_small: This attribute sets background image for

About Us Slider

This custom post in combination with [sportify_about_slider] shortcode generates a section as show below:

About Us Slider Demo

To create it , go to WP Admin -> About Slider -> Add New -> Add a post title -> Set title for the slide -> Add photo for slide -> Add content.

About Us Slider Slider

The shortcode which generates "About Us Slider" inserted in template-about.php which is located: Sportify_Theme_folder/template-about.php.

[sportify_about_slider]

Video Slider

This custom post in combination with [sportify_video_slider title="Take a look at our videos & appraise the work done by our proffesional team It might be that starting with tomorrow you will want to visit us" left_background="http://teslathemes.com/demo/wp/sportify/wp-content/uploads/2014/10/carousel-slide2.jpg" right_background="http://teslathemes.com/demo/wp/sportify/wp-content/uploads/2014/10/carousel-slide3.jpg"] shortcode generates a section as show below:

Video Slider Demo

To create it , go to WP Admin -> Video Slider -> Add New -> Add a title -> Add link to video object.

Video Slider

The shortcode which generates "Video Slider" inserted in template-home.php which is located: Sportify_Theme_folder/template-home.php.

[sportify_video_slider title="Take a look at our videos & appraise the work done by our proffesional team It might be that starting with tomorrow you will want to visit us" 
left_background="http://teslathemes.com/demo/wp/sportify/wp-content/uploads/2014/10/carousel-slide2.jpg" 
right_background="http://teslathemes.com/demo/wp/sportify/wp-content/uploads/2014/10/carousel-slide3.jpg"]

The [sportify_video_slider title="Take a look at our videos & appraise the work done by our proffesional team It might be that starting with tomorrow you will want to visit us" left_background="http://teslathemes.com/demo/wp/sportify/wp-content/uploads/2014/10/carousel-slide2.jpg" right_background="http://teslathemes.com/demo/wp/sportify/wp-content/uploads/2014/10/carousel-slide3.jpg"] shortcodes uses the following attributes:

  • title: Will be displayed as header for the video slider section
  • left_background: background photo which is displayed underneath the video slider on the left side
  • right_background: background photo which is displayed underneath the video slider on the right side

Classes

This custom post in combination with [sportify_classes title="*Classes*" description="We Invite You" image="http://teslathemes.com/demo/wp/sportify/wp-content/uploads/2014/10/classes-boxing.jpg" content="true"] shortcode generates a section as show below:

Classes

To create it , go to WP Admin -> Classes -> Add New -> Add a title and content -> Setup options for class.

Classes

[sportify_classes title="*Classes*" description="We Invite You" image="http://teslathemes.com/demo/wp/sportify/wp-content/uploads/2014/10/classes-boxing.jpg" content="true"]

The [sportify_classes title="*Classes*" description="We Invite You" image="http://teslathemes.com/demo/wp/sportify/wp-content/uploads/2014/10/classes-boxing.jpg" content="true"] shortcodes uses the following attributes:

  • title: Generates title for Classes Section
  • image: This attribute sets background image for Classes Section block
  • content: Displays content from post

Timetable

This custom post in combination with [sportify_timeline_events title="" weekdays="Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday" start_hour="5" end_hour="21"] shortcode generates a section as show below:

Timetable Demo

To create it , go to WP Admin -> Timeline -> Add New -> Add a title -> Set options for Event.

Timetable Slider

[sportify_timeline_events title="" weekdays="Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday" start_hour="5" end_hour="21"]

The [sportify_timeline_events title="" weekdays="Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday" start_hour="5" end_hour="21"] shortcodes uses the following attributes:

  • weekdays: Displays range by weekdays
  • start_hour: Displays start hour from range of hours in timetable
  • end_hour: Displays end hour from range of hours in timetable

Then go to a page and choose the "Timeline" Page template. Add a title.

Timetable Template

Sportify Events Slider

This custom post in combination with [sportify_events_slider title="*Events*"] shortcode generates a section as show below:

Events Slider

To create it , go to WP Admin -> Events -> Add New -> Add a title and content -> Setup options for Event.

Events Slider

[sportify_events_slider title="*Events*"]

The [sportify_events_slider title="*Events*"] shortcodes uses the following attributes:

  • title: Generates title for Events Section

Sportify Calculator

This shortcode [sportify_calculator title="Calculate Your Ideal Body Weight:"] generates a section as show below:

Calculator Demo

Place the shortcode on the page To display the Sportify Calculator

[sportify_calculator title="Calculate Your Ideal Body Weight:"]
  • title: - shortcode Attribute Generates title for Sportify Calculator

Special Offers

This custom post in combination with [sportify_shop_offers image="http://teslathemes.com/demo/wp/sportify/wp-content/uploads/2014/10/trainers-background.jpg"] shortcode generates a section as show below:

Special Offers Demo

To create it , go to WP Admin -> Shop Offers -> Add New -> Add a title -> Add content -> Insert link -> Pick a color -> Select featured Image.

Special Offers

Then go to a page and insert the following shortcode :

[sportify_shop_offers 
image="http://teslathemes.com/demo/wp/sportify/wp-content/uploads/2014/10/trainers-background.jpg"]

The shortcode uses the following attributes:

  • image: Generates the backgound image for Special Offers Section

Shop Ads

This shortcode [sportify_shop_banner] generates a section as show below:

Ads Demo

To create it , go to WP Admin -> Shop Banner -> Add New -> Add a title -> Add image for Banner -> Insert link to where it should redirect.

Ads

Then go to a page and insert the shortcode :

[sportify_shop_banner]

Products

This shortcode [sportify_products_block ids="298,310,308,321,312,317" title="*You Might Like This*"] generates a section as show below:

Products Demo

The [sportify_products_block ids="298,310,308,321,312,317" title="*You Might Like This*"] shortcodes uses the following attributes:

  • ids: The WC products with the ids from shortcode's parameter will be displayed.
  • title: Generates title for Products Block

New Arrivals

This shortcode [sportify_new_arrivals title="*New Arrivals*" columns="5" products_nr="16"] generates a section as show below:

New Arrivals Demo

The most recent added items in the Woocommerce's products page will be displayed.

The [sportify_new_arrivals title="*New Arrivals*" columns="5" products_nr="16"] shortcodes uses the following attributes:

  • columns: Specify The number of columns to display
  • products_nr: The total number of products to display

Woocommerce Shortcodes

You can also use shortcodes from woocommerce to generate content based on products.

Read more about them Here

Note: Some WC shortcodes may not look right as not all of them are styled under Sportify's design.

Page Templates

Templates

This easy to use WP feature will help you create fancy layouts with 2 clicks. When adding a page you can choose from different templates:

  • About
  • Classes
  • Contacts
  • Home
  • Shop
  • Team
  • Timeline
  • Account
  • Full Width
  • With Sidebar
Note: Some page templates may require additional configuration from custom posts and theme options pages.

Widgets

Sportify has 2 custom widgets:

  • [TeslaThemes] POPULAR / NEW
  • [TeslaThemes] TWITTER

Widgets Footer

To place them , go to WP Admin -> Appearance -> Widgets and drag the widgets in the footer sidebar area filling the options provided.

Widgets Footer

Note: Some Widgets may require additional configuration from custom posts and theme options pages.