WP Fitness WordPress Theme Documentation

Introduction

Thank you for buying our WordPress Theme. The complete procedure to configure and manage a WordPress Website from the beginning is shown in this documentation in different portions.

What is WordPress CMS?

WordPress is an open source tool which is based on PHP and MySQL to create websites. It is a completely free content management system(CMS) and a strong blogging platform. With this CMS, you can develop websites and solid online apps. You hardly require any knowledge or technical capability to manage it. WordPress has become the most accepted website development software available because of it’s varied aspects like it’s easy usage and flexibility.Learn More

What is a WordPress template

A WordPress template acts as a skin for the websites which are created on WordPress CMS. The installation of a WordPress Template is very easy. With the help of an installed new template, you can change the look of your WordPress website very easily. All the requisite source files are provided with a WordPress template and you can freely go for editing and increasing it the way you want.

Help and Support

Files structure

The template package you have downloaded consists of several folders. Let's see what each folder contains:

  • screenshots - contains template screenshots. Not for production.
  • theme - contains WordPress theme files.
    • wp-fitness-pro_0.1.zip - this folder content all the necessary files for the theme.
  • license.txt - contains license details.
  • readme.txt - contain information about theme images path and font use and usage scritps.

Template installation

Template installation is very easy process. The installation process includes only two simple steps: theme installation and sample data installation.

All installation steps can be done within WordPress interface. It makes process comfortable and fast.

1-Install a Theme using WordPress Admin

First thing you need to do is login to your WordPress admin area. Next, click on

  1. Go to the menu Appearance > Appearance Themes.
  2. Once you are on the themes page, click on the Add New button at the top.
  3. Click on upload theme button.
  4. Click on Browse Button then select your wp-fitness-pro_0.1.zip theme and click on install now button.
  5. WordPress will now install your theme and show you a success message along with the link to activate or live preview.

Congratulations, your theme have been successfully installed!

2-Install a Theme using FTP

Your second installation option is to upload the theme via FTP. For this method first log into your site via FTP and browse to your folder located at wp-content/themes. Unzip the theme file you downloaded and upload only the extracted Total folder to your server.

Next log into your WordPress site and navigate to Appearance >> Themes to activate Total.

Section Color/Font Pallete

Color/Font is very easy process.At a single glance of click you can set the color and fonts of the Headings,Paragrapgh and Buttons

Every individual section have an option to set the color pallete for Headings,Title/Text,Paragraph,Button Text and Button Background depending upon the number of option that are available in that respective section

Default Color/Font settings

Mega Menu

When you activate the theme, if by default the mega menus appear on top of your theme then to disable this mega menu follow these instructions.

Go to Appearance >> Menus>> Primary Menu or Main Menu.

In your Primary Menu, option for Mega Menu is given at the bottom. You have to first check the mega menu option and click on save menu. After check you have to uncheck the option of mega menu then click on save menu. Refresh the front page and see the changes.

How to set up homepage

Once you view your site after activating the theme, You will see the index page with the latest post. Now you will need to setup the home page template to show all the demo section on your front page.

Setup Home Page Template

Follow these instructions to setup Home page.

  • 1. Create Page to set template: Go to Dashboard >> Pages >> Add New Page.

    Label it "home" or anything as you wish. Then select template "home-page" from template dropdown.

  • 2. Set the front page: Go to Setting -> Reading --> Set the front page display static page to home page
  • Once you have done with this you can see all the demo content on front page.

Setup Header Section

In order to proceed with Header Section,

Go to Appearance >> Customize >> TG Settings >>Header Section

Follow these instructions to setup top bar.

  • Header Background Color Option: Contains background color options for header section.
  • Header Menu Color and Font Family Option: Contains color options for header menu and it's font family.
  • Menu Text Hover Color Option: Contains text color on hover options for text of header menus.
  • Menu DropDown Background Color Option: Contains background color options for dropdown menu.
  • Menu DropDown Hover Color Option: Contains color options for menu dropdown on hover.
  • Responsive Menu Background Color Contains background color options for responsive menu.
  • For Top menu:Create the menu from the dashboard and set it to the "Top Menu".
  • For more information go to the Navigation tab.


Setup Slider

Follow these instructions to setup slider.

  • For Slider: Go to Appearance >> Customize >> TG Settings >> Slider Settings.
  • Slider Heading Color and Font Family:Contains color options for heading and it's font family.
  • Slider Text Color and Font Family:Contains color options for text and it's font family.
  • Slider Image:Here you can set the images for slider.
  • Slide Title:Here you can set the title on slider.
  • Slide Description:Here you can add description on slider.
  • Slider Link:Here you can add the button link.

