MediCenter - Health Medical Clinic Theme

MediCenter is a responsive WordPress theme suitable for medical or health related projects or businesses. Theme is maintained in a minimalist and modern style with strong blue accents. Theme comes with wide and boxed layout - both fully responsive and optimized for all kind of devices.

PSD source files are available to all of our buyers. Please contact us to get the files. You will receive perfectly organized and layered Template plus all of the icons used within a project in full PSD vector.

Theme Features

  • Responsive Design
  • jQuery Powered
  • Full Width and Boxed Page Layouts
  • Page Builder with 40+ Components
  • 5 Demos to import: Main, Pregnancy, Ophthalmologist, Veterinary, Dentist
  • 6 Predefined Color Skins
  • Build in Color Picker to Customize the Theme Colors
  • 20+ Page Layouts
  • 6 Homepage Layouts
  • Customizable Theme Option Panel
  • Build-In Schedule (Timetable) Manager
  • CSS3 Compare Pricing Tables for WordPress (Value of $27) Included
  • Slider Revolution Responsive WordPress Plugin (Value of $109) Included
  • WPBakery Page Builder for WordPress (Value of $99) Included
  • WooCommerce Integration
  • Departments
  • Blog With Comments
  • Unlimited Sidebars
  • Different Gallery Layouts
  • Ajax Appointment Form
  • Map of Location
  • Sticky Menu
  • 105 Premium Font Based Featured Icons Included
  • 33 Font Based Social Icons Included
  • 800+ Fonts Variants to Choose
  • Fully Customizable
  • Latest Tweets
  • Support For Videos
  • Font Face Fonts
  • Retina Ready
  • Valid HTML5 code
  • Crossbrowser Compatible
  • Clean Design
  • Documentation Included

Instructional Videos

Please note: For importing dummy-content from live preview/demo page you need two files: dummy-data.xml and widget_data.json. You can find both in zip archive downloaded from ThemeForest.


Need HTML (non - WordPress) version?

There is also HTML version of this theme available. You can find it here: MediCenter Health Medical Template

Getting Started

1. Downloading theme archive

To install MediCenter on your WordPress website, you need to download the theme archive file from your Downloads section on ThemeForest. Downloaded archive will look like this 'themeforest-4718613-medicenter-responsive-medical-wordpress-theme.zip'. Please unzip this file and inside you will find 'medicenter.zip' archive (screenshot) which contains all theme files necessary to install the theme.



2. Theme installation

Please login to your WP dashboard and go to 'Appearance->Themes' panel, over there you can use the 'Add New Theme' option to install new themes. Click on 'Upload Theme' button located at the top left corner of the screen (near the 'Add Themes' page title, screenshot) and select the 'medicenter.zip' file from your computer, now use the 'Install Now' button and if everything goes right, you should notice 'Theme installed successfully' message (screenshot), after that you can activate the theme.



3. Plugins installation

Once the theme is active, you need to install required plugins, you can do that in 'Appearance->Install Plugins' panel. After installation please activate plugins.



4. Dummy data import

The last thing is to import the dummy data, this will create sample content and configure your WordPress settings, making your website look exactly as in our preview version. This step is optional, you don't need to install dummy content if you don't need it but it will help you to see how content has been configured on demo site, you can also take it as a base for your customized website. To do this, please go to 'Appearance->Theme Options' panel and click on 'Import dummy content' button, please remember that this can take some time, so you should wait until the confirmation message is displayed (screenshot). After that, your website will be ready and now you can start adding your own content or customize the theme. All steps from the dummy content process can be viewed on this instructional video.

How To?

1. How to install MediCenter theme?

Please read our Getting Started guide, it presents step-by-step instructions on how to install the theme. Alternatively you can install theme manually. In that case please connect with your FTP account using FTP client like FileZilla and now upload the unpacked theme directory to the 'wp-content/themes/' subdirectory, after that, you can activate it in Themes panel of WP dashboard.



2. What is the correct way to update the theme?

