“Wellness” Documentation by “BWThemes” for WordPress 3.0+

---

“Wellness WordPress Theme”

---

** TO INSTALL THE THEME ON A CLEAN WP VIA XML IMPORT ** - top

Please follow these steps if you wish to install the theme via XML import so you can copy the demo site on your own server, otherwise please continue below the Table of Contents to install the theme without demo content.

1. Go to Apperance > Themes > Install Themes > Upload and choose wellness.zip theme file included in your download. Click on Install Now, then click on Activate.
2. Go to Appearance > Install Plugins > Under Nivo Slider click on Install. Click on Return to Required Plugins Installer and then click on Activate under Nivo Slider.
3. Go to Plugins > Add New and search for "Contact Form 7" then click on Install Now. Then click on Activate Plugin.
4. Go to Tools > Import > WordPress and click on Install Now if not already installed. Then click on Activate Plugin & Run Importer. Select "Choose File" and find the "wellness-content.xml" file included in your main download zip file. Click on Upload file and import. This may take a few minutes, please be patient.
5. Go to Settings > Reading. For Front page displays select: A static page and Front Page: Home/Skins | Posts page: Blog. Click on Save Changes.
6. Go to Appearance > Menus. Under Theme Locations (Main Menu) select "Main Menu" from the dropdown and click on Save. Then on the top right corner of the screen, be sure to click on "Save Menu".
7. That's it! You should be up and running with a site that looks like the demo site. If you are still having issues, please contact us via our contact form on our ThemeForest profile page.
8. ** NOTE: If you still have an issue of the site not showing up correctly, try going to individual pages and make sure that each page has a Page Template assigned to it. Ex) Home/Skins page requires the Homepage Widget Template to be selected from the dropdown.

Table of Contents

1. Getting Started
2. Working with the Theme
3. JavaScript
4. Short Codes
5. Sources and Credits

---

A) Getting Started - top

This theme is a fixed layout with two columns, with a mobile friendly version which presents itself on screens smaller than 480px. The sidebar supports Widgets which will appear in the order they are inserted in the Admin area. The footer is comprised of 4 columns and is customizable using widgets inserted into 1 of the 4 widget areas. The homepage is an open template which supports formatting using the shortcodes provided to create any combination of content to achieve the appearance you wish.

It is recommended to use the following plugins:

1. Contact Form 7 for WordPress

---

B) Working with the Theme - top

Once you have WordPress installed and functioning, it is time to upload and activate this theme.

Installation

Open the downloaded ZIP file, it will contain another ZIP file inside it called "Wellness.zip". There are 2 methods by which you can install your new theme:

Save "Wellness.zip" to your computer. Log in to your WordPress site and go to "Appearance-->Themes" and click on the "Install Themes" tab. Select "Upload" and browse for the ZIP file you just saved to your computer. Once the upload is complete you can Activate the new theme from the Manage Themes tab.

Alternatively, you can extract the contents of "Wellness.zip" to your computer, FTP the folder to your WordPress themes folder location on your web server: WordPress installation root directory /wp-content/themes.

Congratulations! Now you're ready to start working with your new theme!

Theme Activation

Once you have your theme uploaded, go to Appearance-->Themes and activate the new theme.

NOTE: You will notice a message that indicates this theme includes Nivo Slider. Make sure to click on "Begin installing plugin", otherwise the theme will not include the ability to insert sliders into your pages! If you dismiss this message, you can go to "Appearance-->Install Plugins" and install the plugin.

Click on Install under Nivo Slider, and the slider plugin will be installed. You are now ready for the next step, and that is to set some theme options to get your website working with this theme.

 

Theme Options

One of the first things you'll want to do is setup your general theme options. Navigate to Appearance-->BW Theme Options, and fill out your website information you wish to appear in the template. The General Settings tab includes settings for your website slogan, Google Analytics code, custom Footer slogan, and links to your social media profiles. The Appearance tab lets you point the theme to your logo and favicon locations, and choose one of the color schemes that come with the template.

Menu Setup

To create the main menu that will appear across the top of this theme, go to Appearance-->Menus, then click "Create Menu" and name it "Main Menu". Add your pages/items to your menu and click "Save Menu".

Once you create your menu, you need to add it to the proper location. In Appearance-->Menus, make sure you select your newly created menu to be the Main Menu, and click Save.

Home Page Configuration

If you want to have a static page for your home page, and use shortcodes to create the layout, you will first need to create your page by going to Pages-->Add New. Use the shortcodes to create your page layout that best suits your needs. In the Page Attributes setting, make sure you select "Home Widget Template" as the Template for this page.

Once your page is created, make sure you set this as your Home Page in General-->Reading. Select "A Static Page" and point it under the Front page displays setting.

