FitPro Installation & Setup

NOTE: This setup page is for FitPro 2.5 and below ONLY. For versions 3.0+ please click here for FitPro setup.

Color Customization

Page Contents

Getting Started

So you bought FitPro, and you’re ready to get your website up. Here’s a step by step guide to make sure you get up and running as quickly as possible.

Domain & Hosting

Before you can install FitPro, you must have a hosted website domain.

WordPress

The next step is to install WordPress. Most hosts allow you to do this in one click.

Every host is different, so if you have problems please contact your website host.

If your host does not offer a one-click install, please see this page at wordpress.org for manual installation instructions.

*Note – Do not install WordPress in your root directory on top of your old website! Instead, install in a sub directory (folder) like http://www.yoursite.com/wordpress. Build the site there, then you can move it into the root directory later.

Installing FitPro

Ok, now for the good part. Let’s get FitPro installed!

Installing Your Theme through WordPress (Recommended)

  1. Download the theme’s .zip file
  2. Log in to WordPress, go to Appearance > Themes
  3. Click on the “Install Themes” tab, and click the blue “upload” link
  4. Upload your theme’s .zip file, then activate the theme

Or…Install your theme through FTP

If you would like to upload your theme via FTP, follow these instructions.

  1. Download the theme’s .zip file
  2. Unzip the theme folder
  3. Upload the unzipped folder to the wp-content/themes folder on your server
  4. Log in to your WordPress admin area, go to Themes, and activate the FitPro theme

After that, your theme should be ready to go. Now you will want to configure the theme through the theme options page.

FitPro Options

FitPro has an advanced theme options page that makes customizing and setting up your website incredibly easy. To access the theme options, log in to your WordPress admin area, and go to Appearance > FitPro Options.

Video Tutorial

To upload your company logo, check the “use custom image” box. Browse for your logo file, and click “Insert into FitPro theme.” If you don’t see “Insert into FitPro theme,” copy the image url, close the upload box, and paste the url into the gray box.

FitPro Header Settings

Make sure to click “update logo” or the blue save button at the bottom, or else your changes will not be saved.

If you do not wish to display a custom logo, simply uncheck the box, and your site title will be displayed instead. You can edit what this text says in your WordPress admin area under Settings > General in the left side navigation.

To show or hide the site description text, simply check or uncheck the “Hide site description” checkbox. You can edit what this text says in your WordPress admin area under Settings > General in the left side navigation.

The theme appearance options allow you to change the colors and layout of your site.

To change the color scheme, layout, or sidebar location, use the drop down boxes. Make sure to save your changes, then view your site to see the different looks you can achieve.

Theme Appearance

If you wish to further customize your colors, use the color pickers. Click inside the blank box to see the color picker, then choose your color.

Checking the “Display post thumbnails” checkbox will display the small pictures next to each post. These images can be changed on the post edit page on the right under “set featured image.” If no featured image is set, a default image will be displayed.

General Settings

The admin email is where the contact form email will be sent.

The header and footer insert boxes allow you to add code into the <head> and <footer> areas of each page and post. You can paste your Google Analytics script into one of these boxes.

Front Page Setup

FitPro’s front page is 100% widgetized, which makes it incredibly flexible. To build your front page, login to your admin area, and go to Appearance => Widgets.

Drag any widget you want to use into the Front Page widget areas. Watch the video below for more.

Nivo Slider

FitPro Custom Widgets

Video Tutorial

FitPro comes packaged with several custom widgets that you cannot find anywhere else. To activate these widgets, login to your WordPress admin area, then go to Appearance > Widgets. Drag and drop the widgets into the different widget areas on the right, these will show up in different places on your site.

FitPro Email Opt-in

This widget allows you to collect emails of prospective clients, and provide them with a free ebook or download if you wish. Just drag this widget into any of your widget areas, fill out the available options, and your ready to collect opt-ins!

Twitter Feed Widget

The FitPro Twitter Feed Widget displays the latest tweets from your timeline. To activate this widget, just drag and drop it into any widget area, and enter your twitter id. FitPro takes care of the rest!

Testimonials Widget

This widget automatically formats your testimonials in your sidebar to display them proudly to your customers. Just put your testimonials inside the [testimonial] shortcode. For example: [testimonial] Put your testimonial text here [/testimonial] (don’t forget the closing shortcode!)


Footer Widgets

FitPro has a widgetized footer area, which allows you to put up to 4 widgets in your website’s footer. Simply drag and drop whatever widget you want into the footer widget area.



Header Info Box

This widget helps you make sure your customers can find your contact info on every page, and connect with you on social media. Just fill in your phone number, and facebook and twitter id’s.

Shortcodes

Shortcodes allow you to easily add pre-designed elements to your website.

[testimonial]

Usage: [testimonial name="David Gwyer" company="Press Coders" image="http://www.mysite.com/imageurl.jpg"]Put testimonial text here. Don’t forget the closing shortcode![/testimonial]

The image url field accepts either an image url or a valid gravatar.com email address.

[button]

Usage: [button color="green" link="https://www.presscoders.com"]Button Text Here[/button]
Acceptable colors: Gold, Green, Blue, Yellow, Red, (no color specified reverts to default)

[box]

Usage: [box color="blue"]Box text and media goes here. Shortcodes inside box ok.[/box]
Acceptable colors: Gold, Green, Blue, Yellow, Red, (no color specified reverts to default)

Page Templates

To use a page template, go Pages > Edit, and on the right side of the screen you will see “Page Attributes.” Choose a template from the drop down box called “Templates,” and save your changes.

Default

Displays the main content and sidebar according to your chosen layout.

Full Width

