“HEAL Theme” Documentation by “raybreaker”


“HEAL Theme”

Created: 25/09/2012
By: raybreaker
Email: raybreakr@gmail.com

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!


Table of Contents

  1. Installation and setup
  2. Setting up Google Maps
  3. How to add new slide to slider
  4. Setting up Twitter Feed
  5. Setting up Blog
  6. Theme option
  7. Navigation menu
  8. Add image to gallery
  9. Widgets
  10. Contact form
  11. Theme files
  12. Sources and Credits

1. Installation and setup - top

Before installation of theme make sure that your have working version of WordPress (for more information regarding installing WordPress visit WordPress Codex).

STEP 1 Download and unzip file with theme from Themeforest.

STEP 2 Find "wpheal" folder that located in your unzipped theme folder and move it to "your_wordpress_folder/wp-content/themes".

STEP 3 Activate theme in Wordpress Dashboard > Appearance > Themes.

STEP 4 Install Contact Form 7 plugin:

STEP 4.1. Navigate to Wordpress Dashboard > Plugins and then click "Add New".

STEP 4.2. In field "Search" type "Contact Form 7" and click "Search Plugin" button.

STEP 4.3. Click "Install Now" link under Contact Form 7 plugin.

STEP 5 (optional step) Import example data:

STEP 5.1. Navigate to Wordpress Dashboard > Tools > Import and then click WordPress.

STEP 5.2. After installation of importer click on "Choose File" button and choose file "demo_content.xml" that located in your theme folder and then click on "Upload file and import" button.

STEP 5.3. Reassign the author of the imported item to an existing user of your site and click on checkbox "Download and import file attachments". After you do this click on "Submit" button and wait until all data will be import.

Congratulations! You have just finish installation of HEAL theme.

2. Setting Up Google Maps - top

This theme has two build-in google maps (at home and contact page).

To make google maps work your should obtain Google Maps API keys and enter it in Google Maps API Key field that located in "Wordpress Dashboard > Appearance > Theme Option > Google Maps"

2.1 Where to find coordinates of place - top

STEP 1. Open Google Maps and find desired location

STEP 2. Right-click on that place and then choose "What's here?"

STEP 3. Copy coordinates in the search box

3. How to add new slide to slider - top

STEP 1. Navigate to "Wordpress Dashboard > Slides" and click on "Add New" link.

STEP 2. Enter title of slide in the title field and subtitle in the description field.

STEP 3. Click on "Set featured image" link and select picture that will be use as slide image (note: image should be 1730x656px to display correctly).

STEP 4. Click on "Publish" button to add slide.

Note you may hide title of slide and wrap slide in to link with help of Metabox that displayed below content field.

4. Setting up Twitter Feed - top

STEP 1. Go to http://dev.twitter.com/apps and sign up (or sign in with your Login and Password) there;

STEP 2. Click on "Create a new application" button. The name and description of your application can be anything you like and the website field doesn’t have to be the site where your Twitter feed are located.

STEP 3. On the next screen, click on "Create my access token" button. You may need to refresh the page after a few seconds if it doesn’t appear automatically.

STEP 4. Copy value in Consumer key, Consumer secret, Access token, Access token secret fields.

STEP 5. Open get-tweets.php file in your theme folder and insert value that you copy in previous step on line 7, 8, 9 and 10 accordingly.

5. Setting up Blog - top

To add new post in to blog you should go to "WordPress Dashboard > Post > Add New".

If your want to display thumbnail image before post's text just add feature image to them (the image should be 900x380px to display correctly).

HEAL has 3 build-in variation of blog page:

To set it up go to "WordPress Dashboard > Pages" and find pages with name "Clinic Blog".

While editing it click on select field "Template" and choose suitable template for your.

6. Theme option - top

HEAL theme has build-in plugin OptionTree that let you easily setting every aspect of this theme without any knowledge of PHP, HTML and CSS.

To start setting theme navigate to "Wordpress Dashboard > Appearance > Theme Option".

HEAL theme support custom navigation menu (enables a user to create navigation menu by easy drag-n-drop mechanism). You may learn more about custom navigation menu here: WordPress Menu User Guide

