Lifefitness - WordPress Multipurpose Retina-Ready Premium Theme

Go to top

## Theme infomation

Theme name: Lifefitness
Theme author: Ninzio Themes
Theme support: support@ninzio.com
Theme URI: http://www.ninzio.com/lifefitness
Description: Lifefitness Construction Business Responsive Retina-Ready WordPress Premium Theme
Go to top

## Installation

In your download pack find lifefitness.zip file. That is the file, that needs to be installed. You can install theme with wordpress admin panel or you can use FTP. For FTP you need to unzip the zip file and upload to wp-content > themes. Below is presented installation process. Follow steps to make installation in right way.

### Regenerate Thumbnails

Download Regenerate Thumbnails Plugin . Allows you to regenerate your thumbnails after changing theme. If you install Lifefitness theme on your existing wordpress installation, you need to regenerate your thumbnails to be compatible with Lifefitness theme thumbnails sizes, otherwise you need to resubmit all your images by hand.

### Permalinks

Once you installed Lifefitness theme you need to change permalinks structure to enable portfolio custom post type. To do that you need to go to your WordPress admin >> Settings >> Permalinks and change your permalinks to custom one: (/%category%/%postname%/). Do not forget to save changies.

Go to top

## Header

Header options provide you with a tons of options to controll styling, desing, typography of menu. First you need to create menu to see all header options effect.

To create menu go to Apperiance >> Menus. Name your menu and add items to menu. From theme locations asign your created menu to Header Menu location.

Menu has additional options, that extend default wordpress menu. Here you can have megamenu with columns, set background image for submenu, also highlighted menu labels.

Megamenu can be applied only to top level and only to Header location. To have megamenu set the option to true and choose megamenu columns. Also, you want to have background image for megamenu just upload the image with button.

If you need to give labels as highlight of menu items (submenu only) just enter the label text and give a background color of label and you will get colerfull labels for your submenu items.

If you want to add icons to menu items, just enable css classes from screen options, found in top right corner of menu admin page, and add icon name to css classes field. Icon names you can find in icomoon folder , that comes with help folder (check your download pack).

For menu you can control typography, fonts, colors, hover effects, padding and margin of menu items, submenu effects, styling. We are not going to cover all settings one by one, because they are descriptive by themselves.

Let us highlight some important moments of header creation. As you noticed, theme comes with header different state: static, stuck, fixed, mobile.

### Header version

Theme comes with 3 header versions, and each header version has a lot of controlls for design, colors, typography. Choose header version from theme options >> header, and configure your header. Each header version has different desing, for example header 1 comes with top bar, header 2 has separate menu area, header 3 is located under slider.

### Mobile

For mobile you can not controll colors, typography, you can just add different logo (both normal and retina).

### Sticky

Sticky header always comes with page scroll. It is fixed at the top of the page. It also inherits most of styles and controlls of static header state, so here you have limited options to controll extra features of fixed header.

Go to top

## Footer

Footer consists of footer area, with copyright info and footer widget area, where you can add widgets. Also here you can add your social links. Footer comes with basic styling. Colors, background image can be set from theme options >> footer. Widget colors are dynamicly adjusted from your footer color options.

Go to top

## Styling

General theme styling - here you can controll the main color of theme, give some styling to buttons, upload a background image or set a background color to site and also you can add cystom styles here. Styling is located in Theme settings >> Styling.

Go to top

## Typography

In typography section of theme options you can controll the website typography and also here you can upload custom font-family and use it in custom styling. When you uploaded custom font you need to write font-family style, to be able to use custom font family in content.

    	@font-face{
    		font-family: 'MyWebFont';
    		src: url('http://yoursite/wp-content/uploads/WebFont.eot');
    		src: url('http://yoursite/wp-content/uploads/WebFont.eot?iefix') format('eot'),
    		url('http://yoursite/wp-content/uploads/WebFont.woff') format('woff'),
    		url('http://yoursite/wp-content/uploads/WebFont.ttf') format('truetype'),
    		url('http://yoursite/wp-content/uploads/WebFont.svg#webfont') format('svg');
    	}

