Medicare - Medical and Health WordPress Theme

Contents

1. How to update installed theme? Will it change data?

2. I want to use a child theme. How can I do that?

3. How to add new Font icons?

4. How to increase the size of the logo?

5. How to leave a review?

6. Where is my Purchase Code?

7. How to change H tag in page headline?

8. How to add new icon?

9. How to translate theme?

10. Embed code I have placed using text element is being cut off. It does not have the proper height. How can I resolve this?

11. I want to change the position of section's background image on mobile resolutions so users do not see the center part of the image. How can I do that?

12. How to hide hover image effect?

13. I have purchased your theme. Now what?

14. SVG Image format

15. How to ask for a refund?

16. "404 Page not found" error on inner pages

17. Is there some way I can see all the icons of Medicare theme?

18. How to change the header and edit other Single pages of Portfolio items settings?

19. How to change the header and edit other Single Post settings?

20. Missing style sheet error when installing the theme

21. How to edit widgets?

22. How to set up your Instagram widget?

23. How to change the header and edit other Single Shop Product page settings?

24. Header title is displaying site name

25. How to change the Excerpt text?

26. How to set up your Twitter widget?

27. How to create One page?

28. How to create mega menu?

29. Installing Demo Content

30. How to make a page load with accordion items closed by default

31. Missing Google API key - Google Map

1. How to update installed theme? Will it change data?

First thing is to download newest theme version from ThemeForest Download section. Since you already have the theme installed, you can download just 'Installable WordPress file only'.


The best way to update theme is through FTP. We suggest that you use Filezilla to access your server. Here is the article that explains how Filezilla works.

You need to extract theme file from the zipped folder you downloaded, and upload it to /wp-content/themes folder on your server. You will be prompted to overwrite the existing files. Select 'Yes', and the theme will update.

*The example is the zip file from Medicare theme but the process is the same for all themes.

If you made any changes in the source code you'll need to reapply them to the new version of the theme or they will be lost.

Keep your eyes on potential required plugin update messages at wp-admin dashboard once you replace the files. You should update all required plugins if the updated theme suggests so. 

All settings in Customize panel and your content will be preserved.

Note: Once new theme version is online, user who purchased the theme, should get email note from the Envato (ThemeForest).





For more info and detailed instructions please refer to our Online Theme Documentation.

2. I want to use a child theme. How can I do that?

If you want to use Medicare Child Theme, please follow these steps:

1. First of all, make sure that parent theme folder is named: medicare. Otherwise rename the folder.

2. You should be able to find the folder medicare-child in the package you have downloaded from ThemeForest.

3. Please copy this folder to /wp-content/themes folder on your server.

4. Go to Appearance > Themes in your wp-admin console and activate child theme. Please have in mind that all required plugins need to be activated.


3. How to add new Font icons?

In order to add new Font icons, you should customize the theme. Please do the following steps:

1. First of all you need to import your font file. 

2. Please take a look at the top of style.css file and you will find @font-face declaration. You need to import your own font files in the same manner as FontAwesome and the rest and declare the font-family as 'myFont' or something similar.

3. Then you need to search for all 'data-ico-fa' in the style.crush.css file and create respective statements for your font. For example when you locate

*[data-ico-fa]:before {
    font-family: FontAwesome;
    content: attr(data-ico-fa);
    }

you need to create 

 *[data-ico-mf]:before {
    font-family: myFont;
    content: attr(data-ico-mf);
    }

etc.

4. Then, you need to create new file in Medicare plugin folder called bt_mf_icons.php. As an example of how the PHP file should look, you can use one of the existing fonts (bt_fa_icons.php) and copy their files' content, and replace it with your glyph codes.

Or, you can use the following example, and just replace the glyph codes (numbers: f100, f101, f102 etc.) with the ones from your icon set. 