To start setting menu navigate to "Wordpress Dashboard > Appearance > Menu".

STEP 1. Navigate to "Wordpress Dashboard > Gallery" and click on "Add New Image" link.

STEP 2. Enter title of image in the title field and description in the description field.

STEP 3. Click on "Set featured image" link and select picture that will be use as gallery image (note: image should be 1024x680px to display correctly).

STEP 4. Click on "Publish" button to add image to gallery.

HEAL has 3 build-in variation of gallery:

To set it up go to "WordPress Dashboard > Pages" and find pages with name "Gallery".

While editing it click on select field "Template" and choose suitable template for your.

9. Widgets - top

This theme comes with 6 build-in sidebar widgets. You may learn more about widgets here: Codex - WordPress Widget.

To start setting up widget navigate to "WordPress Dashboard > Appearance > Widgets".

10. Contact form - top

Both contact form that comes with this theme (contact us form and online appointment form) build with help of Contact Form 7 plugin. To learn more about this plugin visit: Contact Form 7 Docs.

To start setting up contact form navigate to "WordPress Dashboard > Contact".

11. Theme files - top

11.1. Theme layout - top

This theme is a responsive layout with two and one columns. All of the information within the main content area is nested within a div with an class of "container". The sidebar's (column #2) content is within a div with an class of "right-content". The general template structure is the same throughout the template.

Example of general content structure with two columns.

HTML Structure

Example of general content structure with one columns.

HTML Structure

If you would like to edit the color, font, or style of any elements in one of these columns, you would do the following:

	
		.left-content div {
			color: #someColor;
		} 
		

If you find that your new style is not overriding, it is most likely because of a specificity problem. Scroll down in your CSS file and make sure that there isn't a similar style that has more weight.

I.E.

		.containter .left-content div {
			color: #someColor;
		}
		

So, to ensure that your new styles are applied, make sure that they carry enough "weight" and that there isn't a style lower in the CSS file that is being applied after yours.


11.2. CSS files and structure - top

Style.css file may be found in "wpheal" folder all other CSS file located in "wpheal/css". I'm using four CSS files in this theme.

The style.css file contains all of the specific stylings for the page. The file is separated into the following sections:

	/*   ------- Reset Style Section -------   */

	some code

	/*   ------- General Style Section -------   */
	
	some code
	
	/*   ------- Skeleton Section -------   */
	
	some code
	
	/*   ------- Heal Theme Style Section -------  */
	
	some code
		

The nivo-slider.css file contain styles for the slider that used on main page.

The lightbox.css file contain styles for lightbox plugin. I don't recommend to edit this file use API instead.

The jquery-ui.css file contains styles for the widget (you may find example of using widget on widget.html page). Change the styles that placed outside of the sections listed below are not recommended:

	/*   ------ Accordion Style Section ------   */

	some code

	/*   ------ Tabs Style Section ------   */
	
	some code
	

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.


11.3. JavaScript files - top

All JS files can be found in "wpheal/js" folder. This theme imports five Javascript files:

  1. bxslider.js
  2. nivo-slider.js
  3. lightbox.js
  4. ztwitterfeed.js
  5. jflickrfeed.js
  1. bxslider.js create slider that shows latest blog post (used at Main Page);
  2. nivo-slider.js implement main slider;
  3. lightbox.js used to enlarge images with beatiful animation (used in Gallery);
  4. ztwitterFeed.js create twitter feed;
  5. jflickrfeed.js create flickr feed.

11.4. PSD files - top

I've included two psds with this theme:

  1. The logo (heal_logo.psd)
  2. Social network icon (social_network.psd)

Nevis and PT Sans font that used in heal_logo.psd may be download from fontsquirrel.com: Link for Nevis and Link for PT-Sans.

If you'd like to change the logo, open "heal_logo.psd", make the necessary adjustments, and then save the file as "heal_logo.png" in the images folder. Do the same for the social network.

12. Sources and credits - top

I've used the following images and icons:

Following images used in preview but not comes with theme (they can be purchased separately on Photo Dune):

I've also used the following plugin:


Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my 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.

raybreaker

Go To Table of Contents