Changing the Home hamburguer


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,

Write a reply

Login or register to write a reply, it's free!