--- title: 'WordPress Bulma NavWalker With Font Awesome Support' url: 'https://www.worldoweb.co.uk/2018/wordpress-bulma-navwalker-font-awesome' markdown: 'https://www.worldoweb.co.uk/2018/wordpress-bulma-navwalker-font-awesome.md' date: '2018-06-16' description: 'A custom WordPress NavWalker to integrate the WordPress Nav Menus into the Bulma Navigation with Font Awesome support' taxonomy: category: - 'Web Development' - WordPress tag: - PHP - Resources - CSS - Bulma --- # WordPress Bulma NavWalker With Font Awesome Support Published on June 16, 2018 by Tracy Ridge in [Web Development](https://www.worldoweb.co.uk/category/category:Web%20Development) [WordPress](https://www.worldoweb.co.uk/category/category:WordPress) Earlier this year I revamped my [WordPress website](https://www.worldoweb.co.uk/2018/hello-bulma-css-goodbye-bootstrap) using Bulma, a CSS Flexbox Framework. I tested a few Navwalkers to integrate the WordPress Nav Menus into the Bulma Navigation. Although they worked they didn’t support Font Awesome. I embarked on creating my own Bulma Navwalker with inspiration from my previous [Bootstrap Navwalker](https://github.com/wp-bootstrap/wp-bootstrap-navwalker) and [GiottoPress](https://github.com/Tmeister/giottopress-dist/blob/master/inc/class-giottopress-menu-walker.php). ## Features Prior to using Bulma my original custom bootstrap theme included font awesome by adding the relevant code to the **title input box** in WordPress Menus. In this Bulma Navwalker, the Font Awesome Classes are added to the **CSS Classes input box**. Bulma Navwalker also works with font Awesome 5 and you can choose whether to show/hide the anchor titles. ## Download Bulma Navwalker [Download Bulma Navwalker](https://www.worldoweb.co.uk/user/pages/downloads/WP-Bulma-Navwalker-1.0.zip)Drop the file into your WordPress theme folder and hook up to it in your functions.php. ```php require_once('classes/bulma-navwalker.php'); ``` Whilst in functions.php declare a new menu unless it otherwise exists. ```php register_nav_menus( array( 'header-menu' => __( 'Header Menu', 'THEMENAME' ), ) ); ``` Setup the Bulma NavBar and wp\_nav\_menu in header.php. This demo example uses **is-fixed-top** and **navbar-end** from the Bulma CSS Framework. Please consult the documentation for other options [Bulma Components – NavBar](https://bulma.io/documentation/components/navbar/). ```php ``` ## Configuration ### Font Awesome It has been tested using version 5 but should work on earlier versions. To add Font Awesome Icons you need to Enqueue the JavasScript in functions.php. ```php function wow_scripts() { //include other scripts and styles too wp_enqueue_script('font-awesome','//use.fontawesome.com/releases/v5.0.13/js/all.js', null, null, true); } add_action( 'wp_enqueue_scripts', 'wow_scripts' ); ``` ## Displaying Font Awesome Icons Tested on top-level navigation links! Find the icon code snippet from [Font Awesome Gallery](https://fontawesome.com/icons?d=gallery)Add the snippet into the CSS Class input box in **Appearance->Menus** in the WordPress Admin. For example, to add a home icon to the Home link add **fas fa-home** to the CSS Class input box. ### Displaying The Title Add the class **fa-show-title** to the CSS class input box Leave it blank if you only want to display the icon. [Bulma NavWalker Font Awesome Show Title](https://www.worldoweb.co.uk/user/data/wp-content/uploads/2018/06/Bulma-Classes.png) ### NavBar Divider Tested on dropdowns Add a custom link using # in the URL box Add the class navbar-divider to the CSS class input box. [Bulma Navbar Divider](https://www.worldoweb.co.uk/user/data/wp-content/uploads/2018/06/Bulma-Divider.png) ### Alignment Class The class is-right is used on the farthest dropdown when using the navbar-end class. It simply aligns the dropdown so that it doesn’t overflow the page. Simply add is-right to the parent element. ### Future Features and Bugfixes Although I have thoroughly tested the NavWalker if you come across any errors or bugs please report any issues. ### Share [X](https://x.com/intent/tweet?text=WordPress%20Bulma%20NavWalker%20With%20Font%20Awesome%20Support&url=https%3A%2F%2Fwww.worldoweb.co.uk%2F2018%2Fwordpress-bulma-navwalker-font-awesome&via=worldoweb "Share on X") [Facebook](https://www.facebook.com/sharer.php?u=https%3A%2F%2Fwww.worldoweb.co.uk%2F2018%2Fwordpress-bulma-navwalker-font-awesome "Share on Facebook") [Reddit](https://www.reddit.com/submit?url=https%3A%2F%2Fwww.worldoweb.co.uk%2F2018%2Fwordpress-bulma-navwalker-font-awesome&title=WordPress%20Bulma%20NavWalker%20With%20Font%20Awesome%20Support "Share on Reddit") [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fwww.worldoweb.co.uk%2F2018%2Fwordpress-bulma-navwalker-font-awesome "Share on LinkedIn") [Bluesky](https://bsky.app/intent/compose?text=WordPress%20Bulma%20NavWalker%20With%20Font%20Awesome%20Support%20https%3A%2F%2Fwww.worldoweb.co.uk%2F2018%2Fwordpress-bulma-navwalker-font-awesome "Share on Bluesky") [Email](mailto:?subject=WordPress%20Bulma%20NavWalker%20With%20Font%20Awesome%20Support&body=https%3A%2F%2Fwww.worldoweb.co.uk%2F2018%2Fwordpress-bulma-navwalker-font-awesome "Share via email") #### Tags [ PHP](https://www.worldoweb.co.uk/tag/tag:PHP) [ Resources](https://www.worldoweb.co.uk/tag/tag:Resources) [ CSS](https://www.worldoweb.co.uk/tag/tag:CSS) [ Bulma](https://www.worldoweb.co.uk/tag/tag:Bulma) ##### Next [ ← Appspector Browser Extension Injects Code into WordPress Posts ](https://www.worldoweb.co.uk/2018/appspector-ext-injects-code-wordpress) OR ##### Previous [ How to Nurture Your Business Website → ](https://www.worldoweb.co.uk/2018/how-to-nurture-your-business-website) --- ## Navigation - Previous: [Appspector Browser Extension Injects Code into WordPress Posts](https://www.worldoweb.co.uk/2018/appspector-ext-injects-code-wordpress.md) - Next: [How to Nurture Your Business Website](https://www.worldoweb.co.uk/2018/how-to-nurture-your-business-website.md)