function bt_mf_icons(){
 $arr = array(
     '  ' => 'no_icon', 
     'icon-01' => 'mf_' . '_f100',
     'icon-02' => 'mf_' . '_f101',
     'icon-03' => 'mf_' . '_f102',
     'icon-04' => 'mf_' . '_f103',
     'icon-05' => 'mf_' . '_f104',
);

The glyph codes are defined in style.css file of your font. Here is the example:

<?php
$set = strtolower( basename(__FILE__, '.php') );
$$set = array(
    'icon-01:before {
  content: "\f100";
}
    'icon-02:before {
  content: "\f101";
}
    'icon-03:before {
  content: "\f102";
}
    'icon-04:before {
  content: "\f103";
}
    'icon-05:before {
  content: "\f104";
}---->

5. Finally, you need to edit medicare.php in your plugin's folder, search for bt_fa_icons() and add respective statements for bt_mf_icons() as well. For example to change all occurrences of 

$icon_arr = array_merge( bt_fa_icons(), bt_s7_icons(), bt_custom_icons() );

to

$icon_arr = array_merge( bt_fa_icons(), bt_mf_icons(), bt_s7_icons(), bt_custom_icons() );

4. How to increase the size of the logo?

In order to increase size of the logo you need to add the following CSS statements to Custom CSS field of Appearance > Customize > General panel:

.menuHolder .logo img {
    height: 100px;
}
.topBarInLogoAreaCell {
    margin-top: 25px;
}

Please adjust the numbers according to your needs. The first number (100px) represents the height of the logo and the second (25px) represents the top margin between the header widget elements and viewport's top.

5. How to leave a review?

If you are satisfied with our support or you like our product, please consider supporting us by giving us a rating at the downloads section of your ThemeForest profile (just below the download button) - http://themeforest.net/downloads

When leaving a review, we encourage you to:

You can find more information on reviews in official Envato article.

Thanks a lot in advance! :)

6. Where is my Purchase Code?

If you are having some troubles finding your Purchase Code, please have a look at the following article: Envato Market Help - Where Is My Purchase Code?

7. How to change H tag in page headline?

Title in page headline is, by default, set to use h1 tag.

In order to change the tag, you will need to customize part of the theme's code, so some familiarity with PHP is necessary.

First, install and activate the child theme. Then, to child theme's functions.php file add the following code, and edit the H tag according to your needs:

if ( ! function_exists( 'boldthemes_get_heading_html' ) ) {
    function boldthemes_get_heading_html( $superheadline, $headline, $subheadline, $headline_size, $dash, $el_class, $el_style, $header = false ) {         if ( $header ) {
            if ( MedicareTheme::$what == 'index' && MedicareTheme::$boldthemes_page_for_header_id ) {
                $page = get_post( MedicareTheme::$boldthemes_page_for_header_id );
                $headline = $page->post_title;
                $excerpt = $page->post_excerpt;
                if ( $excerpt != '' ) {
                    $subheadline = '<div class="btSubTitle">' . $excerpt . '</div>';
                }
            } else if ( MedicareTheme::$what == 'search' ) {
                $headline = esc_html__( 'Search', 'medicare' );
            } else if ( MedicareTheme::$what == 'woocommerce' && ! is_singular() && wc_get_page_id( 'shop' ) ) {
                $page = get_post( wc_get_page_id( 'shop' ) );
                $superheadline = '';
                $headline = $page->post_title;
                $excerpt = $page->post_excerpt;
                if ( $excerpt != '' ) {
                    $subheadline = '<div class="btSubTitle">' . $excerpt . '</div>';
                }
            } else if ( is_page() ) {
                $page = get_post( get_the_ID() );
                $excerpt = $page->post_excerpt;
                if ( $excerpt != '' ) {
                    $subheadline = '<div class="btSubTitle">' . $excerpt . '</div>';
                }
            }
        } else {
            if ( $superheadline != '' ) {
                $superheadline = '<div class="btSuperTitle">' . $superheadline . '</div>';
            }             if ( $subheadline != '' ) {
                $subheadline = '<div class="btSubTitle">' . $subheadline . '</div>';
            }
        }
        
        $h_tag = 'h1';
        $class = '';         $style_attr = '';
        if ( $el_style != '' ) {
            $style_attr = 'style="' . esc_attr( $el_style ) . '"';
        }         if ( $headline_size != 'no' ) {
            $class .= $headline_size;
        }
        if ( $headline_size == 'extralarge' || $headline_size == 'huge' ) {
            $h_tag = 'h1';
        } else if ( $headline_size == 'large' ) {
            $h_tag = 'h2';
        } else if ( $headline_size == 'medium' ) {
            $h_tag = 'h3';
        } else {
            $h_tag = 'h4';
        }         if ( $dash == 'yes' ) {
            $dash = 'top';
        }
        
        if( $dash != 'no' && $dash != '' ) {
            $class .= ' btDash ' . $dash . 'Dash';
        }         if ( $el_class != '' ) {
            $class .= ' ' . $el_class;
        }
        
        $output = '<header class="header btClear ' . $class . '" ' . $style_attr . '>';
        $output .= $superheadline;
        if ( $headline != '' ) {
            $pattern = "/<(strong|b|u|i)([> ])/";
            $replace = '<$1 class="animate">';
            $headline = preg_replace($pattern, $replace, $headline);
            $output .= '<div class="dash"><' . $h_tag . '><span class="headline">' . $headline . '</span></' . $h_tag . '></div>';     
        }
        $output .= $subheadline;
        $output .= '</header>';             return $output;
        
    }
}

