How to add custom items in Safe Button?

Osmosis Theme provides some standard option items for Safe Button.

• Search
• Language selector (WPML or Polylang Required)
• Newsletter
• Social Icons

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' );

• Enter your link under href tag
• Add you icon class ( You can use any icon from Awesome Fonts http://fortawesome.github.io/Font-Awesome/icons/ )
• Enter you link text

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!