You need to change the path of each uploaded file to match your font family files and also give a name to your custom font family. Remember, if you want to have your custom font available in all major browsers, you need to have 4 types of custom font file: oet, woff, ttf, svg. All the patterns are included in code above, just make sure the path is correct.

After you uploaded and wrote a style for custom font family it is time to APPLY that font family to elements you want. If you want to asign custom font family to hole website as main font family go to theme options >> styling and add styles

    	body, button, input, select,
    	textarea, pre, code, kbd, samp, dt, optgroup {
    		font-family:'MyWebFont';
    	}

Just change MyWebFont to your font name.

If you want to apply custom font to headings too also add this style to custom css

    	h1,h2,h3,h4,h5,h6 {
    		font-family:'MyWebFont';
    	}

If you need custom font for buttons, just add this style:

    	button,
    	input[type="reset"],
    	input[type="submit"],
    	input[type="button"],
    	.button {
    		font-family:'MyWebFont';
    	}

Go to top

## Social

This option group gives you control over social elements in your website. First option is recent tweets customization. To get configuration options you need to create a twitter app and get twitter API attributes. Don't panic, we are going to cover this process step by step.

- Visit the Twitter Developers Site http://dev.twitter.com
- Sign in with your Twitter Account
- Go to "My Applications"

Once you’re logged in, click on the downwards arrow to the right of your Twitter image and select "My Applications". This is where all your registered Twitter apps will appear. Create a New Application. If you are new to the Developers site you won’t see any applications registered. wither way, it’s time to create our first application. To do this, click on the big "Create a new application" button.

Fill in your Application Details. It's been easy so far, but this screen often makes people confused. Don't worry, it's a lot easier than you think. First of all you need to give your app a unique name(one that no one else has used for their Twitter app). Since we're going to create app for personal use and not one that other people can register and use, just put your domain name in or perhaps even your name. You don't have to worry much about the description– you can change this later. Put your website in the website field– don't worry that it isn’t (as Twitter ask) your application's publicly accessible home page. However, this website will be where your app is hosted. Ignore the Callback URL field. Once you've done this, make sure you’ve read the "Developer Rules Of The Road" blurb, check the "Yes, I agree" box, fill in the CAPTCHA (don’t you just love them) and click the "create your Twitter Application" button. Hurrah!

If entered values are valid you will be taken to your oAuth settings page, were you can get your consumer key and consumer secret, ignore other information. We now need to authorise the Twitter app for your Twitter account. To do this, click the "Create my access token" button. This takes a few seconds, so if you don’t see the access tokens on the next screen, you may have to refresh the page a few times.

This access token will allow your Twitter application to read Twitter information. Once you've seen your access token and access token secret copy them and paste in appropriate text fields in option panel. The last two things that you need to do is provide twitter user ID to display tweets and numver of tweets to display. To get twitter user ID just copy username from url and paste it (example https://twitter.com/tutsplus copy tutsplus).

Go to top

## Custom post types

Lifefitness theme comes with custom post types Projects. We created handy tools to make your custom post types look beautifull and professional. Edit custom post types just like regular posts

Go to top

## Blog

Lifefitness comes with 10 post format (Standard, Aside, Audio, Video, Image, Gallery, Link, Quote, Status, Chat). Also we prepared useful functionality to make your posting more flexible. We are not going to cover all post formats here, bacause they are simple to use, just like regular standard post format. We will just highlight special moments of some formats.

###### Chat format

Chat post format supports title, content, categories, tags. To display chat you need to enter in content area your chat with this pattern:

    	Jain: hello, John, how are you?
    	John: hello, Jain, i am ok, what about you?

Be sure not to format this pattern, just paste plain text, because regular expression that handles chat format works exactly for this pattern.

Also each post can have separate styling for single post page title section

Go to top

## Woocommerce

All options for design and layout you can find in Lifefitness theme settings (Apperiance >> Theme settings >> WooCommerce). Here you can style shop header (Rich header), change product columns, choose sidebar position.

