Osmosis - Responsive Multi-Purpose Theme

Contents

1. Visual Composer cannot be auto updated (since version 4.9)

2. How to add custom fonts in Osmosis via Font Control?

3. Recommended Server Settings - Memory issues

4. How to add custom items in Safe Button?

5. Single Event is not visible with Events Calendar 3.11.x

6. How to give globally transparency to the Default Header with the default titles?

7. How to add custom Analytics Code

8. How to create CF7 with horizontal fields and integrate MailChimp mailing lists

9. How to update Osmosis and its required plugins?

10. How to have multiple fields in the same row of your Contact Form?

11. How to add custom fonts via Child Theme?

12. How to update the Revolution Slider when it is packaged with your theme?

13. How to enable VC's Grid Elements

14. How to translate Osmosis's strings by using the .po/.mo files?

15. Header Integration & The concept of Light/Dark Header

16. Why half my menu items just disappeared?

17. How to have a video popup in any button you like?

18. How to use a child theme?

19. Add your own API key for the Google Maps

20. How to translate your logo with WPML

21. Adding Custom JS Code via Child Theme

22. Fonts not displayed correctly

23. Instagram Feed since the 1st of June 2016

24. WP & Theme updates – Important!

25. How to create 5-Columns layout via the Page Builder

1. Visual Composer cannot be auto updated (since version 4.9)

This is a VC's bug. Basically, since we handle these updates you should not see this message. We have already informed the VC's team about this and they will provide a fix in the next release. Then you will need to remove and reinstall the new version as the auto update will not work because of this bug. So:

  1. Deactivate the Visual Composer
  2. Make the update while it is deactivated
  3. Activate again the VC and you will get the new version which is included in the theme

Notice that there is nothing to worry about this process, you are not going to lose your data :)

Important: There is no need to purchase a licence for the Visual Composer (for any of our themes) as it is included in our themes. Read this article.

2. How to add custom fonts in Osmosis via Font Control?

The normal procedure for custom fonts is the following:

Webfonts are normally into 4 formats

.ttf, .woff, .svg, .eot

You should include all of them to support all browsers.

Keep in mind the file name of the font files must not include spaces.

3. Recommended Server Settings - Memory issues

There are hundreds of thousands of web hosts out there, not all of them are fit for a WordPress installation. There are a few (well-known) low budget host providers that you can experience multiple issues when you use a premium, high quality theme (demo import issues, images upload etc). As you can easily understand this is out the scope of our support and something that you need to sort out with your host provider. At least, make sure you have covered the basics: WordPress Minimum Requirements

Recommended PHP and MySQL versions:

Themes and Plugins often require more memory than the server default values. In some server installations some php variables are very low and not recommended for WordPress installations with premium Themes or/and multiple Plugins.

Recommended php variable values:

Snippet for php.ini

    memory_limit = 256M 
    post_max_size = 128M 
    upload_max_filesize = 32M  
    max_input_vars = 3000
    max_execution_time = 300

Snippet for .htaccess

  php_value memory_limit 256M
  php_value post_max_size 128M
  php_value upload_max_filesize 32M
  php_value max_input_vars 3000
  php_value max_execution_time 300

Note: If you have already a larger number or if you don't have any issues, you don't need to modify them.

Keep in mind that some values must be larger than others: memory_limit > post_max_size > upload_max_filesize

These values can be changed with the following methods:

One of the most important files in your WordPress installation is the wp-config.php file. This file is located in the root of your WordPress file directory and contains your website's base configuration details, such as database connection information.

WP_MEMORY_LIMIT option allows you to specify the maximum amount of memory that can be consumed by PHP. This setting may be necessary in the event you receive a message such as "Allowed memory size of xxxxxx bytes exhausted".

This setting increases PHP Memory only for WordPress, not other applications. By default, WordPress will attempt to increase memory allocated to PHP to 40MB. Increasing memory allocated to PHP

Increase PHP Memory to 96M

define( 'WP_MEMORY_LIMIT', '96M' );

Administration tasks require much memory than usual operation. When in the administration area, the memory can be increased or decreased from the WP_MEMORY_LIMIT by defining WP_MAX_MEMORY_LIMIT.

define( 'WP_MAX_MEMORY_LIMIT', '256M' );

Please note, this has to be put before wp-settings.php inclusion.

4. How to add custom items in Safe Button?

Osmosis Theme provides some standard option items for Safe Button.

Custom Safe Button items can be added via hooks.

Theme provides two action hooks for Safe Button

do_action( 'grve_header_safebutton_first_item' );
do_action( 'grve_header_safebutton_last_item' );

