Clinico

Premium Medical and Health Theme

• Created: 10/14/2014
• latest Update: 11/19/2014
• Theme version: 1.2.0
• Manual version: 1.2.0
• By: Creative Web Solutions
• Email: support@cwsthemes.com

Thank you very much for your purchase. This guide will walk you through every aspect of setting up your new website. If you ever have any questions, please kindly send us e-mail. You can also follow us on Twitter and Themeforest to keep track of all our theme updates and future themes.

WooCommerce! Please note, in case of importing WooCommerce demo content, don't forget to regenerate thumbnails so that all your product images would look the same as shown on our demo site. The default size of all product images is 200 x 200px.

Theme Installation

Installing your new theme is an easy process. The steps bellow will guide you through:

1. Download the ZIP package from Themeforest Dashboard and Unzip it.
2. Inside you will find the file named clinico.zip.
3. Log in into your Wordpress Dashboard and click Appearance > Themes tab.
4. Next click the Install Themes button, then click Upload.
5. Click Browse and locate the above mentioned clinico.zip, click Install Now.
6. After the theme has been installed click Activate Theme , your new theme is set up and ready!
7. If you prefer to manually upload the theme via FTP you should unpack clinico.zip into Clinico folder and transfer this folder into /wp-content/themes directory on your FTP, so your FTP path should be /wp-content/themes/.

One Click Demo Import

Save your time! One click demo import content is already implemented into this theme!

1. Activate your theme.
2. Install all the bundled plugins.
   Click "Begin installing plugins":
   

   ---

   Choose all pluins, select "Install" and click "Apply" button:
   

   ---

   Here's installation result message:
   

   ---

   Now you should activate the plugins:
   

   ---

   To begin importing demo content click Tools -> Import -> CWS Demo Importer:
   

   ---

   Click the "Start demo content importing" button. Please note, if you wish to import the woocommerce demo content, install the plugin first.
   

   ---

   The import results should look like this:
   

   ---

   That's all, your demo content is setup and the site is ready to use.
3. Final step is to import Revolution Slider demo content:
   Click "Revolution Slider" -> "Import Slider":
   

   ---

   Slect the dummy file and click "Import Slider" button:
   

   ---

   Result should be like this:
   

   ---

All done! Your website should look the same as the demo one!

Manual Demo Import

Our theme comes with demo content files included. These files are located in the "Demo Content" folder of the downloaded package. Here's a description of each file:

1. clinico-demo-content.xml - the WordPress demo content file;
2. ThemeOptions-demo-settings.json - demo setting for Theme Options panel (it includes generated sidebars, layout settings, logo settings etc.);
3. revslider-demo.zip - Revolution Slider demo content.
4. woo-dummy-data.xml - Demo content for WooCommerce plugin;

The demo content import recommendations.

1. Install and activate the following plugins:
   - CWS PageBuilder (comes bundled with the theme),
   - Revolution Slider (comes bundled with the theme),
   - Contact Form 7 (By Takayuki Miyoshi),
   - WP Flexible Map (By WebAware),
   - WordPress Importer,
   - Woocommerce (if needed);
2. Import the demo content in this order:
   - clinico-demo-content.xml,
   - ThemeOptions-demo-settings.json,
   - revslider-demo.zip, - woo-dummy-data.xml (if needed)

1. Open the Tools -> Import tab and press the WordPress link. Press the "Install Now" button within the plugin installation popup:

   

2. Press the "Activate Plugin & run importer" link:

   

3. Press the "Choose File" button, select the appropriate demo dump file(only clinico-demo-content.xml and woo-dummy-data.xml can be imported using this method) and press the "Upload file and import" button:

   

Please note: you can get some warnings while importing the clinico-demo-content.xml file, however it's a normal behaviour and you shouldn't pay any attention to these messages. They have no influence on the demo content. Here they are:

Now, when the content is successfully imported, you should tune these parts of your website to make it look like the demo one:

1. Acitvate the Menu.
   Since the menu is not activated by default, you will see this notice: "Please enable menu in admin panel -> appearance -> menus".

   

   To activate the menu you should open the "Appearance" -> "Menu" tab.

   

   Afther this you will have your demo menu applied and working.
   However you can notice the "+" icon just at the top of each menu item:

   

   Here's how you can add any FontAwesome icon to your menu item:

   