Theme update doesn’t affect your website/theme settings, also the content like: posts, pages, etc. will remain the same.

1. Download the latest theme version from ThemeForest downloads page.
2. If you have modified the theme or plugin files, then you need to create a backup, this way you won’t loose your changes.
3. Now switch to default WordPress theme and remove old theme (if you use child theme, then only remove the parent theme).
Theme includes the following plugins: WPBakery Page Builder, Slider Revolution, CSS3 Pricing Tables, if you notice in the update changelog that a new version of plugin is available, then in WP dashboard you should deactivate and remove it.
4. Now install and activate new theme version, optionally you can install plugin updates in 'Appearance->Install Plugins' panel.
5. If you were using child theme, then you can activate it now.
6. If your old theme/plugins were modified, then now you can use the backup files to apply the changes once again in the theme/plugin files. We suggest to keep all custom modifications inside the child theme, this way the update process is much simpler. You can find more on this here: support.quanticalabs.com/fo…

Alternatively you can update the theme manually by uploading new files using FTP connection. Please unpack the downloaded theme archive, login to your FTP account using FTP client (e.g. FileZilla) and replace the current theme files by uploading the newest ones. If your theme has custom modifications then you can upload only those files which were changed in theme update, you can check those files in the update changelog. This way you can keep most(or even all) of your modifications after the update.

3. How can I update the WPBakery Page Builder plugin?

Firstly you must update your theme to the latest version, which includes new version of WPBakery Page Builder plugin.
Now it’s necessary to delete old version of WPBakery Page Builder plugin, to do this please temporarily activate default WordPress theme (e.g. Twenty Fifteen) and visit Plugins panel, deactivate/delete "WPBakery Page Builder" plugin and once again activate MediCenter theme. If you use WordPress MultiSite installation, then just go to 'Network->Plugins' panel and delete the 'WPBakery Page Builder' plugin. Login once again to your website dashboard and you will be asked to install the VC plugin, follow the instructions and the update will be complete.
Alternatively you can make an update via FTP file manager. Please login to your FTP account and go to 'wp-content/plugins/' subdirectory and delete entire 'js_composer/' folder, after that visit your WordPress dashboard. You should notice new message at the top of a screen, that asks you to install the required plugin, follow the instructions and the WPBakery Page Builder plugin will be installed.



4. How can I setup a Child Theme?

To setup a child theme please first install the theme and import dummy data, instructions can be found here. Now please download this child theme archive support.quanticalabs.com/wp… and install/activate it in WordPress Themes panel. The name of the child theme is ‘Medicenter Child’ and it is possible that WordPress will deactivate widgets and main menu, so you will need to re-assign them in Widgets and Menus panel. After that your child theme should be working correctly. More details about Child Themes can be found here: https://codex.wordpress.org/Child_Themes



5. How can I translate the theme?

Theme supports translations. To create your language translation, please download this usefull tool Poedit. Then find in languages directory default.po file and open it in Poedit. Translate appropriate texts and save the file giving it appropriate name (check here for more). For example French: fr_FR, German: de_DE, etc.
Once the translation is finished, you must visit 'Settings->General' panel in your WordPress Dashboard and set language in 'Site Language' option.



6. How can I control the single post layout?

If you have imported dummy content you should see 'Single post template' page under 'Pages' admin menu. Please edit it using WPBakery Page Builder editor to control single post layout.

If you haven't imported dummy content you can create this template from scratch. To do that please add new page: 'Pages->Add New'. Name it 'Single post template' and select 'Single post' template for it under 'Page Attributes' box (screenshot). After that please switch content editor to WPBakery Page Builder by clicking 'Backend Editor' button and click on 'Templates' button (screenshot). The templates popup will be displayed, please select 'Default templates' tab from it (screenshot). Find 'Single Post Template' on the list and add it to your page. Template is ready, please publish it (screenshot) and from now you can edit it to control single post layout.



7. How can I control the blog layout?

If you have imported dummy content you should see 'Blog with sidebar' page under 'Pages' admin menu. Please edit it using WPBakery Page Builder editor to control blog layout.

