I’m starting to get back into some late-night WordPress development. I also have a newfound love for Bulma, which is the closest thing I’ve seen to nailing an implementation “CSS building blocks”. It makes it really easy to build the layout of the site with minimal additional markup, and gets out of the way as soon as you want to start customizing.
The same can not be said about WordPress. Out of the box, WordPress theme development sort of sucks. There’s a ton of magic, and you have to override everything in super random places. But here’s how you can make them play nice.
First, you need to add a custom nav walker to your site. Add a file in inc
or wherever you keep miscellaneous bits of PHP code with the following Gist.
https://gist.github.com/clausmith/10c8c9d3635edd891c0597e786e6af8b
Then, in functions.php
, add this at the bottom:
/**
* Custom nav walker with bulma support.
*/
require get_template_directory() . '/inc/nav-walker.php';
Lastly, replace the call to wp_nav_menu
in your header.php
or wherever you want your navbar to be with this:
wp_nav_menu(
array(
'theme_location' => 'menu-1',
'menu_id' => 'primary-menu',
'menu_class' => '', // ignored
'container' => '', // ignored
'menu_class' => '', // ignored
'items_wrap' => '%3$s', // NOT ignored
'walker' => new Bulma_Nav_Menu()
)
);
That should give you a nice, clean, Bulma-friendly navbar. Now back to hacking out all of this WordPress markup. While code might be poetry, WordPress is not.