2. Import the Theme Options demo settings.
   Just open your Theme Options panel, navigate to the Import/Export tab, press the "Import from file" button and select your ThemeOptions-demo-settings.json file. Then press the Import button and your settings will be imported.

   

3. Revolution Slider demo content.
   To import our demo Slider you should navigate to Revolution Slider tab and press the Import Slider button:

   

   Select the Slider Demo import file "revslider-demo.zip" and press the Import Slider button.
   After this you should get the following response:

   importing slider setings and data...
animations imported!
dynamic styles imported!
Slider Import Success, redirecting...

   After this your slider is setup and ready to use!
4. Demo content for WooCommerce plugin should be imported just the same way as the WordPress demo content, the only difference is the import file: "woo-dummy-data.xml"
5. Theme Widgets is the most interesting and useful section of this manual. With its help we can easily build such important website sections like:
   • Benefits,
   • Find a Doctor,
   • Footer,
   • Sidebars
   • and much more...
6. Benefits:
   First we should generate a sidebar for this widget area. Open Theme Options -> Layout Options tab and navigate to "Sidebar Generator". Using "Add More" button you can add as many sidebars as you need.
   We've generated the following sidebars for our demo:
   Page Left Sidebar, Page Right Sidebar, Blog Left Sidebar, Blog Right Sidebar, Photo Tour Sidebar, Content Elements, Woo Sidebar, Benefits, Toggle sidebar, Footer Sidebar and Footer Copyrights Sidebar.
   All these sidebars should have been imported if you imported the Theme Options demo settings file - "ThemeOptions-demo-settings.json".

   

   Now, when this part of work is ready, we should add widgets to our sidebars. Navigate to the Appearance -> Widgets section and add four "CWS Benefits" widgets to the "Benefits" sidebar and fill them with the needed content:

   

   
   Here we need to attach "Benefits" sidebar to the homepage. Open the Theme Options -> HomePage tab and select "Benefits" sidebar at the "Benefits Widgetized Area" section:

   

   That's all, now your benefits section looks the same as shown on the demo site:

   

7. Find a Doctor:
   This section is created about the same way as the above described "Benefits" with some minor differences:
   1) Use "CWS Doctor's Search" widget instead of "CWS Benefits":

   

   2) the sidebar should be attached here:

   

   That's all, your "Find a Doctor" section is ready:

   

8. Footer:
   This section can be created similarly to the above described sections. You can add there any widget you wish:

   

   the sidebars should be attached here:

   

9. Sidebars:
   Our theme comes with a great deal of page layouts which are built using sidebars. The sidebars can be assigned to all pages by default using our Theme Options panel here:

   

   Using Theme Options Panel you can define default layout settings for certain kind of pages. However it is possible to customize layout settings individually for each page, otherwise default settings will be applied:

   

10. So, now we're ready to assign one of the imported demo homepages as your current homepage. Open the Settings -> Reading tab, click the "A static page" radio button and select the "Home" page within the drop-down list, save the changes.

    

    After making all the above steps your website should look the same as our demo one.

Theme Customization

Our theme supports child-themes and includes a child theme (called "clinico-child") in the package.
If you plan to customize any page template, stylesheet or any other theme files we highly recommend that you use a child theme.

A child theme is a theme that inherits the functionality of another theme, called the parent theme. Child themes allow you to modify, or add to the functionality of that parent theme. A child theme is the best, safest, and easiest way to modify an existing theme, whether you want to make a few tiny changes or extensive changes. Instead of modifying the theme files directly, you can use a child theme and override within.

• Safe theme updates
• Easy to Extend
• Fallback Safe
• and much more

Retina Graphics