Home Page Slider

If you wish to include a slider on your home page, you will need to create your slider in the Nivo Slider menu. Select "Add New" and make sure you name your slider "homepage-slider" (without the quotes). NOTE: If you do not name it homepage-slider or save it without naming it, you will need to re-create your slider from start.

NOTE: Make sure you select "Responsive" for slider size. If you set it to fixed, it will not resize properly in mobile devices and small screens.

Creating a Photo Gallery

If you wish to create a Gallery of photos to display on a page, first create a page for your gallery. Then click on "Add Media" in the page editor, and upload the files you wish to include in your gallery:

Once the files have been uploaded, click on "Save all changes", which will show you the Gallery tab. Here, select how many columns to display, the order and where to link to. Once finished, click on "Insert Gallery". This will display the gallery shortcode inserted into your page.

For more information about adding photos to the gallery, Wptuts+ has a great overview: Click here to read more...

---

C) JavaScript - top

This theme imports nine Javascript files.

1. jQuery UI - http://jqueryui.com/
2. jQuery-ui-accordion - http://jqueryui.com/demos/accordion/
3. jQuery-ui-tabs - http://jqueryui.com/demos/tabs/
4. jQuery-bgiframe - http://docs.jquery.com/Plugins/bgiframe
5. fancybox - http://fancybox.net/
6. hover-intent - http://archive.plugins.jquery.com/project/hoverIntent
7. superfish - http://users.tpg.com.au/j_birch/plugins/superfish/
8. supersubs - http://users.tpg.com.au/j_birch/plugins/superfish/
9. bxSlider - http://www.bxslider.com/

---

D) Short Codes - top