Setup About Us Section

In order to proceed with About Us Section,

Go to Appearance >> Customize >> TG Settings>> About Us Section.

In this section you can set the Background Image, Title, Sub-Title & Description of about us section according to your site. Options here are further described according to the sections they belong to :

  • Setting Options : Includes settings for About Us section display enable / disable option.
  • Section Title Color and Font Family:Contains color options for title and it's font family for specifix section.
  • Section Sub Title Color and Font Family:Contains color options for sub-title and it's font family for specifix section.
  • Section Paragraph Color and Font Family:Contains color options for paragraph and it's font family for specifix section.
  • Section Button Text Color and Font Family:Contains color options for button text and it's font family for specifix section.
  • Button Link: You can add a link to know more button.
  • Background Color Option: Contains background color options for specifix section layout.

Setup Our Classes Section

In order to proceed with Our Classes Section,

Go to Appearance >> Customize >> TG Settings>> Our Classes Section.

In this section you can set the Images,Title & Sub-Title of our classes section. It also have options to cutomize following things:

  • Setting Options : Includes settings for Our Classes section display enable / disable option.
  • Section Title Color and Font Family:Contains color options for title and it's font family for specifix section.
  • Section Sub Title Color and Font Family:Contains color options for sub-title and it's font family for specifix section.
  • Background Color Option: Contains background color options for specifix section layout.
  • Background Image Option: Contains background image options for specifix section layout.
  • Number of Content to show: Allow you to select no. of images you would like to display on one slider.

Setup Meet Our Trainers Section

First you will need to install and activate the "WP-Fitness Post Type Plugin". You can see more decription about this here.Click here to configure this plugin.

In order to proceed with Trainers section,

Go to Appearance >> Customize >> TG Settings>> Trainer Section.

In this section you can set the section Title and Description. Options here are further described according to the sections they belong to :

  • Setting Options : Includes settings for Trainers section display enable / disable option.
  • Section Title Color and Font Family:Contains color options for title and it's font family for specifix section.
  • Section Paragraph Color and Font Family:Contains color options for paragraph and it's font family for specifix section.
  • Section Button Text Color and Font Family:Contains color options for button text and it's font family for specifix section.
  • Background Color Option: Contains background color options for specifix section layout.
  • Background Image Option: Contains background image options for specifix section layout.
  • Button Link: Allow you to add link for Read More Button.

For setting up new trainers you need to follow below instruction to add new Trainers.

Go to Dashboard >> Our Trainers >> Add New.

Once you added posts in the Our Trainers ,you can add more post as many you want.

Trainers Section Shortcode:

The Shortcode present in the Trainers allows you to call your trainer section anywhere on the pages, just by placing the shortcode in the page.

see the screenshot.

[wp-team]

Setup Choose Our Pricing Plans Section

In order to proceed with Check Out Pricing Plans section,

Go to Appearance >> Customize >> TG Settings>> Pricing Plans Section.

In this section you can set the Title, Service Name, Plans Name, plan price & Content to be offered according to the theme. Options here are further described according to the sections they belong to :

  • Setting Options : Includes settings for Pricing Plans section display enable / disable option.
  • Section Heading Color and Font Family:Contains color options for heading and it's font family for specifix section.
  • Section Text Color and Font Family:Contains color options for text and it's font family for specifix section.
  • Section Price Color and Font Family:Contains color options for price and it's font family for specifix section.
  • Section Offer Color and Font Family:Contains color options for offer and it's font family for specifix section.
  • Section Button Color and Font Family:Contains color options for buttons and it's font family for specifix section.
  • Background Color Option: Contains background color options for specifix section layout.
  • Background Image Option: Contains background image options for specifix section layout.
  • Number of Plans to show Allow you to select no. of Plans you would like to offer and display .
  • Button Link: Allow you to add link for Sign Up Button.

Success Stories Section

First you will need to install and activate the "WP-Fitness Post Type Plugin". You can see more decription about this here.Click here to configure this plugin.

In order to proceed with Success Stories Section,

Go to Appearance >> Customize >> TG Settings>> Success Stories Section .

In this section you can set your the Title & Description. Follow the below steps to customize this section :

  • Setting Options : Includes settings for Success Stories section display enable / disable option.
  • Section Title Color and Font Family:Contains color options for title and it's font family for specifix section.
  • Section Paragraph Color and Font Family:Contains color options for paragraph and it's font family for specifix section.
  • Background Color Option: Contains background color options for specifix section layout.
  • Background Image Option: Contains background image options for specifix section layout.

In order to display number of clients on pages you need to follow the instruction given below:

Go to Dashboard >> Success Stories >> Add New.