Our theme supports Retina Graphics and includes a script, which converts every uploaded image into retina-ready image. The only you should keep in mind is the image size. So, if you intend to use an image of a certain size (saying you'd like to use a 600x200px image), you should upload a double sized image (1200x400px in our example) to make look great on Retina displays.
The above method is good for blogs, galleries, featured images etc. however it won't work for your content images. The content images are not automatically resized so you should set the width and height for each image manually. For example, if you're going to insert an image of 300x300px you will need to set the width and height to 150x150px.

That's what is happening to our logo. As you've probably noticed, our demo logo dimensions are 390x100px, therefore we've set the width to 180px (half-size) manually to make it look great on all devices including Retina displays.

Options Panel

Clinico comes with a very powerful, intuitive and very easy-to-use Theme Options panel. You can access the options panel by logging into the Wordpress dashboard and clicking the "Theme Options" tab, located under the "Appearance" tab. With the help of our Options Panel you can customize our theme's look and functionality according to your needs. Settings like logo, color scheme, patterns, page layouts, typography, social links and many other options are easily setup with its help.

• General Settings - here you can upload logo and favicon, add google analytic and tracking code

• Display Options - various menu options and settings, like sticky menu, main menu positioning, assign a technical category*, enable comments on posts and pages.

• Styling Options - this tab helps you to customize look and feel of your new website. Here you can choose the right color scheme, patterns, background, set the boxed or wide layout.

• Layout Options - assignment of default page, footer, benefits, sidebars and new sidebar generations.

• Typography - this section gives you the opportunity to customize your theme's font type, color, size, weight etc.

• HomePage - here you can customize your homepage settings: slider type, layout, sidebar, benefits area.

• WooCommerce - using this cryptically named section you can select desired shop layout and assign number of products per page.

• Social Options - everything about social accounts to your website.

• Import / Export Options - here you can backup/restore or import your theme's settings.

A "technical category" is a special category(-ies), posts from which should never be shown on a homepage, blog lists etc as they are. Those posts require special treatment and serve for rendering pricing tables for example.

Content Management

Content management of our theme is divided into two parts: CWS Builder and Shortcode Generator.

• CWS Builder - we build this plugin so you can create a visual grid of your page and fill it with the needed content. Drag and drop, cloning of its design blocks and assigning specific to each block setting are among its features. Design blocks are divided into two groups - rows and modules. Currently Text, Tabs, Accordions modules are supported.
• Shortcode Generator - our theme utilizes a very powerful and easy-to-use shortcode generator. It will help you to generate various content and insert it into your website.

Portfolio

Portfolio Setup

Clinico theme comes with various portfolio pages. All thumbnail images are automatically resized according to one of the following page layouts:

• 4 Columns
• 3 Columns
• 2 Columns
• With Sidebar
• With Double Sidebars
• Full-width

Here are instructions for creating a portfolio page:

1. First, let's create a Portfolio category that will be used for your portfolio items. Any category can serve as a filter, so you have to create some categories if you plan to create a filtered gallery.
2. Log into your Wordpress dashboard and click Portfolio > Categories.
3. Enter a category name and click Add New Category.
4. Now you are ready to start creating portfolio items. Click Portfolio > Add Portfolio Item.
5. Name this item and make a brief description in the content section.
6. Assign a "featured image". If you want to override the popup image which you've just set as featured, you should fill in the "Custom URL" field. The popup item can be an image, youtube video, flash movie or iFrame. Here are samples to show how these URL's should look:
   • Image: http://www.yourdomain.com/wp-content/uploads/project1.jpg
   • YouTube: http://www.youtube.com/embed/L9szn1QQfas?autoplay=1
   • Flash: http://www.adobe.com/jp/events/cs3_web_edition_tour/swfs/perform.swf?width=792&height=294
   • Vimeo: http://player.vimeo.com/video/8245346
   • iFrame: http://www.apple.com?iframe=true&width=850&height=500
7. Now insert the URL for the popup item (see examples above) into the 'Custom URL' field. If you leave it empty, the featured image will be used as a popup.
8. Check the "Use direct URL instead of the popup" checkbox in case you'd like to open the URL on a new page.
9. Repeat those steps for creating as many portfolio items as you wish.
10. The next step is to create a new Portfolio Page which will show your portfolio items you just created. Click Pages > Add New and insert the portfolio shortcode using Shortcode Generator into the content.
11. Now you can select the sidebar position located at the bottom of the page and save your changes.
12. That's all, your portfolio page is ready!

Staff & Services

Our Staff & Services post type may seem a little bit complicated due to its huge number of options. However the image bellow will give you a brief preview of its structure and will explain the way how you should use it.

The post type consists of the following elements:

• Staff - staff members of your institution (clinic for example);
• Staff Department - departments of the current institution, including staff members, featured image, procedures and upcoming events, associated with this department;
• Procedures - Title and price list of services provided;
• Positions - Staff positions are here;
• Treatments - Treatments, specific to staff members, eligible to provide ones. This is a searchable taxonomy to help you find a specific specialist

Here's a schematic view of the above mentioned taxonomies dependencies and relations:

Let's see how the following services block was built:

1. First, we create Procedures (parent will serve as a title) and Prices (sub-procedures - we're using it as prices):

   a) Procedure
   

   b) Sub-procedures
   

   c) The results
   

   Here you can create as many procedures as you wish. It could be a medical services price list for example.

