FitX Installation & Setup

FitX Fitness WordPress Theme

Page Contents

Getting Started

So you bought FitX, 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 FitX, you must have a hosted website domain.

Need hosting? Use our recommended host and get a special discount coupon here.

You can also use your own hosting, as long as your host supports WordPress (which is almost all hosts these days).

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 FitX

Ok, now for the good part. Let’s get FitX 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 FitX theme

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

Setting Up FitX

This video covers how to install default content, setup up your front page, and briefly discusses widgets and menus.

FitX Options

FitX 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 > FitX Options.

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

FitX Theme Options

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, font, 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.

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.

Nivo Slider

(This video is using the FitPro theme, but the Nivo Slider works the same way in FitX)

Testimonials

Using the new testimonial custom post type feature, you can group and display your testimonials easily. Rotate them on each page, and use the shortcode to put them anywhere. This video explains how.

FitX Custom Widgets

(This video is using the FitPro theme, but the widgets work the same way in FitX EXCEPT for the testimonials)

Video Tutorial

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

FitX Opt-in widget

FitX 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 FitX 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. FitX takes care of the rest!

Testimonials Widget

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

FitX 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 FitX options page.

FitX Platinum Members Area

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

(This video uses the FitPro theme, but the FitX Members area works the same way.)

Video Tutorial

Add global content to the Members Area

When you activate FitX 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 FitX 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 (FitX).

Child Theme Downloads

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.

Add a Custom Header Background Image

This requires a little bit of code, but don’t worry! You can just copy and paste, it’s not hard.

1. First, you need to create your replacement image. The dimensions of the current background are 1259px × 312px, so try to make an image close to that size. Save your image as a .jpg or .png.

2. Next, upload your image to your media library. Go to Media => Add New in your admin area.

3. After uploading the image, copy the url (file path) of the image, as shown below.

media url

4. Go to Appearance => FitX Options, and add this to your custom CSS (If you are using a child theme, add it to your child theme stylesheet instead):

body #body-container:before {
background: url(http://yoursite.com/wp-content/uploads/your-image.jpg) no-repeat center top #000000;
height: 312px;
}

Replace the url with the one you copied in step 3. Make sure to only replace the url, but leave the parenthesis. You can also change the repeat, alignment, height, and color values as necessary.