If you haven't imported dummy content you can create this template from scratch. To do that please follow the instructions from point 6 (How can I control the single post layout?) but name the page 'Blog with sidebar' and select 'Blog' template for it under 'Page Attributes' box (screenshot). Please also use the 'Blog Template' as base for it from 'Default Templates' list (screenshot).



8. How can I control the search results page layout?

If you have imported dummy content you should see 'Search template' page under 'Pages' admin menu. Please edit it using WPBakery Page Builder editor to control search results page layout.

If you haven't imported dummy content you can create this template from scratch. To do that please follow the instructions from point 6 (How can I control the single post layout?) but name the page 'Search template' and select 'Search' template for it under 'Page Attributes' box (screenshot). Please also use the 'Search Template' as base for it from 'Default Templates' list (screenshot).



9. How can I control the single doctor page layout?

If you have imported dummy content you should see 'Single doctor template' page under 'Pages' admin menu. Please edit it using WPBakery Page Builder editor to control single doctor page layout.

If you haven't imported dummy content you can create this template from scratch. To do that please follow the instructions from point 6 (How can I control the single post layout?) but name the page 'Single doctor template' and select 'Doctor' template for it under 'Page Attributes' box (screenshot). Please also use the 'Single Doctor Template' as base for it from 'Default Templates' list (screenshot).



10. How can I control the single features page layout?

If you have imported dummy content you should see 'Single features template' page under 'Pages' admin menu. Please edit it using WPBakery Page Builder editor to control single features page layout.

If you haven't imported dummy content you can create this template from scratch. To do that please follow the instructions from point 6 (How can I control the single post layout?) but name the page 'Single features template' and select 'Single features' template for it under 'Page Attributes' box (screenshot). Please also use the 'Single Features Template' as base for it from 'Default Templates' list (screenshot).



11. What steps should I take after update from version 8.3 and lower?

MediCenter from version 9.0 is not fully backward compatible. We've added many improvements in code and for the layouts. So if you were using version 8.3 or lower and you have just updated theme, please follow below steps:

1. Home Slider has been replaced with Slider Revolution plugin. You can import new slider under 'Slider Revolution' menu in admin area (screenshot). For import, please use home.zip file which you will find in 'dummy content files' directory in the theme package downloaded from ThemeForest.
After the import please open your home page for edit and set the 'Template' for it to 'Default without breadcrumbs' (screen). Then please add new row in the content editor and insert 'Revolution Slider' component to it. In the row settings, please set 'Full width' type (screenshot). If you would like to have sidebar with home boxes on the slider, please add another row and insert 'Widgetised Sidebar' component to it. In the 'Widgetised Sidebar' component settings, please choose 'Sidebar Home Top' and set home-box-container-list for-home-slider in the 'Extra class name' field (screenshot). That's all, now your slider should look like the one on the demo site.

2. The default code for 'Text' widget in 'Sidebar Header Top' has been changed (screenshot). The new code below:

<div style='padding: 17px 0;' class='clearfix'>
<ul class='thin-list'>
<li>
[header_icon]2702 Memory Lane, Chicago, IL 60605[/header_icon]
</li>
<li>
[header_icon type='phone' url='tel:5102105225' url_target=''](510) 210-5225[/header_icon]
</li>
<li>
[header_icon type='mail' url='mailto:[email protected]' url_target=''][email protected][/header_icon]
</li>
</ul>

<div class="icons-list">
[mc_icon type="social" url='https://twitter.com/QuanticaLabs' icon_social='twitter']
[mc_icon type="social" url='https://www.facebook.com/QuanticaLabs/' icon_social='facebook']
[mc_icon type="social" url='https://www.pinterest.com/quanticalabs/' icon_social='pinterest']
[mc_cart_icon class='mc-icon']
</div>
</div>

3. The config for 'Appointment' widget has been changed. Please check new on this screenshot.

4. The config for 'Footer Box' widget has been changed. Please check new on this screenshot.

