Menu icon Foundation
Enabling Foundation 5 nav with WordPress menus

Does anyone have any advice for making Foundation menus play nicely with wp_nav_menu so that the beautiful styling and functionality in Foundation 5 can be used in WordPress?

navtopbarwordpress

Does anyone have any advice for making Foundation menus play nicely with wp_nav_menu so that the beautiful styling and functionality in Foundation 5 can be used in WordPress?


Courtney Ivey gave the most helpful answer for this post
Courtney Ivey about 6 years ago

Here's a Walker that we use that works pretty good with Foundation 5 so far...

Hope this helps!

/**
 * Top Bar Walker
 *
 * @since 1.0.0
 */
class Top_Bar_Walker extends Walker_Nav_Menu {
  /**
    * @see Walker_Nav_Menu::start_lvl()
   * @since 1.0.0
   *
   * @param string $output Passed by reference. Used to append additional content.
   * @param int $depth Depth of page. Used for padding.
  */
    function start_lvl( &$output, $depth = 0, $args = array() ) {
        $output .= "\n<ul class=\"sub-menu dropdown\">\n";
    }

    /**
     * @see Walker_Nav_Menu::start_el()
     * @since 1.0.0
     *
     * @param string $output Passed by reference. Used to append additional content.
     * @param object $item Menu item data object.
     * @param int $depth Depth of menu item. Used for padding.
     * @param object $args
     */

    function start_el( &$output, $object, $depth = 0, $args = array(), $current_object_id = 0 ) {
        $item_html = '';
        parent::start_el( $item_html, $object, $depth, $args );  

        $output .= ( $depth == 0 ) ? '<li class="divider"></li>' : '';

        $classes = empty( $object->classes ) ? array() : ( array ) $object->classes;  

        if ( in_array('label', $classes) ) {
            $item_html = preg_replace( '/<a[^>]*>( .* )<\/a>/iU', '<label>$1</label>', $item_html );
        }

    if ( in_array('divider', $classes) ) {
      $item_html = preg_replace( '/<a[^>]*>( .* )<\/a>/iU', '', $item_html );
    }

        $output .= $item_html;
    }

  /**
     * @see Walker::display_element()
     * @since 1.0.0
   * 
   * @param object $element Data object
   * @param array $children_elements List of elements to continue traversing.
   * @param int $max_depth Max depth to traverse.
   * @param int $depth Depth of current element.
   * @param array $args
   * @param string $output Passed by reference. Used to append additional content.
   * @return null Null on failure with no changes to parameters.
   */
    function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ) {
        $element->has_children = !empty( $children_elements[$element->ID] );
        $element->classes[] = ( $element->current || $element->current_item_ancestor ) ? 'active' : '';
        $element->classes[] = ( $element->has_children ) ? 'has-dropdown' : '';

        parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
    }

}

Paul Shryock about 4 years ago

Does anyone know how to create a button link in a WordPress menu which is displaying as a Foundation 5 topbar?

WordPress will allow adding CSS class(es) to the menu item's <li></li> tag, so I can add .has-form, but I don't know of a way to add a class to the actual <a></a> element, such as button.

On my site (http://themes.pshry.com/thesecret/) the last menu link is Download, and that's the one I would like to make into a button. Click the download button to view source code on GitHub if needed.

Jeremy Englert about 4 years ago

Hi Paul,

You can use jQuery or a function to add a specific class to A tag.

This thread on StackOverflow lists both options: http://stackoverflow.com/questions/22039977/how-to-add-a-custom-class-to-anchor-of-wordpress-navigation-menu-wp-nav-menu

I would lean towards the function. It feels less hacky.

Paul Shryock about 4 years ago

Thanks @Jeremy Englert, the function worked very well.

Maksym about 4 years ago

Thanks to all guys. Your support and collaboration is brilliant. I will take some code for my work project.