Introduction

This documentation is last updated on 28 January 2015.

Thank you for purchasing Sports & Life WordPress Theme . If you have any question that is beyond the scope of this documentation, Please feel free to Contact me from my profile page.

Disclaimer:
We offer limited support for theme customers. We only provide support for our themes and their core features. We cannot guarantee our themes will work properly with all third party plugins and server environments. If you plan on adding numerous plugins to this theme then please note, We cannot facilitate support for any conflicts that might arise with this theme's default functionality. The Sports & Life WordPress theme is presented as it is.


Updating WordPress Theme

If this is a theme update and you want to apply it on your existing installation then please visit this article to learn about a better way to update your theme


If you like this theme, Please support us by rating this theme with 5 stars (How to rate?)      

Install Theme

In start you must have a working version of WordPress already installed. For information in regard to installing the WordPress CMS, please see the WordPress Codex Installing WordPress

Once you have a working of version of WordPress, you need to download All Files and Documentation from themeforest and extract the downloaded zip to get various files including sports-and-life.zip.

Install Theme Via WordPress Dashboard



  1. Go to 'Appearance > Themes' section
  2. Click 'Add New' and select the 'Upload Theme' option
  3. Choose the sports-and-life.zip file and press 'Install Now'
  4. Once the theme is uploaded you need to activate it.

if you face any problem during upload through dashboard, please upload the theme using FTP as guided below.

Install Theme Via FTP

  1. Access your hosting server using an ftp client like FileZilla
  2. Go to the 'wp-content/themes' folder of your WordPress installation
  3. Upload 'sports-and-life' directory from downloaded package in 'wp-content/themes/'.
  4. Go to 'WordPress Dashboard > Appearance > Themes' section to activate the theme

Install Child Theme

If you want to make modification in this theme then it is better to modify it in child theme only. This way you can easily update your parent theme whenever new update becomes available on themeforest. You can read more about child theme from here.

To install child theme, you need to upload the sports-and-life-child.zip and activate it in the same way as you uploaded and activated the parent theme.

Install Plugins

After you have installed and activated the theme, there'll be a list of required and recommended plugins at the top of the WordPress dashboard.



If you already hide it out, you can go to 'Appearance > Install Plugins' section instead.

So, you need to install and activate these plugins as appeared in following screensot.

Redux Framework and Meta Box plugins are mandatory. So, you must need to install and activate this plugin.

Import XML for Demo Contents

Importing demo contents and making your site one step closer to the theme demo requires following steps.

  1. Importing XML file
  2. Configuring Menus

Look for Import XML folder in unzipped package downloaded from themeforest and use the XML within it.
Go to the WordPress Admin > Tools > Import and click WordPress as displayed in image below.



At first time you need to install WordPress importer plugin



Once installed you need to activate the plugin and run the importer.



Select the XML file from Import XML folder in unzipped package that you have downloaded from themeforest.



After importing XML file.

  1. Assign posts and custom post types to an existing author.
  2. Mark the checkbox to download and import file attachments
  3. Click 'Submit' button



After that is done, you will have bunch of posts, pages, classes, trainers, partners and other contents as on the theme demo.



Configure Menus

Navigate to Appearance > Menus and use the Already Imported Menu from XML and assign it to theme location "Main Menu" from Menu Settings section below menu. After that save the menu. As pointed in screenshot below.



Create Home Page

In case of imported XML the home page is already created and you do not need to follow this section.

To set up the Home page you need to create a new page,

Go to Pages > Add New. You can give this page a title "Home" and you can add some contents to make then appear on your home page.

Select the “Home Page” template from the Page Attributes section, as displayed in screenshot given below. Click “Publish” to make this page available for visitors.



Setting Up Main Menu

The theme has one custom menu location which is for the header area.

To setup your custom menu, navigate to Appearance > Menus. Give your menu a name and build it up. You can add a variety of items including pages, categories, custom links. Once you have built your menu, save it and assign it to a location. You can enable all those options from screen options on the top right corner.

Configure Reading Settings

I am assuming that you have imported the XML successfully and you have home page and blog page available for use. If this is not the case then simply create a new page using Home Page template and name it as Home after that create another page using default template and name it as Blog or News or whatever you name it for your posts page.