8. How to add new icon?

In order to add new icon, you will need to upload some other files in addition to .svg.

Here is the process:

  1. Go to IcoMoon.

  2. Click IcoMoon App in upper right corner:


3. Click on hamburger Menu in upper left corner and choose Manage Projects:


  4. Click New Project. Rename the project if you want. Click Load:

  5. Click Import Icons:

  6. Choose your .svg file.

  7. If asked do you want to use font's metrics click "Yes".

 8. Click on hamburger Menu in upper right corner and click Select all.

 9. Click Generate font in lower left corner:

 

 10. Click Preferences and set fontawesome-webfont for Font Name:

  11. Click Download in lower right corner:


  12. Extract files from the downloaded archive's fonts folder:

  13. Locate the font folder in theme's folder on your server and delete everything that has fontawesome in the name including woff2 and oet file.

  14. At the end, upload newly created files from IcoMoon.

9. How to translate theme?

In order to translate the theme, please follow the next steps:

Theme's .pot file is located in /wp-content/themes/your-theme-name/languages folder.

Please use PoEdit - https://poedit.net/ to translate the .pot file and create respective .po and .mo files.

In order to place .po and .mo files properly and not have them deleted when you update the theme, upload  them to \wp-content\languages\themes folder. If you don’t have languages folder in your wp-content directory, please proceed and create one. Then create themes folder, and paste the files in it.

Please name .po and .mo files e.g. potname-nl_NL.po and potname-nl_NL.mo (nl_NL is the language code for dutch and potname is the name of the .pot file you have started from - it corresponds to text domain of the theme). For other languages' codes, please refer to the following link: Internationalization.

Alternatively, you can upload the .po and .mo files to your theme's /wp-content/themes/your-theme-name/languages folder. In that case name them only using the language code (for example nl_NL.mo and nl_NL.po)

Also make sure to translate the theme's plugin .pot file, located in \wp-content\plugins\your-theme-name\languages folder. 

The steps are the same as for the theme, except the files should be named bt_plugin-nl_NL.po and bt_plugin-nl_NL.mo (with appropriate language code).

For plugin’s .po and .mo files, you should place them in \wp-content\languages\plugins folder.

You can set the site language of your WordPress installation on Settings > General. WordPress will automatically use the right language files if they exist. 

10. Embed code I have placed using text element is being cut off. It does not have the proper height. How can I resolve this?

It may happen that iframe created by your embed code gets cut off.

Please do the following to resolve this:
1. Define Custom Id for the section containing embed code (for example: section_1)


2. Add the following statements to Custom CSS field of Appearance > Customize > General panel 

#section_1 iframe {
    height: 150px !important;
}

Adjust the height according to your needs.