This template supports many popular features using shortcodes (Shortcodes simplify content creation to make it easy for you so you don't have to remember complex HTML. You can read more here: http://codex.wordpress.org/Shortcode_API

1. [one_half] [/one_half]
2. [one_half_last] [/one_half_last]
3. [one_third] [/one_third]
4. [one_third_last] [/one_third_last]
5. [one_fourth] [/one_fourth]
6. [one_fourth_last] [/one_fourth_last]
7. [one_fifth] [/one_fifth]
8. [one_fifth_last] [/one_fifth_last]
9. [one_sixth] [/one_sixth]
10. [one_sixth_last] [/one_sixth_last]
11. [two_third] [/two_third]
12. [two_third_last][/two_third_last]
13. [three_fourth] [/three_fourth]
14. [three_fourth_last] [/three_fourth_last]
15. [two_fifth] [/two_fifth]
16. [two_fifth_last] [/two_fifth_last]
17. [three_fifth] [/three_fifth]
18. [three_fifth_last] [/three_fifth_last]
19. [four_fifth] [/four_fifth]
20. [four_fifth_last] [/four_fifth_last]
21. [five_sixth] [/five_sixth]
22. [accordion][accordion_content title="My Title"] [/accordion_content][/accordion]
23. [tabs tab1="Tab 1" tab2="Tab 2"][tab num=1] [/tab][tab num=2] [/tab][/tabs]
24. [tagline tagtitle="Title" tagbutton=1 tagbuttonsize="button-regular-medium" buttonstyle="orange" buttonlink="http://" buttonlinktext="Click"] [/tagline]
25. [pricetable col1="item" col2="price"][pricetablerow col1="Item 1" col2="$Price"][/pricetablerow][/pricetable]
26. [button buttonsize="medium" buttonstyle="orange" buttonlink="http://"] [/button]
27. [googlemap] [/googlemap]
28. [messagebox msgstyle="green"] [/messagebox]
29. [staffbio staffname="Name" staffimage="http://link-to-image.png" stafftitle="Title" stafffax="###" staffphone="###" staffemail="email@em.ail.com"] [/staffbio]
30. [testimonials][testimonial] Add Blockquote(text) and Cite(author) [/testimonial][testimonial] Add Blockquote(text) and Cite(author) [/testimonial][/testimonials]

NOTES:

Shortcodes 1-21 are used to create columns within your pages. Just make sure to always use the _last designation on the last column.

To use the Accordion shortcode, you must first specify [accordion]. Each accordion element must then be wrapped inside an [accordion_content] tag, which includes 1 parameter "title" for the title of the panel. Here is an example:

[accordion]
[accordion_content title="My Title"]Text of the accordion panel goes here[/accordion_content]
[/accordion]
			

To use the Tabs shortcode, you must first specify [tabs], which includes 1 parameter "tab1"...to "tab10", to specify the title of the tab.. Each tab must then be wrapped inside an [tab] tag, which includes 1 parameter "num" for the number of the tab. Remember the maximum number of tabs is 10. Here is an example:

[tabs tab1="Tab 1 Title" tab2="Tab 2 Title"]
[tab num=1]Text of tab 1 goes here[/tab]
[tab num=2]Text of tab 2 goes here[/tab]
[/tabs]
			

To use the Tagline shortcode, it is contained within the single [tagline] shortcode. The parameters for the Tagline shortcode are:

tagtitle -- The title line

tagbutton -- 1 for YES, 0 for NO (YES if you want a button on your tagline)

tagbuttonsize -- Several sizes of buttons which correspond to the button shortcode: button-regular-small, button-regular-medium, button-regular-large

buttonstyle -- Several colors are available: purple, aqua, rouge, orange, red, blue, green, earth, bluesea, mauve, light, dark

buttonlink -- Enter the URL to which you want your button to link to

buttonlinktext -- Enter the text of the button, ie. Click Here

Here is an example:

[tagline tagtitle="Title" tagbutton=1 tagbuttonsize="button-regular-medium" buttonstyle="orange" buttonlink="http://" buttonlinktext="Click"]
The 2nd Line of text for your tagline goes here
[/tagline]
			

To use the Pricetable shortcode, you must first specify [pricetable], which includes 1 parameter "col1"...to "col10", to specify the title of the column.. Each row content must then be wrapped inside an [pricetablerow] tag, which includes 1 parameter "col1"...to "col10" for the number of the column. Remember the maximum number of columns is 10. Here is an example:

[pricetable col1="Column 1 Title" col2="Column 2 Title"]
[pricetablerow col1="Item 1" col2="$Price 1"][/pricetablerow]
[pricetablerow col1="Item 2" col2="$Price 2"][/pricetablerow]
[/pricetable]
			

To use the Button shortcode, it is contained within the single [button] shortcode. The parameters for the Button shortcode are:

buttonsize -- Several sizes of buttons which correspond to the button shortcode: small, medium, large

buttonstyle -- Several colors are available: purple, aqua, rouge, orange, red, blue, green, earth, bluesea, mauve, light, dark

buttonlink -- Enter the URL to which you want your button to link to

Here is an example:

[button buttonsize="medium" buttonstyle="orange" buttonlink="http://"]
Button Text
[/button]

To use the Googlemap shortcode, it is contained within the single [googlemap] shortcode. Go to maps.google.com, find the address you wish to provide a map for. Then click on the "link" icon to provide a link. Copy the text from the "Paste HTML to embed in website" input box. This is what you will insert between the Googlemap shortcode.
Here is an example:

[googlemap]
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/?ie=UTF8&ll=40.07304,-74.724323&spn=7.018476,14.27124&t=v&z=7&output=embed"></iframe> 
[/googlemap]

To use the Messagebox shortcode, it is contained within the single [messagebox] shortcode, with one parameter "msgstyle". The msgstyle parameter accepts 4 options: green, red, blue, yellow. Each will display the corresponding message box and icon.
Here is an example:

[messagebox msgstyle="green"]Text of the message box[/messagebox]

To use the Staff Bio shortcode, it is contained within the single [staffbio] shortcode. The parameters for the Staff Bio shortcode are:

staffname -- name of the staff member

staffimage -- URL to the staff member's portrait. It is recommended the image be maximum of 230px x 300px. (Optional)

stafftitle -- staff member's title

stafffax -- staff member's fax number (Optional)

staffphone -- staff member's telephone number (Optional)

staffemail -- staff member's email address (Optional)

Here is an example:

[staffbio staffname="Name" staffimage="http://link-to-image.png" stafftitle="Title" stafffax="###" staffphone="###" staffemail="email@em.ail.com"]
Staff Bio
[/staffbio]

Theme Styling Features

We have included several styling features in the theme you can use for your website. Packaged with the theme are several icons you can use as paragraph placeholders as well as different styles of list item icons. Below are examples of each, along with the CSS class to call:

List icons:

UL class="list1"

UL class="list2"

UL class="list3"

UL class="list4"

UL class="list5"

UL class="list6"

UL class="list7"

UL class="list8"

UL class="list9"

UL class="list10"

 

Header/paragraph icons:

class="icon cargo"

class="icon embed"

class="icon folder"

class="icon group"

class="icon imac"

class="icon iphone"

class="icon nameplate"

class="icon ok"

class="icon option"

class="icon roundabout"

class="icon sampler"

class="icon sort"

class="icon web_browser"

 

---

E) Sources and Credits - top

We've used the following images, icons or other files as listed.

• Ul List icons and paragraph icons: http://openiconlibrary.sourceforge.net and http://glyphicons.com/

---

Once again, thank you so much for purchasing this theme. If you have any questions, please use the Contact Form on our ThemeForest profile page: BWThemes. No guarantees, but we'll do our best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

BWThemes

Go To Table of Contents

---