To add a custom item you need to write a small snippet in functions.php of your Child Theme.

Example of adding a link as a last item in the Safe Button:

function grve_child_theme_custom_safe_button_item() {
?>
    <li class="grve-custom-safe-link"><a href="#"><i class="grve-icon fa fa-external-link"></i><span>My Link</span></a></li>
<?php
}
add_action ( 'grve_header_safebutton_last_item', 'grve_child_theme_custom_safe_button_item' );

Under Theme Options - CSS/JS Options - CSS Code

.grve-custom-safe-link .grve-icon {
    position:absolute;
    left:0;
}

Under Theme Options - CSS/JS Options - JS Code

(function($) {
    $(".grve-custom-safe-link").click(function(e){
      e.stopImmediatePropagation();
    });
})(jQuery);

You can use any of the two positions provided ( First and/or Last ) by using the corresponding hook.

For First Item

add_action ( 'grve_header_safebutton_first_item', 'grve_child_theme_custom_safe_button_item' );

For Last Item

add_action ( 'grve_header_safebutton_last_item', 'grve_child_theme_custom_safe_button_item' );

And you are set!

5. Single Event is not visible with Events Calendar 3.11.x

From Events Calendar v3.11 a function used was removed from the Events Calendar code.

This affects Single Event views.

Fix is already included in Osmosis 2.4 ( released 03 August 2015).

Quick Fix for older versions of Osmosis

If you need a quick fix before this release you just need to modify a single file.

You can easily modify it from:

You just need to replace line 39:

From:

<?php echo tribe_events_single_event_meta(); ?>

To:

<?php tribe_get_template_part( 'modules/meta' ); ?>

Note: In case you are already modified this template file in your Child Theme, make the same change to the exact file in your Child Theme.

6. How to give globally transparency to the Default Header with the default titles?

Follow the steps below:

  1. Go Appearance > Customize > Default Header and set the transparency you prefer for your default header.
  2. Go Theme Options > Page Options and upload the background image you prefer for the title area. Do the same in the Theme Options > Blog Options for all the archive pages (categories, tags etc).
  3. Finally add the code below in Theme Options > CSS Options
#grve-body.single-post #grve-header,
#grve-body.archive #grve-header {
    background-color: transparent;
}


#grve-body.single-post #grve-post-title,
#grve-body.archive #grve-page-title {
    margin-top: -90px; /* Give your Header's Height */
    padding-top: 90px; /* Give your Header's Height */
}
#grve-header[data-topbar='yes'] #grve-inner-header {
 position: absolute;
}

Then you will have a transparency header globally :)

7. How to add custom Analytics Code

Theme offers Google Analytics Tracking Code ( Classic/Universal ), by providing only the Tracking ID. Adding a custom analytics code instead of Google Tracking code is possible via Child Theme.

Function grve_print_tracking_code is used to print the tracking code to the header and can be overwritten.

To overwrite the function just add the function to your functions.php file of the Child Theme.

function grve_print_tracking_code() {
?>
<script type='text/javascript'>
    //Custom Tracking Code
</script>
<?php
}

Your tracking code will then replace the Google Tracking script

Another option is to use the default WordPress hooks using your own function.

Adding a function like:

function grve_child_theme_print_custom_code() {
?>
    <!-- Your custom Code -->
<?php
}

And use either the wp_head hook for header

add_action( 'wp_head', 'grve_child_theme_print_custom_code' );

or the wp_footer hook for footer

add_action( 'wp_footer', 'grve_child_theme_print_custom_code' );

8. How to create CF7 with horizontal fields and integrate MailChimp mailing lists

Let's see how someone can easily create a CF7 form with 3 horizontal fields (Name, Email, Submit) in the same line and integrate MailChimp mailing lists.

Create a new CF7 with the fields below:

<div class="grve-one-third">[text* your-name placeholder "YOUR NAME"]</div>
<div class="grve-one-third">[text* your-name placeholder "YOUR EMAIL"]</div>
<div class="grve-one-third grve-last-column">[submit "Send your message"]</div>

Then, you can use the Contact Form 7 Mailchimp Extension https://wordpress.org/plugins/contact-form-7-mailchimp-extension/ in order to use your mailchimp account.

9. How to update Osmosis and its required plugins?

How to use the Osmosis Theme auto Update

This is for sure the easiest and fastest way to update Osmosis. The only thing you have to do is to activate the theme update and enter your Themeforest username and an API key (from Envato).

Follow the steps below in order to use the auto update:

  1. Go Theme Options--> Theme Update
  2. Enable Theme Update
  3. Insert your Themeforest username and an API key from your Envato account
  4. Save changes and you're ready.