For setting up Success Stories Section first of all you need to add Title(as client name),Description,image and its designation by using Success Stories Post.. Follow below instruction to add posts.

Once you added posts in the Success Stories, you can add more post(Success Stories) as many you want,and you'r done.

Success Stories Section Shortcode:

The Shortcode present in the Success Stories allows you to call your Client section anywhere on the pages you wish to,just by placing the shortcode in the page.

see the screenshot.

[wp-testimonial]


Recent Post Section

In order to proceed with Gallery section,

Go to Appearance >> Dashboard >> Post >> Add New.

In this section you can add new post, In the post you can add the Title, Content, Image. Further customization will be done from here.

Go to Appearance >> Customize >> TG Settings>> Recent Post Section.

  • Setting Options : Includes settings for recent post section display enable / disable option.
  • Section Title Color and Font Family:Contains color options for title and it's font family for specifix section.
  • Section Text Color and Font Family:Contains color options for text and it's font family for specifix section.
  • Section Paragraph Color and Font Family:Contains color options for paragraph and it's font family for specifix section.
  • Date Color and Font Family:Contains color options for date and it's font family for specifix section.
  • Section Button Color and Font Family:Contains color options for buttons and it's font family for specifix section.
  • Background Color Option: Contains background color options for specifix section layout.
  • Background Image Option: Contains background image options for specifix section layout.

Setup Services Section

In order to proceed with service section,

Go to Appearance >> Customize >> TG Settings>> Services Section.

In this section you can set the Images & Title of Services offered according to your site. Options here are further described according to the sections they belong to :

  • Setting Options : Includes settings for Service display enable / disable option.
  • Section Title Color and Font Family:Contains color options for title and it's font family for specifix section.
  • Background Color Option: Contains background color options for specifix section layout.
  • Background Image Option: Contains background image options for specifix section layout.
  • Number of Services to show Allow you to select no. of Services you would like to display .

Setup BMI-Calculator Section

In order to proceed with BMI-Calculator section,

Go to Appearance >> Customize >> TG Settings>> BMI Calculator Section .

In this section you can set your the Fitness Image,Title. Options here are further described according to the sections they belong to :

  • Setting Options : Includes settings for BMI-Calculator section display enable / disable option.
  • Section Heading Color and Font Family:Contains color options for heading and it's font family for specifix section.
  • Section Text Color and Font Family:Contains color options for text and it's font family for specifix section.
  • Background Color Option: Contains background color options for specifix section layout.
  • Background Image Option: Contains background image options for specifix section layout.
  • Section Title Allow you to set the title to be display .

Setup Contact Us Page

First, you have to select contact template to display the contact page.

In order to proceed with Contact Us Page,

Go to Dashboard >> Contact >> Contact Forms

Add the contact form7 plugin to your wordpress account. Activate the plugin and create your own form. Once you have done with this copy it's shortcode.

After copy a short code from contact form put this short code into customizer.

In this section you can add Name, E-mail, Contact Number & Address through the customizer. It also have options to cutomize following things :

Go to Appearance >> Customize >> Themes Settings >> Contact Us

  • Setting Options : Includes settings for Contact Us section display enable / disable option.
  • Contact Form Shortcode: Copy a short code from contact form and put into "Contact Form Shortcode".
  • Section Heading: You can add heading for specifix section.
  • Contact Us Tittle Color and Font Family: Contains color options for title and it's font family for specifix contact section.
  • Contact Us Text Color and Font Family:Contains color options for text and it's font family for specifix contact section.
  • Latitude and Longitude Option: You can add Latitude and Longitude of your address on the Google Map.

Setup About Us Page

In order to proceed with About Us Page,

Go to Dashboard >> Pages >> Add New

You have to add new page for About Us Page. After adding new page you can set title, description and Image. For Image you have to add image through "Add Media Option". After adding image copy the image url and put the url above the description. To show "our trainer section" put the short code ( "[wp-team]" ) at the bottom of the description. To display this page select the about template.




Child Theme & Hooks

Custom theme editor is the easy process for editing the site,if you have to add section in the site , you can easily edit in child theme it can be change in parent theme.

Hook code below Slider


Hook code below About Us


Hook code below Our Classes


Hook code below Meet Our Trainer


Hook code below Pricing Plans


Hook code below Success Stories



Hook code below Recent Post


Hook code below Services


Hook code below BMI Calculator


Hook code below Blog Fullwidth Header