11. I want to change the position of section's background image on mobile resolutions so users do not see the center part of the image. How can I do that?

In order to offset the image on mobile resolutions and put some other part of the image in focus instead of center area which is displayed by default, please use the following approach:

Add Custom Id to desired section (mysection_1 for example):

And then add the following css statements to Appearance > Customize > General, Custom CSS field:

@media (max-width: 600px) {

 #mysection_1{
   background-position-x: 400px !important;
}
}

This will offset image x position by 400 px only for device resolutions of up to 600px.

Adjust the numbers according to your needs.

12. How to hide hover image effect?

In order to hide the hover effect on images, please add the Extra Class Name(s)  "btSimpleHover" to the required element (Row, Grid gallery or Image etc.):

and then add the following css statements to the Custom CSS field in Customize > General Settings:

.btSimpleHover .captionPane {
    display: none;
}


13. I have purchased your theme. Now what?

The best starting point is to go through the provided documentation. 

It will guide your through the common tasks of theme installation and import of demo content.  

You have 2 options for downloading your theme:


Documentation pdf is in the All files and documentation package. Please download it and the document should be in the root of the downloaded archive.



For more info and detailed instructions please refer to our Online Theme Documentation.

14. SVG Image format

Our themes currently do not support SVG image format. We also don't recommend using any of the plugins for SVG, such as SVG SupportSafe SVG, and others. 

These plugins have not been tested with the themes, are not fully supported, and can cause themes' functionalities, such as Customize panel, to break.

15. How to ask for a refund?

If you've decided that our theme / plugin doesn't work for you, we do offer a full refund.

In order to ask for a refund, please submit a request for a refund on the following link: http://themeforest.net/refund_requests/new.

Here's how the refund process works:

1. The refund request is sent to us via email, and we decide if we are going to approve it or not.

2. Once the refund is approved, it can take between 3 to 5 days for Envato to transfer money back to your account.

3. If the refund is not approved, you can always raise a dispute

You can find additional guidelines on the refund in the official Envato article.

16. "404 Page not found" error on inner pages

If after installing demo content inner pages are returning "404 Page not found" error, please try to recreate permalink structure by going to Settings > Permalinks, changing it to Post name, for example, saving the settings, then changing it back to the one you originally had, and saving it again.

17. Is there some way I can see all the icons of Medicare theme?

We use three different sets of icons in Medicare theme: Font AwesomeStroke 7 and Custom Icons

Please refer to these links for preview of each icon set.

18. How to change the header and edit other Single pages of Portfolio items settings?

All single portfolio items inherit the settings from their template page. In order to edit excerpt text and header background image, please locate this page on All Pages list, and proceed to follow instructions from our article.


In order for this page to work as a template page for single portfolio items, make sure to add its slug to Settings Page Slug field in Appearance >Customize >Portfolio panel.

                                                        




For more info and detailed instructions please refer to our Online Theme Documentation.

19. How to change the header and edit other Single Post settings?

On Appearance > Customize > Blog panel there is a Settings Page Slug field. This field should contain the slug of the page which serves as a template for all blog posts.  All blog post will inherit settings and shortcodes of the page referenced via this field.


                                                 


In order to change elements on blog posts, please locate the page with the slug entered in Settings Page Slug field and edit it.


20. Missing style sheet error when installing the theme

A common issue that can occur with users new to installing WordPress themes is a "Broken theme and/or stylesheets missing” error message being displayed when trying to upload or activate the theme. This error message does not mean that the theme you have purchased is broken, it simply means it has been uploaded incorrectly.

You have 2 options for downloading your theme:


Please use Installable WordPress file only archive in the process of Theme installation:

  1. Log in to your WordPress admin area.
  2. Browse to Appearance > Themes.
  3. Click on ‘Add New’.
  4. Click ‘Upload Theme’.
  5. Browse and select the theme zip file to upload, then click 'Install Now' button.


Check our video tutorial how to install theme and import demo content.

Don't forget to subscribe to our YouTube channel!


For more info and detailed instructions please refer to our Online Theme Documentation.