When there is a new update of Osmosis you will be informed (message at top) in Appearance-->Themes screen and in Theme Options screen. Then you will be able to update Osmosis with just one-click. Don't forget to update the required plugins in case that you are prompted (read the last 5 steps in this page).

How to update Osmosis (old-school method)

This is the old-school method for the updates of Osmosis.
Follow the steps below:

  1. Deactivate Osmosis - (activate one of the WP themes like Fourteen)
  2. Delete Osmosis
  3. Upload and install the new version of Osmosis, then activate it.

If you won't get an info message prompting you to update one or both of the required plugins of Osmosis (Visual Composer and Osmosis Visual Composer Extension) you're ready.

In case you prompt to update any or both of the required plugins (Visual Composer and/or Osmosis Visual Composer Extension)

  1. Deactivate Osmosis
  2. Go Plugins, find and delete the plugins that need to be updated (Visual Composer and/or Osmosis Visual Composer Extension)
  3. Activate Osmosis again
  4. You will notice a new info message prompting to install these plugins. Click Begin Installing Plugins so to install it/them.
  5. You're ready to go!

10. How to have multiple fields in the same row of your Contact Form?

When using the Contact Form, the default layout is to have one field per row. However, you can have multiple fields in the same row by adding some HTML markup. For example:

With Columns One Third / Three fields in the same row:

<div class="grve-one-third">Your Name (required) [text* your-name]</div>
<div class="grve-one-third">Your Email (required) [email* your-email]</div>
<div class="grve-one-third grve-last-column">Subject [text your-subject]</div>
[textarea your-message]
<p>[submit "Send your message"]</p>

With Columns One Half / Two fields in the same row and centered submit button :

<div class="grve-one-half">Your Name (required) [text* your-name]</div>
<div class="grve-one-half grve-last-column">Your Email (required) [email* your-email]</div>
[textarea your-message]
<p class="grve-align-center">[submit "Send your message"]</p>

11. How to add custom fonts via Child Theme?

Under Theme Options - Typography you can select a variety of Standard and Google Fonts.

In some cases you might need to use a Custom Font, we have implemented a solution to add your Custom Fonts and be able to select them in the Typography section of our options panel ( Theme Options - Typography ).

To use fonts in WordPress it's normally required to add some css code in your header. The remaining part is to be able to select it from the Font Family combo boxes.

Of course you can also add refined css code under Theme Options - CSS/JS Options - CSS Code.

Web fonts are provided in various formats:

Usually some documentation is already provided when you purchase a custom Font. A sample css is normally included in the documentation.

As an example we'll use a font called: MyCustomFont and a dummy site URL.

You need to replace them with the actual Font Family name and your site URL. In this example fonts are uploaded in a folder webfonts inside you WordPress uploads directory.

Add the following snippet in the functions.php file of your Child Theme.

function grve_child_theme_print_custom_fonts() {
?>
<style type="text/css">
    @font-face {
        font-family: 'MyCustomFont';
        src: url('http://www.yourdomainname.xxx/wp-content/uploads/webfonts/MyCustomFont.eot');
        src: url('http://www.yourdomainname.xxx/wp-content/uploads/webfonts/MyCustomFont.eot?#iefix') format('embedded-opentype'),
        url('http://www.yourdomainname.xxx/wp-content/uploads/webfonts/MyCustomFont.woff2') format('woff2'),
        url('http://www.yourdomainname.xxx/wp-content/uploads/webfonts/MyCustomFont.woff') format('woff'),
        url('http://www.yourdomainname.xxx/wp-content/uploads/webfonts/MyCustomFont.ttf') format('truetype'),
        url('http://www.yourdomainname.xxx/wp-content/uploads/webfonts/MyCustomFont.svg#wf') format('svg');
    }
</style>
<?php
}
add_action( 'wp_head', 'grve_child_theme_print_custom_fonts' );

function grve_child_theme_custom_font_selection( $std_fonts ) {
    $my_custom_fonts = array(
        "MyCustomFont"    => "MyCustomFont",            
    );
    return array_merge($std_fonts, $my_custom_fonts);
}
add_filter( 'grve_std_fonts', 'grve_child_theme_custom_font_selection' );

The first function adds CSS and the second adds the fonts to the Font Family selectors.

In $my_custom_fonts array you can also add additional fonts. Your custom Fonts will be added as Standard Fonts in all Font Family selectors under: Theme Options - Typography Options.

This way you can add as many custom fonts as you like.

12. How to update the Revolution Slider when it is packaged with your theme?

Please read carefully the instructions from the ThemePunch team on how you can update the Rev Slider if it is included with a theme you purchased.