To configure reading settings you need to visit WordPress Admin > Settings > Reading and choose that front page displays as static page. Then select Home as Front Page and Blog as Posts Page. As, displayed in screenshot given below.



Logo And Favicon

To configure your website header options have to click Theme Options in left bar. Here you can see first tab Named Header on the left column and its options on right side. First three options are given below.

  • Favicon: Here you can upload a favicon for your website in PNG format. This will appear beside you title of the website in browser's title bar.
  • Logo: Here you can upload a logo for your website.
  • Provide Text for Logo: In case you do not want to use an image logo, you can provide text for your logo area. Here you can use 'strong' or 'span' tag with highlight class to make any character prominent.


Home page layout management

For home page we have some sections available in this theme as you can see in live demo. You can manage location for each section by moving it up and down using drag and drop. You can disable any section by dropping it to 'disable' area. All sections and their short introduction is given below.

  1. Slider: In slider section your selected slider and its sliders will appear.
  2. Default Contents: In this section you will see your default contents from WordPress editor of the home page.
  3. Upcoming Classes: This area lists selected number of upcoming classes in a beautiful carousel.
  4. Trainers & Courses: In this area you will see trainers vertical carousel. You can select number of trainers to display here from option given below. On it's right side you can see courses and most recent classes from each course appearing by accordion.
  5. Shortcode area: In shortcode area you can put shortcodes available in this theme. You can create many contents using those shortcodes on home page.


Selecting and Setting Up Sliders

There are two different sliders given in this theme. You can set up slider options from Theme Options > Home

Default Slider

If you select default slider from settings you have to add slider from Slider option available in WordPress Menu.




You can add slide by clicking on 'Add New' option in 'Slider' menu. You have to provide information for all fields available. It will appear in default slider as it is appearing in Live Demo. Recommended size of featured image is 1920 X 1000. Make sure you are using that size for good results.



Flex Slider

If you select flex slider from home page slider options then options for flex slider will appear under this button. You have to provide images for your slides. No content needed but if you want to make some contents appear you can use 'title', 'description' and 'url' fields to appear.

Create Blog Page

In case of imported XML the blog page is already created and you do not need to follow this section.

To set up the Blog page you need to create a new page,

Go to Pages > Add New. You can give this page a title "Blog" yet you do not need to include any contents for now.

Select the “Default Template” template from the Page Attributes section, as displayed in screenshot given below and click “Publish”.



Add News Post

Sports & Life WordPress theme supports seven post formats. Detail of each post format is give below.

Standard post format:

Standard post format is for simple text based blog posts. It needs a title and contents. You can also assign a featured image to this post format. You can assign categories and tags to your post and you can enable or disable comments for this post from discussion metabox.

Post Format

Image post format:

Image post format is same like standard format. But for this one you must use an image to display it in listing.


Gallery post format:

In this post format you have to give some images to show them in slider.

Post Format

Video post format:

In video post format you will see extra meta fields for video embed code. You have to provide embed code for your video in it.

Post Format

Audio post format:

For audio format you have two main options in meta fields. You can upload your audio in mp3 or ogg format or you can put an embed code in embed code area. You can also use WordPress default shortcode for [audio] in embed code field.

Post Format

Quote post format:

In this format you will see metaboxes for quote text and author. Use those metaboxes to display a quote in post listing.

Post Format

Link post format:

If you want to share an interesting or informative link in your post listing then use Link post format. You will see extra meta boxes after selecting it.

Post Format

Add Classes

This theme has Classes post type to manage and show classes with some information about each one. You can add classes by going to WordPress admin > Classes > Add new.

Each class have some meta boxes where you can put information about it. You can assign a course to categorize classes in listings.

Add Trainers

In trainers post type you can add and manage trainers for classes. You can have separate listing for trainers. You can add trainers by going to WordPress admin > Traineras > Add new.

Each trainer have some meta boxes where you can put some information about it. You can assign a course to categorize trainers in listings.

Add Partners

Before footer there is a partners carousel where you can list all of your partners etc. You can add partners by going to WordPress admin > Partners > Add new.

For each partner you can give a title, URL and featured image.

Add Testimonials

