Changing the Home hamburguer

Hi all.

I just want to share what I found, which might be useful for others, and ask If this would be the correct/smart way to things the "Beans way".

The theme has a beans_primary_menu_offcanvas_button function (reference) which is attached to the action beans_primary_menu_offcanvas_button which actually outputs the hamburguer icon and the text "Home" as content.

If one whishes to edit it - like remove the "home" text or change the icon - one can remove the action and add a new one in it's place, or just change the callback function associated with the default actions with something like:

beans_modify_action_callback( 'beans_primary_menu_offcanvas_button', 'my_new_menu_offcanvas_button_callback' );

And then use the reference code here to generate the my_new_menu_offcanvas_button_callback function.

So, I'm very interested if there would there be a smarter and more correct way of going about this?

Hey David, thanks for sharing 🙂

There is a more optimized way of doing it. Regarding changing the text, if you inspect the button text (in Beans development mode), you will see that there is an HTML comment <!-- open output: beans_offcanvas_menu_button -->. When you see such stuff on the page, it means that you can customize the output using a filter. Here is the full explaination how the output filter works which totally apply to your case, just a different output id. In your case the code would be the follwing:

add_filter( 'beans_offcanvas_menu_button_output', 'example_offcancas_menu_button_text' );

function example_offcancas_menu_button_text() {

   return 'Example Text';

}

When it comes to modifying the Icon, the easiest is to modify the attribute. Let's say for example you want to change it to info-circle (from UIkit Icons), you can just add the following line:

beans_replace_attribute( 'beans_primary_menu_offcanvas_button_icon', 'class', 'navicon', 'info-circle' );

Note how Beans can even replace only one part of a class, for instance navicon.

Happy coding,

That is acually way smarter and versatile. Thank you.

What should be done differently if we Dequeue font awesome ? Do we input replacement icons via the stylesheet or write it out in HTML?

@Dee S The code Thierry posted only replaces the default class with a new class. If you dequeue Font Awesome and use a different icon font you will just have to change the code to give it the correct class.

Yes that is true. But I've tried with a different icon font nothing happens. I must have done it wrong.

Hi Dee,

Below is how you can dequeue the Icon component which would prevent Font Awesome from loading:

add_action( 'beans_uikit_enqueue_scripts', 'example_enqueue_uikit_assets' );
/**
 * Dequeue the UIkit component.
 */
function example_enqueue_uikit_assets() {
 beans_uikit_dequeue_components( array( 'icon' ) );
}

You will then have to enqueue your own fonts library and add the HTML classes accordingly.

Happy coding,