Read this article - http://www.themepunch.com/faq/update-plugin-packaged-theme/

13. How to enable VC's Grid Elements

Visual Composer's Grid Elements are by default disabled. Each one of our themes provide their own handcrafted grid elements.

If in any case you need to re-enable the default Grid Elements of Visual composer, you need to add a filter hook in your Child Theme.

Just add the following snippet in the functions.php file of your Child Theme.

function grve_child_vc_grid_visibility() {
    return true;
}
add_filter( 'grve_vc_grid_visibility', 'grve_child_vc_grid_visibility' );

All Grid Elements will then be visible and configurable.

14. How to translate Osmosis's strings by using the .po/.mo files?

Option 1: From Theme .po .mo Files by using a program like Poedit and named them like en_Us.po (in your language).
- Change text from Osmosis Theme .po .mo files ( Path: \osmosis\languages )

Option 2: From Child Theme .po .mo Files (with the same way like Option 1)
- Upload and Activate Osmosis Child Theme
- Change text from Child Theme .po .mo files ( Path: \osmosis-child\languages )

With Option 1 you will have to update again the .po, .mo files in case you update the Theme to a newer version.
With Option 2 you will not lose your changes even if you upload an updated Theme.

Note: Finally, you need to go to Settings > General and at the bottom of this page select your preferred language. See the screenshot below.

15. Header Integration & The concept of Light/Dark Header

In order to have your Header integrated with a given Feature Element of Osmosis, first thing you have to do is to check the related box “Header Integration” in the Feature Element section, after you have chosen the Feature Element of your choice. As you can notice, in each Feature Element you have the option of using different Header Style (Default/Light/Dark) .You can customize these headers through Appearance > Colors. In order to have your Header integrated you have to set Opacity to 0% for a totally seamless effect or in general, to keep this value low.

But what is the real purpose of having the ability to use a different header? Let’s say for example you want to use the Image Feature Element with a dark photo inside. If the Menu Color/Logo is dark-colored as well, the Menu/Logo will not be distinguishable. So you have to choose a light-colored menu for a nice visual outcome. Within the same philosophy when you use the Slider Feature Element you can correlate the proper Header of your choice to a specific image.

Hope we cleared some things up. :)

16. Why half my menu items just disappeared?

There is a well known limitation in WordPress, because of max_input_vars that was introduced in PHP 5.3.9.

For security reasons, PHP limits the maximum numbers of POST variables you can submit.

Specifically for a WordPress Menu

Normally if your server has default settings the max_input_vars value is 1000 so approximately only the first 80 menu items are sent to the server, due to the new POST variable limit.

If you don't really need many menu items then you don't have to do any additional settings. Otherwise you need to properly configure your php settings and change the maximum number of input vars to a larger value e.g: 2000.

In case the Header Menu looks scrabbled, the only reason is that the Header Menu is unset in Theme Locations.

You can set it again under Appearance - Menus - Menu Settings

  1. Check Header Menu
  2. Save menu

Additional Info

If you need additional information then you can read the following article:

http://sevenspark.com/wordpress/menu-item-limit


17. How to have a video popup in any button you like?

You can easily have a video popup (YouTube/Vimeo) in a button if you follow the steps below:

  1. Create a button with the VC, place it anywhere.
  2. Add the link from the video you wish - for example
    https://vimeo.com/116601940
  3. In the Button Class Name field add the "grve-video-popup" class.

When you click on the button (or image), you will have the video playing in a modal window.

That's all! :)

18. How to use a child theme?

Firstly, if you need small css changes you can use the CSS Options (to place your code) in Theme Options.
For more advanced customization it’s better to use a Child Theme ( A sample Child Theme is provided in the main.zip file).

A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme.
Child themes are the recommended way of modifying an existing theme.

More information can be found on the official WordPress Codex: https://codex.wordpress.org/Child_Themes

For example, if you’ve ever edited PHP files (or JS files), then you know how hard it can be to upgrade your theme later.

Generally, a WordPress child theme allows you to modify or/and add functionality of that parent theme. So install both themes (themename and themename-child), activate the child theme and you ensure that changes you make to the files are not overwritten when upgrading the main theme.

If you need to edit PHP files(or JS files), the first thing you need to do is replicate the old file before we start to modify it. So, copy and paste the theme’s original file into your child theme folder ensuring that the file name and location is exactly the same. For example, if you want to modify the themename/folder-name/file1.php, then you would copy and paste this file to themename-child/folder-name/file1.php. Then, you can open and make any necessary changes.

When you activate the Child Theme you need to assign again your Menus Locations and Widgets.