There are general testimonials for this site or institute which are displayed under default slider. You can add those testimonials by going to WordPress admin > Testimonials > Add new.

For each testimonial you can see some extra information required in meta fields.

Add Classes Listing Page

To list all your classes on a page you have add new page and assign it related page template. Go to WordPress Admin > Pages > Add New, Provide the page title, select the 'Classes Listing' template from page attributes and then publish your page.

Classes Listing Page

After publishing you need to add the newly created page in menu from WordPress Admin > Appearance > Menus

Add Trainers Listing Page

To list all your trainers on a page you have add new page and assign it related page template. Go to WordPress Admin > Pages > Add New, Provide the page title, select the 'Trainers Listing' template from page attributes and then publish your page.

Trainers Listing Page

After publishing you need to add the newly created page in menu from WordPress Admin > Appearance > Menus

Add Time Table Page

Time table page lists all your classes in a table by day and timings. To add this page you have to go to WordPress Admin > Pages > Add New and Provide the page title, select the 'Time Table' template from page attributes and then publish your page.

Time Table Page

After publishing you need to add newly created page in menu from WordPress Admin > Appearance > Menus

Add Contact Page

On contact page you can display you location on google map and also you can display a form for users to contact you. To add this page you have to go to WordPress Admin > Pages > Add New and Provide the page title, select the 'Contact Page' template from page attributes and then publish your page.

Contact Page Template

Configure Contact Options

In this theme there are few options in theme options panel to help you setup a contact page like the one you can see here.

You can find your locations Latitude and Longitude from here.

Default Page

Default page template is for simple content based pages you can add in your website. It has a default sidebar named 'page sidebar'.

Default Page Template

Page Template without wrapper

Code Example:

This page template is without wrapper. It is to use wrapper shortcode which has different background skins. You can see wrapper shortcode details in shortcodes menu > wrapper.

                                [wrapper section="darkgrey"]
                                    [middle_heading]Teaser with images[/middle_heading]
                                    text or more shortcodes
                                [/wrapper]

Fluid Page Template

Header options

This section contains options related to header. You can set your site favicon and logo from here. You can also add some js code using 'quick js' box.


Header Theme options

Home page options

This section contains options related to home page. Thame menu have two sub menues.

Home - Slider Settings: In this section you can see settings related to sliders.


Home Slider Theme options


Home - Other Settings: In this section you can find all other settings related to home page. You can set titles of different home page sections and you can also create different available elements using shortcode area of the home page. For more information about shortcodes you have to visit shortcodes section of documentation.


Home Other Theme options

Classes and Trainers options

This section contains options related to classes and trainers. You can customize class times if you do not want to use default times.


Classes Theme options

Contact options

This section contains options related to contact page. You can enable/disable contact form and google map. You can also set up google map from this section.


Contact Theme options

Styling options

This section contains options related to styles of the website. You can change fonts of the website and basic text color. You can also add some css in quick css box.

Note: Styling is limited and some elements might not take effect from this sections.


Styling Theme options


Header: In Header section you can change navigation borders and colors.


Styling Header Theme options


Backgrounds: In Backgrounds styling section you can change backgrounds of different page sections. These sections are used on home page. You can also create these sections using shortcode on fluid width template.


Styling Backgrounds Theme options


Footer: In Footer styling section you can change several colors such as background, text, links, buttons, social icons etc.


Styling Footer Theme options

Setting up address widget for footer.

This widget is for footer. You can display address, phone number, email and some social icons in it. To use this widget you have to go to Appearance > Widgets and then drag this widget to one of the footer columns.

Admin side of this widget:


How this widget look in front end.

Setting up Flickr Gallery for footer.

This widget is for footer. You can display flickr images inside your footer. It is a plugin based widget and you have to install one of the recommended plugins to get this widget. You simply have to provide your Flickr ID as displayed below. If you want to know about more options this widget offers, please visit https://wordpress.org/plugins/flickr-badges-widget/

Admin side of this widget:


How this widget look in front end.

Setting up Twitter Widget for footer.