Removes the sidebar and displays the main content full width.

Blog Page

Displays your blog posts in reverse chronological order.

Contact Form

Displays a contact form. Email will be sent to the admin, this can be changed on the FitPro options page.

FitPro Platinum Members Area

The Members area feature lets you display private content to any registered member. Here’s how to set it up.

Video Tutorial

Add global content to the Members Area

When you activate FitPro Platinum, a page called “Members Area” will be created. To add global content that all members will see go to Pages > Members Area in your WordPress admin area.

Add content just like a normal page. You can add video, links, text, or anything you want to this page, and it will be displayed to all registered members.

Add content for Individual Users

If you want to add specific content for each user, you can do that through their user profile pages. For example, if you have a specific workout for a client that you want only them to see, here’s how to do that.

  1. The user must be registered first! (Look below for instructions on registering users)
  2. In your WordPress admin area, go to “Users” and click on the profile of the user.
  3. Scroll to the bottom of their profile page, and you will see an editing box where you can add any content you wish to their specific Members Area page.
  4. Make sure to save your changes!

User Registration

The Members Area feature uses the WordPress user registration functionality. There are 2 ways to do it…

1. Let users register themselves

In your WordPress admin area, go to Settings > General and check the box that says “Anyone can register” then save your changes.

Now anyone can register by going to your website at the registration url, which looks like this: http://www.yoursite.com/wp-login.php?action=register

You can also use the Meta Widget to display the Registration link. To do this, go to “Widgets” in your WordPress admin area, and drag the Meta widget into one of the FitPro widget areas.

If you use this method, you will eventually get spam registrations. These are usually harmless, (mostly just annoying) but just make sure you have your Akismet plugin activated to catch some of the spam for you. To do this, go to Plugins, and activate “Akismet”. You will need to get a free API key, just follow the instructions given when activating. There are also plugins which add a Captcha to your registration page, just search the WordPress plugin repository to find these.

2. Register users yourself individually

If you have a small number of users to register, you can just register them yourself.

Login to your WordPress admin area, go to Users > Add New and add each user individually.

Sidebar Commander

The Sidebar Commander

This is the most advanced way to control your widgets and widget areas ever created.

Create new widget areas, fill them with widgets, and place them on any post/page you want. To make things easier here’s a project based example of what you can do with the Sidebar Commander.

Video Tutorial

Add the Nivo Slider to a different page

You know how to add the slider to your homepage, but how do you get it on a different page?
Add Custom Widget Areas
1. Go to Appearance => Widgets, and create a new widget area

Give it a name, and click the blue +options text. Select “Main Content” widget area type, then click add new.



Advanced Nivo Slider Widget
2. Drag the Nivo Slider widget into your new widget area, then set your options


3. Go to Pages => Add New, and create the page you want the slider on

4. On the page edit screen, select Template: Widgetized Page (on the right sidebar). Publish or save your page.

Page Sidebar Commander
5. Scroll to the bottom of the page to the Sidebar Commander box, click the “Main Content Area” tab, and click your new widget area. Save or update your page.

If you view this page live, you will see that your Nivo Slider is now there! If you want to make this a full width slider, go back to your page edit screen and choose “Full Width” under Column Layout on the right sidebar.

You can add text and other things to your page by going back to Appearance => Widgets, and dragging another widget underneath your new slider.

Installing a Child Theme

If you want to make a lot of customizations to your site, you will want to install a child theme and make your changes there.

A child theme is simply a different folder to store your changes. In its simplest form, it’s a folder with a single style.css file in it. The point of a child theme is to keep your changes in a separate place so they don’t get overwritten when you update your parent theme (FitPro).

We have provided a starter child theme for you, you can download it from your account dashboard.

Install and activate your child theme

  1. After downloading your child theme, login to your WordPress admin area. Go to Appearance => Themes.
  2. Click on the “Install themes” tab at the top, then click the blue text that says “Upload.”
  3. Find the child theme .zip file, upload it, and activate it.

That’s it! Now you can go to Appearance => Editor and make any changes you desire.

Changing the Font

FitPro uses Cufon font replacement, which looks cool but makes it a little more difficult to change.

The Easy Way

Platinum users – Click here to download this child theme with Cufon disabled. Then install and activate it using the steps above. (Delete the child theme you already installed before if necessary).

Standard users – Click here to download this child theme with Cufon disabled. Then install and activate it using the steps above. (Delete the child theme you already installed before if necessary).

Once you have uploaded and activated the child theme, you can add your own fonts via the style.css file in the child theme. You can also use a plugin such as this one: Google Fonts Plugin.

The Hard Way

To change the font, add the code below to your functions.php file. (*Note: If you don’t have a functions.php file in your child theme, you will need to create one. Make sure there are opening and closing php tags, but don’t have more than one of each!)


function disable_font() {

wp_deregister_script( 'cufon-yui' );
wp_deregister_script( 'cufon-impact-400' );
wp_deregister_script( 'cufon-custom' );
wp_dequeue_script( 'cufon-yui' );
wp_dequeue_script( 'cufon-impact-400' );
wp_dequeue_script( 'cufon-custom' );
}
add_action( 'wp_enqueue_scripts', 'disable_font', 11 );

Save the file, then switch to the style.css file and add your new font like this:

body {
font-family: Palatino, Georgia, serif;
font-size: 14px;
}

You may also want to change the headings like this:

h1, h2, h3, h4, .entry-title, .page-title, .widget-title {
font-family: Palatino, Georgia, serif;
font-weight: bold;
}

Modify as necessary.

Couldn’t find what you were looking for? Why not contact us now and let us know, so we can add it to the list above!