By using a child theme, you don’t have to worry about the updates of the parent Theme.

19. Add your own API key for the Google Maps

In some case it is needed a different API key for the Google maps. 

So please:

1. Generate an API key from here https://developers.google.com/maps/documentation/javascript/get-api-key 

2. Place your API key in the related field in Theme Options > Map Options.



Alternative solution with the child theme

1. Generate an API key from here https://developers.google.com/maps/documentation/javascript/get-api-key 

2. Use the child theme to add one of the following functions according to the theme you are using:

//Blade Theme
function grve_child_map_scripts() {
 wp_register_script( 'blade-grve-googleapi-script', '//maps.googleapis.com/maps/api/js?key=API-KEY', NULL, NULL, true );
}
add_action( 'wp_enqueue_scripts', 'grve_child_map_scripts' );
//Osmosis - Reload
function grve_child_map_scripts() {
 wp_register_script( 'grve-googleapi-script', '//maps.googleapis.com/maps/api/js?key=API-KEY', NULL, NULL, true );
}
add_action( 'wp_enqueue_scripts', 'grve_child_map_scripts' );

3. Place your API key in the API-KEY space you see in the function.

20. How to translate your logo with WPML

You can easily translate your logo via the String translation if you use the following procedure:

21. Adding Custom JS Code via Child Theme

Sometimes a script is too complicated and needs additional php conditions or other custom code.

In case you want to use your own custom javascript code without the use of the integrated javascript editor from Theme Options, you could use the default WordPress hooks with your own function via a Child Theme.

This way you can combine javascript and php code.

Depending on the hook you can add your code either after the head tag or just below the closing body tag.

For example you could add a function like:

function grve_child_theme_print_custom_code() {
?>
    <!-- Your custom Code -->
<?php
}

And use either the wp_head hook for header ( head tag )

add_action( 'wp_head', 'grve_child_theme_print_custom_code' );

or the wp_footer hook for footer( just before end body tag )

add_action( 'wp_footer', 'grve_child_theme_print_custom_code' );

22. Fonts not displayed correctly

If you serve fonts files from different domains, fonts might not displayed correctly due to Cross-origin resource sharing (CORS). More info about CORS here: https://en.wikipedia.org/wiki/Cross-origin_resource_sharing

Chrome, Firefox and newer versions of Internet Explorer enforce the Cross-Origin Resource Sharing standard, and thus only render web fonts served with the appropriate “Access-Control-Allow-Origin” response header.

For example if you have more than one domain/sub-domain to show your site, fonts might not be displayed correctly in your other domains/sub-domains. This might affect Font Icons like Awesome Fonts or custom fonts hosted from your server.

Use-case:
http://www.sampledomain.com ( fonts shown correctly )
http://subdomain.sampledomain.com ( fonts not shown correctly )

To solve this issue you need to set the appropriate “Access-Control-Allow-Origin” response header.

You can modify your .htaccess file to allow fonts from another domain.

<FilesMatch "\.(ttf|otf|eot|woff|woff2)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "http://subdomain.sampledomain.com"
    </IfModule>
</FilesMatch>

or allow fonts from all domains ( in case you have more than one domain that is mapped to your site )

<FilesMatch "\.(ttf|otf|eot|woff|woff2)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

Depending on the server similar code must be configured ( e.g: for IIS7 or nginx )

More info here: http://enable-cors.org/server.html

23. Instagram Feed since the 1st of June 2016

Since the 1st of June 2016 and according to the new Instagram API rules our access token was cancelled. You can either create your own access token or leave the fields Access Token and the User ID empty to make it work again.

Notice that you need (at least) the version 2.2.3 of Blade theme and the version 3.2.4 of Osmosis theme.

24. WP & Theme updates – Important!

When a major WP release arises it is crucial not to update WP version unless you are 100% sure that our Theme is compatible at that particular time. Proper order of update is Theme first, WP later.

It is very important to stay always updated in both Theme & related plugins. Proper way of updating Theme & related plugins can be found here:

You could frequently check the changelog of our Themes in the following links:

In that way you can always be sure that your site will always work flawlessly.

25. How to create 5-Columns layout via the Page Builder

WPBakery Page Builder does not support 1/5 column currently. They might implement it in next releases though. When they do that we'll also adapt our code to be compatible with the Builder.

An easy trick to simulate 5 columns with the current grid is to select Custom and add a row with the following custom row configuration:

1/12 + 1/6 + 1/6 + 1/6 + 1/6 + 1/6 + 1/12

Obviously, leave the first and last 1/12 columns empty. On mobiles, you can return to full width and hide the 1/12 columns.