Hook code below Page Header




 How to Setup WP-Fitness-Posttype Plugin

  1. First, you need to download the plugin from the source (which will be a zip file (wp-fitness-posttype.zip)). Next, you need to go to WordPress admin area and visit Plugins » Add New page.
  2. After that, click on the Upload Plugin button on top of the page.
  3. This will bring you to the plugin upload page. Here you need to click on the choose file button and select the plugin file you downloaded earlier to your computer.
  4. After you have selected the file, you need to click on the install now button.
  5. WordPress will now upload the plugin file from your computer and install it for you. You will see a success message like this after installation is finished.
  6. Once installed, you need to click on the Activate Plugin link to start using the plugin.

Plugin Configuration

Once you activate the plugin it will create two register posttype namely:Our Trainers and Success Stories on the Dashboard

1.Our Trainers

In order to showcase your Trainers post inside "OUR TRAINERS" section on homepage as well as to display on post and pages through shorthcode you need to setup/configure this plugin.

Go to Dashboard >> Our Trainers >> Add New Post

Add as many Trainers you want to add

Now on homepage you can view your post as a slider whereas if you want you can simply display that on inner page through shortcode

Shortcode( "[wp-team]" )

2.Success Stories

Similarly In order to display your Success Stories as it is on homepage inside any post/pages you simply need to follow the below steps.

Go to Dashboard >> Success Stories >> Add New Post

Add Title,Description,Designation and featured image to your Success Stories post and click publish.

This post will then appear on the page on which you have inserted its shortcode.

Shortcode([wp-testimonial])


Page Templates and Sidebars


Page Templates

  • Default Template (the default page template with a right sidebar position)
  • About Template (the default About template with no sidebar position)
  • Page (Full Width) (a page template with one column without a sidebar)
  • Page (Left Sidebar) (a page templates with left sidebar position)
  • Page (Right Sidebar) (a page template with right sidebar position)
  • Blog (Full Width) (a blog templates with one column without sidebar)
  • Blog (Left Sidebar) (a blog templates with left sidebar position)
  • Blog (Right Sidebar) (a blog template with right sidebar position)
  • Contact Template (the default Contact template with no sidebar position)

Posts, Categories and Post Formats

Adding category

Review the following article for more information on adding categories: http://codex.wordpress.org/Manage_Categories_SubPanel

  1. Log into your WordPress Administration Panel (Dashboard).
  2. Click the Posts tab.
  3. With that done, click Categories for blog posts.
  4. Type in the name of your new category.
  5. After that, click the Add New Category button.
Click the Publish button.

Creating a Blog post

  1. Log into your WordPress Administration Panel (Dashboard).
  2. Click the Posts tab.
  3. Click the Add New tab.
  4. Type in your post content. For more information on adding posts, please check the following link http://codex.wordpress.org/Posts_Add_New_SubPanel.

Shortcodes

A shortcode is a powerful content building tool http://codex.wordpress.org/Shortcode. Shortcodes are easy to use. First of all, make sure that the editing mode is set to Visual.

All available shortcodes are conditionally divided into these groups:

  • Testimonials[wp-testimonial] - used for testimonials output.
  • Gallery[galleryshow gallery=5 numberofitem=5] - used for Gallery images output.
  • Our Trainers[wp-team] - used to display Trainers.

Custom Widgets

 How to Setup Additional Theme Add Ons

  1. First, you need to download the plugin from the source (which will be a zip file (tg-title-banner-image.zip and tg-gallery-images.zip)). Next, you need to go to WordPress admin area and visit Plugins » Add New page.
  2. After that, click on the Upload Plugin button on top of the page.
  3. This will bring you to the plugin upload page. Here you need to click on the choose file button and select the plugin file you downloaded earlier to your computer.
  4. After you have selected the file, you need to click on the install now button.
  5. WordPress will now upload the plugin file from your computer and install it for you. You will see a success message like this after installation is finished.
  6. Once installed, you need to click on the Activate Plugin link to start using the plugin.

WP-Title-Banner-Image

Once you activate this plugins you will find the below option inside each and every page,post,registered posts etc.

  1. First, you need to choose the banner image that you would like to set on your post/page.
  2. On uploading any file, by default, the title will appear over the banner image.
  3. With the help of this plugin, you can hide the title if you do not want to display it on the banner simply by checking "Hide Title above banner" option.
  4. You can even show the title below the banner image by checking "Show Title below banner" option.
  5. When none of the options is selected and no file is chosen, then the title will be displayed in the default manner.

WP-Gallery-Images

Once you activate this plugins you will find the TG-Gallery on the Dashboard.

Click on Add new gallery button. And add the title. Add the number of images to show in a gallery.

Once you have done with adding gallery images. Use the following shortcode to make your gallery appear on a particular page you want simply by replacing the gallery post_id in the Gallery shorthcode.

Thats It! Now you can view your page to see the gallery images....