2. Next step is to create doctors' positions, however it's not a must as it can be added while creating a staff member:

   

3. The following screen shows the way you can add treatments:

   

   The treatments are used on the doctor's page and they're also searchable:

   

4. Next step is to create the needed departments and assign the appropriate Procedures and Events (in case of using Events Calendar):

   

   From the screenshot above you may notice the Events Calendar integration possibility("Events associated with this Department"). The integration is very easy, you should create an events category and fill it with some events. After this your category will appear in the "Events associated with this Department" drop-down box where you can assign it to the needed department. As a result you will have an URL, which will be displayed near the department's description.

5. Now, we're ready to create staff members (doctors) and assign them to the appropriate procedures and departments:

   

6. Here's the resulting services accordion as you see it on your page:

   

Slider

Our theme uses a very powerful Revolution Slider plugin. The slider's documentation may be found here.

Contact Page Setup

• Contact Form 7
• Really Simple CAPTCHA
• WP Flexible Map By WebAware

Social Networks Setup

With the help of our Theme Options you can add as many social networks as you wish. Image bellow describes the way you can add the networks:

Twitter Setup

• The first thing that you will need is a Twitter account. Note that the account that you create need not be the one that you are retrieving status updates (tweets) from.
• Go to http://dev.twitter.com and login with your developer account, or your new, regular account. If you are doing the latter, Twitter will automatically create a developer account for you from your regular one.
• Hover over your username (upper right) and click "My Applications".
• Click "Create a new application" and enter the necessary information. For the "Callback URL", enter the URL of the website on which you will be using this plugin. NOTE: the "Callback URL" is optional and is only necessary if you plan to use callbacks.
• Once your Application has been created, click on "Create my access token", at the bottom of the "Details" tab on the application's page.
• 6. Now, when you have all of the necessary keys, secrets and tokens necessary for using Twitter plugin, open the "Socials" tab within your Options Panel and fill in the required fields located under "Twitter App Credentials" section.

Multi Language Setup

Our theme supports WPML plugin (wpml.org) with its help you can easily translate your website into any language you wish. In case you need to translate your website, you should install the plugin and activate it. Then you can customize the flag position and its look, save your settings and the flag appear on your website:

Events Calendar Setup

Our theme supports Events Calendar and Events Calendar Pro plugins. So, if you need to setup a schedule manager you can easily use the above mentioned plugin. This plugin doesn't require any initial settings, you just install, activate and use it.

WooCommerce Setup

Our theme supports WooCommerce plugin, so you can just install and activate the plugin to start using your shop.

Please note, in case of importing the demo content for WooCommerce, don't forget to regenerate thumbnails so that all your product images would look the same as shown on our demo site. The default size of all product images is 200 x 200px.

JavaScript

This Theme is bundled with the following Javascript files.

1. jquery.fancybox.js. Refer to the author's documentation for additional notes on how to use it.
2. owl.carousel.min.js Refer to the author's documentation for additional notes on how to use it.
3. jquery.mousewheel-3.0.6.pack.js Refer to the author's documentation for additional notes on how to use it.
4. isotope.pkgd.min.js Refer to the author's documentation for additional notes on how to use it.
5. jquery.retina.js Refer to the author's documentation for additional notes on how to use it.

Sources and Credits

In our work we've used the following resources:

• jQuery Plugin: Fancybox - http://fancybox.net
• jQuery Plugin: Twitter(tweet.js) - http://www.queness.com/post/8567/create-a-dead-simple-twitter-feed-with-jquery
• Theme Options Framework - http://reduxframework.com/
• Maps - Maps.Google.com used in live demo

Once again, thank you so much for purchasing our Theme. We'll be glad to help you in case of having any questions relating to it. We'll do our best to assist and help.