21. How to edit widgets?

In Appearance >Widgets panel you can see the list of available widgets and widget areas. Here’s how they work - each theme has default widget areas, such as Footer widgets, Header Left widget, Header Right widgets, etc.

Some themes have custom widget areas made for each homepage in order to have different widgets on them. Custom widget areas are added in Appearance >Widget Areas panel, by selecting which default area they will replace and on what page(s) they’ll display.

Once you choose homepage, go to Appearance >Widgets and check if that homepage has its own custom widget area. If it does, you have two options – first is to move widgets from this custom widget area to a corresponding default area. Other solution would be to simply assign custom widget area to display on all pages by checking them in Appearance >Widget Areas panel.


*Example is from Celeste theme.


22. How to set up your Instagram widget?

Since the latest changes in Instagram's features, BB Instagram widget only requires Access token.

Please follow the below procedure to create your Access token:

Step 01: Getting Client ID 

Although Client ID is not used with our widget, you will still need to acquire it in order to generate Access token.

1. Go to the link: Authentication and login with your Instagram account

2. Click on Manage Clients in the upper right corner

3. Click on Register a New Client.

               

4. Complete the form, here’s a break down of what each field is:

             

You are now presented with a Client ID and the Redirect URL – copy and paste these somewhere (or leave the browser window open) as we need them for the next step.

5. Click on Edit Client button, click on Security Tab and uncheck Disable implicit OAuth. Click on Update button.

Step 02: Getting Access token

Use the url below and replace the bits in UPPERCASE with the information you noted earlier on (Client ID and Redirect URL): https://instagram.com/oauth/authorize/?client_id=YOURCLIENTIDHERE&redirect_uri=HTTP://YOURREDIRECTURLHERE.COM&response_type=token&scope=public_content

Paste the updated URL in to your favorite browser and you will be taken to a page on Instagram that says something like, “Hello [Your Name], [Application Name] is requesting to do the following” followed by a list of permissions – click Authorize to enable and retrieve your token.

You should now have been redirect to the URL you set as your Redirect URL (probably your blog).  At the end of the URL Instagram has directed you to is your access token as a very long series of letters and numbers.  It will almost certainly not all be visible so you’ll need to work a little to get it.  We recommend:

Clicking in the address bar of your browser Hit CTRL + A on the keyboard to ‘Select All’ Hit CTRL + C on the keyboard to ‘Copy‘ Open a text editor such as Notepad and paste the URL there, you should now be presented with something like this: http://www.bold-themes.com/#access_token=856946666.7338417.ffefasgtasg805784be6ab4f24965e79

Everything after the equals sign (=) is your access token so in our case this would be: 856946666.7338417.ffefasgtasg805784be6ab4f24965e79.

Copy access token to its respective field in the widget.

23. How to change the header and edit other Single Shop Product page settings?

All single product pages inherit the settings from their template page. In order to edit excerpt text and header background image, please locate this page on All Pages list, and proceed to follow instructions from our article.

In order for this page to work as a template page for single products, make sure to add its slug to Settings Page Slug field in Appearance >Customize >Shop panel.


                                                          




For more info and detailed instructions please refer to our Online Theme Documentation.

24. Header title is displaying site name

Once you add titles with Yoast SEO plugin, header will display that title and site name, instead of the page title.

In order to show only title, without site name, you could change page title template to display only the title. In Yoast > Titles & Metas > Pages Title template, you could add title template as:

%%title%%


Other option would be to switch to  All in One SEO Pack plugin, that does not affect header title.

25. How to change the Excerpt text?

All Blog Posts, and even Pages can have Excerpt text.

In order to change the ’Excerpt text’ please take a look at the bottom of edit post page. Since this field is not visible by default, just click Screen options button at top right corner of the form and check Excerpt checkbox. 

                        


This will make excerpt field visible. You will be able to edit Excerpt text.




For more info and detailed instructions please refer to our Online Theme Documentation.



26. How to set up your Twitter widget?

In order to set up your Twitter widget you need following data:

Please follow this procedure to create required data.
1. Go to Twitter Apps, sign in and create New App.

                                

2. Complete the form, here’s a break down of what each field is:


Please check 'I agree'. You are now presented with a Consumer key – copy and paste this somewhere as we need that for the next step.

   


3. Click on 'manage keys and access token'. Then go to ’Create my access token’  and you will get Consumer Secret, Access Token and Access Token Secret.


   



6. Copy Consumer Key, Consumer Secret, Access Token and Access Token Secret and enter them to respective fields of Twitter widget. 



For more info and detailed instructions please refer to our Online Theme Documentation.

27. How to create One page?

The best way to start is to install demo content. If you want to install one page demo please refer to the article: Installing Demo Content. You will be able to see how all elements on the single page are set.

Please have a look at the following steps, how to achieve one page:

1. First of all, navigate to the Bold Page Builder and edit desired section. Insert in required Custom Tab Element ID attribute:



2. Then in Appearance > Menus add a new Custom Link and as a URL insert custom ID atribute with #.

For example: #about


For more info and detailed instructions please refer to our Online Theme Documentation.

28. How to create mega menu?

In order to create mega menu please navigate to Appearance >Menus and enable CSS Classes in Screen Options, on top of your dashboard.

8687606578.jpg

Then add the btMenuWideDropdown class to the parent menu item (the first item you want in your mega menu).

In order for mega menu to display correctly top menu item needs to have sub menu items, and those sub menu items need to have their child items.


2635579197.jpg

The example is from our Medicare theme, but the steps are the same for all themes.

*Note that frontend display may vary depending on the theme you are using.

29. Installing Demo Content

The best way to start is to install demo content. If you want to install demo content please do the following:

First, delete all sample content (posts and pages) which is automatically created when
WordPress is installed. If you have already added a new content, please make sure to do the backup in order to save the content. After the backup, delete all content and you can start with the next steps:  

1. Start with fresh WordPress installation and make sure that theme and required plugins are installed. Since some demos contain WooCommerce data, please install WooCommerce plugin. Once you finish with the installation, you can remove WooCommerce plugin if you do not need it.


 


2. Go to ‘Tools > BT Import’ and select demo which you want to install. 

*Make sure that you select demo in correct language – there are three RTL demos in Arabic, and the rest are LTR in English.

 


3. Wait until you get message that import is finished. If you see red colored error message, just repeat the import until you get the message that import is finished. Import is incremental process and will finish eventually.

4. If you have imported demo with WooCommerce content, go to WooCommerce > Settings > Products > Display and select Shop as Shop Page; open Checkout tab and select Cart as Cart Page and Checkout as Checkout Page; open Accounts tab and select My Account as My Account Page.


Check our video tutorial how to install theme and import demo content.


Don't forget to subscribe to our YouTube channel!



For more info and detailed instructions please refer to our Online Theme Documentation.

30. How to make a page load with accordion items closed by default

In order to make a page load with accordions collapsed by default, please edit medicare/bt_elements.js file in your wp-content/plugins folder and locate the following statements:

$( '.tabsVertical' ).each(function(){
 $( this ).find( '.tabAccordionTitle' ).first().click();
 });

Remove these statements from file or comment them out and your accordions will remain closed on page load.

31. Missing Google API key - Google Map

Since Google has changed their Google map policies, Google map APIs require an API key for new domains . (announcement: Google Geo Developers).

*Google has, starting July 16, 2018, made certain API and billing changes. In order to enable billing, you will need to provide credit card or billing account to Google Maps platform. Please note that we are in no way associated with Google Maps and their payment system and for any questions and issues regarding payments and billing you will need to contact them. Please refer to their FAQ and their documentation to learn more about these changes.

  1. First step is to get location’s longitude and latitude. This article explains how – Find or enter latitude & longitude.
  2. When the theme is updated, please Get your API key.
  3. Then locate the Google Map element in Bold Builder/Rapid Composer and enter your API key.

Bold Builder preview:

Rapid Composer preview:



For more info and detailed instructions please refer to our Online Theme Documentation.