Woocommerce and Lifefitness integration is very simple, so you don't need additional customization to have shop. Just install woocommerce, create pages of woocommerce (the process is step by step) and customize your shop with settings, found in theme options. For shop layouts use Woocommerce product display options.

Go to top

## Widgets

Lifefitness theme comes with 11 widget areas and 8 custom widgets. Let's highlight most important customization of several custom widgets:

###### Facebook Like Box

Facebook like Box widget has its options:

- Title (Just like regular wordpress widgets title)
- Facebook page URL – enter the url of facebook fan page here, make sure it is valid url
- App Id from the App dashboard. Don't panic, we will explain how to get App Id.

Go to this links https://developers.facebook.com/apps/?action=create. You should see modal window with some fields.

- Give a unic name to your app
- Ignore app namespace
- Press continue
- Enter security code
- If everything is ok, you will be taken to app dashboard, here you can take App ID

- Show faces – Specifies whether to display profile photos of people who like the page.
- Show border – Specifies whether or not to show a border around the likebox.
- Show stream - Specifies whether to display a stream of the latest posts by the Page.
- Show facebook header - Specifies whether to display the Facebook header at the top of the likebox.

###### Photos from Flickr

Allows to display up to 10 photos from flickr. Just enter number of photos & flickr username (Flickr username or flickr id isn't actually the username you login with but rather a unique ID generated by Flickr. Its a slightly strange set of numbers at letter with an '@' symbol towards the end. For example12341234@N12

Finding it can sometimes be tricky, often its visible in the URL (take a look at the pic above) you see when you are browsing your photos, or there are numerous online tools that find it. Some useful online tools that will get your flickr id are:

- http://idgettr.com/
- http://www.adamwlewis.com
- http://flickrseek.com/

###### Mailchimp

To make mailchimp subscribe form work properly, you need some customization. Go to http://mailchimp.com/, sign in, go to lists >> Signup forms, select Embedded forms, and choose Super Slim, and from code give output action attribute from form and name attribute from input.

    	<!-- Begin MailChimp Signup Form -->
    	<link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
    	<style type="text/css">
    		#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
    		/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
    		   We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
    	</style>
    	<div id="mc_embed_signup">
    	<form action="//ninzio.us3.list-manage.com/subscribe/post?u=d4b8ae9364cc26cecfd46d335&id=23c55ddae5" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    	    <div id="mc_embed_signup_scroll">
    		<label for="mce-EMAIL">Subscribe to our mailing list</label>
    		<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
    	    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
    	    <div style="position: absolute; left: -5000px;"><input type="text" name="b_d4b8ae9364cc26cecfd46d335_23c55ddae5" tabindex="-1" value=""></div>
    	    <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
    	    </div>
    	</form>
    	</div>

    	<!--End mc_embed_signup-->

action - //ninzio.us3.list-manage.com/subscribe/post?u=d4b8ae9364cc26cecfd46d335&id=23c55ddae5

name - b_d4b8ae9364cc26cecfd46d335_23c55ddae5

Go to top

## Import/Export

Lifefitness has a lot of demo data. To import xml files follow the steps here http://ninzio.com/knowledgebase/demo-data-importexport.

Ninzio themes have different demo data included. Xml files for pages, posts, txt file for theme options and wie file for widgets.

To install demo data you need to follow these steps:

During installation process you need to install required plugins "One Click Demo Import" and "Regenerate thumbnails". Just follow the installation process. Once installed "One Click Demo Import" plugin you will see a new menu item in Appearance >> Import Demo Data

From Appearance >> Import Demo Data admin area choose the xml file (all.xml) and choose the widgets.wie file, click "Import demo data" button Once imported data go to Tools >> Regen. thumbnails and click the button "Regenerate All Thumbnails"

Next go to Appearance >> Theme options >> Import/Export And Import the options.txt file.

Also you need to assign imported menu to theme locations. Go to Appearance >> Menus from there go to "Manage Locations" and assign appropriate menu to appropriate location. If you have "Revolution slider" you will need to import it also. Go to Revolution slider wordpress menu and from there choose import slider, the slider demo file is a zip archive file

Go to top

## One page

If you need to create one page layout, you need to customize some options, found in theme options >> general, and also create page itself. First thing you need to do is create a page, with sections (row) that have unique id given to it (row id option). Try to name it as unique as possible. Use prefixed, like this: nz-about, nz-team, nz-contact

After you created your page you need to tell wordpress, that you are going to use this page as a one page layout. Under page editor find an option "one page", turn it on, now wordpress understands, that this page is going to be used as one page layout.

Next you need to assign your sections to menu. And here you have two options: if you want your one page navigation to be your header menu, you need to add sections to header menu. If you want your one page layout to have aside navigation with bullets, add menu items with your sections to One page menu.

First of course, you need to create a menu, go to Apperiance >> Menus and create a menu. And here is the important thing: if you need top level navigation as your one page layout navigation assign your menu to Header Menu, if you want aside bullets as your navigation assign your menu to One Page Bullets.

To add sections of one page to menu you need absolute path of your url + #id (example - http://mysite.com#nz-about). Only in this way your one page menu will work properly.

Now it is time to see theme options of one page layout. Go to theme settings >> general

First thing you need to do is to choose navigation type - bullets/top menu. Here you can also adjust speed of scroll. If you want to show id in your browser url field when navigating from section to section turn on layout hash.

Again one more important option - One page menu filter. If for some reason you need a top level menu, that has both internal links of one page layout and also external links, that are not part of your one page layout, here you need to enter comma separated ids if menu items, that you don't need to include. How to find menu ids? Use google chrome developer tool to inspect a menu item and find out id.

One more important thing - if you choosed one page bullets you need to give a title to menu item to make it vissible on hover.

Go to top

## Visual Composer

Lifefitness theme supports Visual Composer. All VisualComposer settings are available with Lifefitness theme. Some modifications and improvements done to make Lifefitness theme and visual composer union stronger.

VIsual composer settings should be adjusted as follows

Content types: pages, Disable responsive content elements: OFF (don't disable)

Lifefitness theme comes with a lot of shortcodes. Almost all of them have been integrated with visual composer. Some of viual composer shortcodes have been modified to make 100% of use.

Here we are not going to cover all elements, integrated in VC, because they are simple and intuitive. But we will highlight some important elements with important customization.

##### Row

First and one of most importat elements in Row. And the most important setting is Full width option. If you want your content to be 100% screen width, just set full width option to True.

##### Columns

We added animation options to columns and margin bottom toggle. Margin bottom toggle can be useful if for some reason you don't need native 25px margin-bottom of column.

##### Custom heading

Custom heading is native VC element, but it has some specific configuration. If you ever have problems with custom font-family select, this can fixed by activating file_get_contents() option from php.ini in your host. If it is local, you can activate it by yourself, if it is web server ask your provider to activate it.

##### Mailchimp

To make mailchimp subscribe form work properly, you need some customization: need action and name attributes. Infromation about how to find these attributes you can find at Widgets section of help file, see mailchimp.

Go to top

## Pages

Lifefitness theme provides you a good portion of handy options to manage each page individually. By default Lifefitness theme supports title and editor for pages and also page attributes metabox. Also we created several additional custom options for pages that can be found under editor. Each page rich header (title area of page) can be styled independently. You can set title, choose rich header background image, background color for rich header. Just make sure your image is large enough (in width and height), because your uploaded image will cover rich header background area.

Also here you can show sidebar of page, choose the sidebar position

Go to top

## WPML

First, you need to to purchase a recent version of WPML, including the String Translation and Translation Management modules.

##### Initial Setup

Install and activate the core WPML plugins (WPML Multilingual CMS, WPML String Translation, WPML Translation Management), and then other WPML plugins that may depend on them.

Set up WPML from WPML->Languages. See WPML Getting Started Guide for complete reference, but the initial simple three-step setup is self-explanatory, asking you to choose your default language, a set of active languages, and a language selector.

##### Translating Pages, Posts and other post types

To translate a page you need to go to Wp admin – Pages and in the list you will see columns for each active language, with a pencil icon (for "edit translation") or a "+" icon (for "add translation") next to each page. Go ahead and edit or add the translated page for "Home Default". Right now you just need to translate your page into the new language. Read this to easily duplicate your existing content.

##### Translating custom post types and taxonomies

Lifefitness comes with extra custom post types such as portfolios and testimonials, and custom taxonomies. In order to get a similar interface for translation/duplication as for posts and pages, you need to go to WPML->Translation Management, and select the tab "Multilingual Content Setup".

##### Translating Menus and Language Switcher in Header

WPML can synchronize menus for you. This means that if some entries, for example some pages, posts or categories, are in the English menu, WPML can generate and keep in synch menus for other languages pointing to the translated versions of these pages, posts or categories.

From WordPress Appearance->Menus you can see your existing menus and add menu translations and synchronize menus across translations.

To show the language switcher in the header you need to activate it from Theme options – Header options.

##### Translating theme texts and other strings in your site

To translate strings you need to follow the procedure for Theme and Plugin Localization. Go to WPML->Theme and Plugin Localization, and click on ‘Scan the theme for strings’ and you will see theme strings and which ones are translated or not.

Go to top

## Translation

Need to translate the theme into another language? No problem, it's fully localized and translation ready. Follow the simple steps below

- Download and install PoEdit. (PoEdit is a free software and its available for Mac, Windows and Linux. Download PoEdit from http://www.poedit.net/download.php)
- Create a new catalog (the local language file)
- Start PoEdit and click on the File menu and select the option New catalog from POT file.
- This will open the file dialog box. Go to the languages folder of the theme. Select All Files from the file dialog box, and open the en_US.po file in the languages folder.
- Now PoEdit will ask you for various configuration options. The most important thing here is to choose the correct country and language you are translating to.
- In the remaining fields of the configuration window, fill the required information or just leave them empty.
- Now click on the Paths tab and change the path variable to the place where your theme files are located.
- Then press OK.

Now PoEdit will ask you to name the file. Its very important to name the file correctly. The naming convention for these files is languageCode_countryCode. The language code must be in lower case while the country code should be in upper case. So, if you are translating the theme for UK English, the file name will be en_UK. Similarly, for translation to french, it will be fr_FR and so on. You can find a list of language codes and country codes here http://www.w3.org/WAI/ER/IG/ert/iso639.htm.

###### Translate the Theme:

This is the step where we will actually translate the theme. After Step 2 above, you'll see the standard interface of PoEdit where the left panel contain the strings in the original language and the right panel containing the translations. The right panel will be empty as we haven't started the translation yet.

Start translating each string one by one. Click on the first string and press Tab button. This will take you to the translation box in the bottom. Type the translation here. Your change will reflect immediately in the right panel. Once you are done with this string, press Enter and move on to the second string. Repeat this procedure until all the strings are translated. After the translation is done, save the file.

Then open wp-config.php located in the root of your WordPress installation and change line 72 to reflect your new language file.

###### Upload The Files To Your Server

When you save the catalog file in Step 3 above, PoEdit will create two files, a .po file and a .mo file. Upload both these files to the languages directory of your theme. Also upload wp-config.php to the root of your WordPress installation and you'll be good to go.

Go to top

## Misc

##### Separate Blog page and Front page

By default WordPress index (front) page shows blog latest posts. But if you want you can set separate pages for blog page and front page. To do this you need to create two pages.

- Go to pages
- Add new
- Name it Homepage/Home/Whatever
- Save it
- Add new page
- Name it Blog/Whatever
- Save it
- Go to settings > reading
- Choose "Front page displays" a static page and from dropdown menu bellow (Front page) select your created homepage
- Right after that in second dropdown menu (Posts page) select your second created page "Blog"
- Click Save changes button and that is all