This widget is for footer. You can display your tweets your footer. It is a plugin based widget and you have to install one of the recommended plugins to get this widget. After installing this widget you have to configure it. For that you have to Go To Settings > Twitter Feed. It requires some security keys from your twitter account. To get those keys follow the process given below.

  1. Sign In to the Twitter Developers section. If you do not already have an account, you can login with your normal Twitter credentials
  2. Got to My Applications page.
  3. Click Create a New ApplicationButton and it will take you to Create an Application form page.
  4. Provide your website name, description and URL, Agree with contract and provide CAPTCHA and press Create your Twitter Application button.
  5. Details of your new twitter application will be shown along with your consumer key and consumer secret.
  6. But, you also need to create access tokens and for that you need to click on Create my access token button.
  7. The page will then refresh on the "Details" tab with your new access tokens. (if you are not able to view these first time, click on details tab and access tokens should appear after page refresh) You can recreate these at any time if you need to.

Use these keys to your widget and place widget in footer area.

Widget configration page:


Admin side of this widget:


How this widget look in front end.

Setting up Newsletter Widget for footer.

This widget is for footer. You can display newsletter form inside your footer where from you can get people subscribe to your website. It is a plugin based widget and you have to install one of the recommended plugins to get this widget.

Admin side of this widget:


How this widget look in front end.

Columns

Columns shortcode is an easy way to make columns in your page or post. All short codes related to columns and usage of these codes is mentioned below:

                          [columns] <===== You should wrap all columns in it.
                            [one_half][/one_half]
                            [one_third][/one_third]
                            [one_fourth][/one_fourth]
                            [three_fourth][/three_fourth]
                            [one_sixth][/one_sixth]
                          [/columns]

Usage

Output Example

Teaser blocks

Teaser blocks are to display different kind of information in columns and different styles. As you can see on live demo shortcode page.

We have different kinds of teasers in this theme. You have to wrap each group of teasers in [teaser_wrap] shortcode as mentioned below. Usage of each one with output is given below.

Teaser with image:

                            [teaser_wrap]

                                [teaser_image title="Teaser title" src="image.png" url="#"]Some Contents[/teaser_image]
                                [teaser_image title="Teaser title" src="image.png" url="#"]Some Contents[/teaser_image]
                                [teaser_image title="Teaser title" src="image.png" url="#"]Some Contents[/teaser_image]

                            [/teaser_wrap]

Output Example



Teaser with small icon:

                            [teaser_wrap]

                                [teaser_icon_small title="Teaser title" icon="leaf2" url="#"]Some Contents[/teaser_icon_small]
                                [teaser_icon_small title="Teaser title" icon="leaf2" url="#"]Some Contents[/teaser_icon_small]
                                [teaser_icon_small title="Teaser title" icon="leaf2" url="#"]Some Contents[/teaser_icon_small]

                            [/teaser_wrap]

Output Example



Teaser with large icon:

                            [teaser_wrap]

                                [teaser_icon_large title="Teaser title" icon="user3" subtitle="subtitle" url="#"]Some Contents[/teaser_icon_large]
                                [teaser_icon_large title="Teaser title" icon="user3" subtitle="subtitle" url="#"]Some Contents[/teaser_icon_large]
                                [teaser_icon_large title="Teaser title" icon="user3" subtitle="subtitle" url="#"]Some Contents[/teaser_icon_large]

                            [/teaser_wrap]

Output Example



Teaser with block icon one the left:

                                [teaser_icon_block_left title="Teaser title" icon="camera-outline" style="default"]Some Contents[/teaser_icon_block_left]
                                [teaser_icon_block_left title="Teaser title" icon="camera-outline" style="block-icon"]Some Contents[/teaser_icon_block_left]
                                [teaser_icon_block_left title="Teaser title" icon="camera-outline" style="block-icon"]Some Contents[/teaser_icon_block_left]

Output Example



Note: Click here to see the list of available icons for these teasers.

Pricing Tables

You can create pricing tables using this shortcode. You have to enter some properties for that.:

Style 1

                           [pricing_table title="One Day Training" price_big="9" price_small="99" unit_text="Day" url="#" button_text="Sign Up!"]
                               list item
                               list item
                               list item
                           [/pricing_table]

Output Example



Style 2

                           [pricing_table title="One Day Training" price_big="9" price_small="99" unit_text="Day" url="#" button_text="Sign Up!" style="fill"]
                               list item
                               list item
                               list item
                           [/pricing_table]

