How to use buttons elements for tgetWordPress menu items?

by

The following is a solution, though uses extra PHP processing…

 <?php

 $options =  array(
     'echo'              => false,
     'theme_location'    => 'buttons',
     'items_wrap'        => '%3$s',
     'menu_class'        => false,
     'menu_id'           => false,
     'container'         => 'false',
     'container_class'   => false,
     'container_id'      => false,
     'before'            => '<button class="btn btn-primary mx-3 d-none d-md-block" type="submit">',
     'after'             => '</button>'
 );

 $menu = wp_nav_menu($options);

 $output = strip_tags($menu, '<button>');

 echo preg_replace('/btn-primary/', 'btn-outline-primary', $output, 1);

 ?>

This involves:

  • Removing <ul>
  • Not setting any containers
  • Wrapping each item in a <button> tag
  • Suppressing echo
  • Stripping all tags (ie. <li>) except <button>)
  • In the last part, replacing the first instance of the btn-primary class with btn-outline-primary, in order to retain buttons of two colours.

Here is the output…

enter image description here

<button class="btn btn-outline-primary mx-3 d-none d-md-block" type="submit">Button</button>
<button class="btn btn-primary mx-3 d-none d-md-block" type="submit">Learn More</button>

I would have preferred to set the button colour classes using WordPress’ own functionality for setting Menu item classes, rather than hard-code them here.

Is there a way to get those classes appearing in the nav item, instead of using preg_replace, or would this method not support it?