5. Sidebar Footer Bottom is displaying 4 columns now instead of 3. If you would like to have 4 columns there, please go to 'Apperance->Sidebars' and choose 'Sidebar Footer Bottom' for edit. Then set below values in the configuration (screenshot):
'Before widget':
<div id='%1$s' class='widget %2$s vc_col-sm-3 wpb_column vc_column_container'>
'After widget':
</div>
'Before title':
<h3 class='box-header'>
'After title':
</h3>

6. There is new 'Sidebar Copyright Area' available. Please add it under 'Apperance->Sidebars' and name it 'Sidebar Copyright Area'. Then you will see it under 'Apperance->Widgets': (screenshot). Below the code used for it by default:
<div class="icons-list">
[mc_icon type="social" url='https://twitter.com/QuanticaLabs' icon_social='twitter']
[mc_icon type="social" url='https://www.facebook.com/QuanticaLabs/' icon_social='facebook']
[mc_icon type="social" url='https://www.pinterest.com/quanticalabs/' icon_social='pinterest']
</div>

7. There is new menu location available - 'Footer Menu'. You can set a menu for it under 'Apperance->Menus->Manage Locations'.

8. There are new icons for 'Features' available. Please check all your features items under 'Features' in admin area and set the icons for them if necessary.



12. Have another questions?

Please check the FAQ section on our Support Forum.

CSS Styles

The project uses the following cascade of theme styles (in order):

  • animations.css - styles for animated elements,
  • jquery.qtip.css - default styles for tooltips (overwritten in style.css),
  • superfish.css - default styles for superfish menu,
  • prettyPhoto.css - default styles for prettyPhoto lightbox,
  • style.css - base styles for the entire project,
  • responsive.css - styles for responsive design (you can disable it under Appearance->Theme Options),
  • reset.css - styles which resets default browsers styles.

Javascript Files

Plugins and library


Other files

  • jquery.hint.js - script which supports hints on form inputs,
  • main.js - script contains all executable instructions of jquery plugins, events handlers etc.,
  • jquery.sliderControl.js - script which supports slide function for images in home slider and posts.

Theme Structure

Project is divided by four main files: index.php, header.php, footer.php and functions.php


index.php

It's main project file which calls other. It contains get_header and get_footer calls.


header.php

The file contains head section of the html tree structure. You can find here also wp_head call.


footer.php

The file contains bottom part of the page, including copyright area and footer area. You can find here also wp_footer call.


functions.php

The file contains definition/includes of the functions for:

  • widgets,
  • shortcodes,
  • sidebars,
  • ajax calls,
  • load javascript and css files,
  • base configuration,
  • menu generation,
  • custom meta box and options pages.

WPBakery Page Builder

WPBakery Page Builder documentation is available here.

Widgets

There are 10 build in widgets:

  • Home Box,
  • Footer Box,
  • Appointment,
  • Departments Accordion,
  • Contact Details Box,
  • Scrolling Most Commented Posts,
  • Scrolling Most Viewed Posts,
  • Scrolling Recent Posts.
  • Twitter Feed,
  • Cart Icon.

Credits

Fonts used


Images

Premium images you can use along with this Theme without asking permission (available with demo content):

Images under Creative Commons Attribution 2.0 Generic (CC BY 2.0) for Commercial Use (available with demo content):

Premium images used for live preview purpose (not included in downloadable package):

Pregnancy Demo images (not included in downloadable package):

Ophthalmologist Demo images (not included in downloadable package):

Veterinary Demo images (not included in downloadable package):

Dentist Demo images (not included in downloadable package):

Support

Support for all our items is conducted through our Support Forum.
Please register an account and search the forum or create a new topic, we'll answer as soon as possible.

We're in GMT +1 and we aim to answer all questions within 24 hours (Monday – Friday). In some cases the waiting time can be extended to 48 hours.
Support requests sent during weekends or public holidays will be processed on next Monday or the next business day.


Need HTML (non - WordPress) version?

There is also HTML version of this theme available. You can find it here: MediCenter Health Medical Template