Output Example

Pie Charts

You can create Pie charts using this shortcode. You have to enter some properties for that.

                            [pie_chart]
                                [pie_item title="Web Design" percent="75"]Some text contents[/pie_item]
                                [pie_item title="WordPress" percent="62"]Some text contents[/pie_item]
                                [pie_item title="HTML/CSS" percent="87"]Some text contents[/pie_item]
                            [/pie_chart]

Output Example

Bootstrap Progress Bars

You can create some bootstrap progress bars using following shortcode.

                            [progress title="40% Complete (Success)" color="green" value="40"]
                            [progress title="20% Complete (Info)" color="cyan" value="40"]
                            [progress title="60% Complete (warning)" color="orange" value="60"]
                            [progress title="80% Complete (Danger)" color="red" value="80"]

Output Example

Bootstrap Alerts Bars

You can create some bootstrap alert bars using following shortcode.

                            [success]Well done! You successfully read this important alert message.[/success]
                            [info]Heads up! This alert needs your attention, but it's not super important.[/info]
                            [warning]Warning! Best check yo self, you're not looking too good.[/warning]
                            [danger]Oh snap! Change a few things up and try submitting again.[/danger]

Output Example

List Styles

This theme has three different list styles. You can use [list_items] short code with different style options to make different list styles. See examples given below.

                            [list_items style="bullet"]
                                Lorem ipsum dolor sit amet
                                Lorem ipsum dolor sit amet
                                Lorem ipsum dolor sit amet
                                Lorem ipsum dolor sit amet
                                Lorem ipsum dolor sit amet
                            [/list_items]

                            [list_items style="arrow"]
                                Lorem ipsum dolor sit amet
                                Lorem ipsum dolor sit amet
                                Lorem ipsum dolor sit amet
                                Lorem ipsum dolor sit amet
                                Lorem ipsum dolor sit amet
                            [/list_items]

                            [fancy_ol style="arrow-list-three"]
                                Lorem ipsum dolor sit amet
                                Lorem ipsum dolor sit amet
                                Lorem ipsum dolor sit amet
                                Lorem ipsum dolor sit amet
                                Lorem ipsum dolor sit amet
                            [/fancy_ol]

Output Example

Blockquote

                           [quote]Lorem ipsum dolor sit ...[/quote]

Output Example

Wrapper

This shortcode is used on Wrapper less template to make your own wrapper look. Available options for 'section' property are 'drak', 'gray', 'darkgray' and 'color'. The 'color' property will show wrapper with default reddish color which is #db325a by HEX value. You can also use 'image' property with 'bg_image' value to show a default image in section.

                            [wrapper section="darkgrey"][/wrapper]
                            [wrapper section="dark" image="bg_image"][/wrapper]

Heading in the middle

You can create a heading style centered aligned with beautiful bottom border using this shortcode.

                           [middle_heading]Teaser with images[/middle_heading]

Output Example

Testimonials author name shortcode

                           [name]John Doe[/name]

Usage Example

Output Example

Highlight shortcode

This shortcode is used to maximize one character or word from any sentence.

                           John [highlight]Max[/highlight] Doe

Output Example

How to Modify Styles

There are various options available to modify styles in this theme.

  1. Theme Options - Go to 'Theme Options > Styling' for different color variations.




  2. Quick CSS - Go to 'Theme Options > Styling > Quick CSS' to write some short css.




  3. CSS in Child Theme - If you have some major changes then you can put them in style.css in child theme.



  4. Custom CSS in Parent Theme - if you are not using child theme then 'css/custom.css' file is provided in parent theme to add major css changes.

How to Modify Theme Options

This theme uses redux framework for theme options and related file reside in 'theme-options > majestic-config.php'



If you want to modify theme options from child theme then you need to open the functions.php file in child theme and remove the comments around function named dynamic_section

Now, you can consult redux framework documentation to learn about adding new sections and fields into theme options.

How to Modify Meta Boxes

This theme uses Meta Box Plugin for meta boxes and related file reside in 'meta-box > config-meta-boxes.php'



So, you can easily modify the code of existing meta boxes. Or you can add new meta boxes using framework_theme_meta filter in child theme.