JILILUCK promo code,WJEVO login.Recharge Every day and Get Bonus up-to 50%!

Resolved

(@zushiba)

I’m trying to implement this horribly complicated menu and no amount of mucking around with wp_nav_menu custom walker examples I’ve found has made it any easier.
The problems I’m having is that there’s a lot of custom elements that appear outside of the anchor or in other inconvenient places that start_lvl/start_el/end_lvl/end_el don’t seem to work.
Additionally there’s a stupid custom div above the second level menu that doesn’t work with things like ‘before’ => ”, because then it’s included in every damn above 0!

This is the menu code I’m attempting to replicate

	<ul class="nav-primary__list accordion" data-accordion data-multi-expand="false" data-allow-all-closed="true">
		<li class="nav-primary__item accordion-item" data-accordion-item>
			<a href="#nav-primary-0" class="nav-primary__heading accordion-title">
			   <span class="nav-primary__label">Academics</span>
			   <span class="trigger">
	
			<svg class="brei-icon brei-icon-plus" focusable="false">
				<use xlink:href="#brei-icon-plus"></use>
			</svg>
		
	
			<svg class="brei-icon brei-icon-minus" focusable="false">
				<use xlink:href="#brei-icon-minus"></use>
			</svg>
		
</span>
			</a>

			<div class="nav-primary__content accordion-content" data-tab-content id="nav-primary-0">

				 <a href="#" class="nav-primary__self">Academics <svg class="brei-icon brei-icon-triple-chevron" focusable="false" viewBox="0 0 45.2 32">
	<path class="chevron-1" d="M15.6,14.6L3.2,0L0,2.7L11.3,16L0,29.3L3.2,32l13.6-16L15.6,14.6z"/>
	<path class="chevron-2" d="M29.8,14.6L17.4,0l-3.2,2.7L25.5,16L14.2,29.3l3.2,2.7L31,16L29.8,14.6z"/>
	<path class="chevron-3" d="M44,14.6L31.5,0l-3.2,2.7L39.7,16L28.4,29.3l3.2,2.7l13.6-16L44,14.6z"/>
</svg>
</a>
				 
				 <ul class="nav-primary__children">
					<li class="nav-primary__child">
						<a href="#" class="menu-secondary">
	<span class="text">Child Page Lorem Ipsum</span>
</a>

					</li>
					<li class="nav-primary__child">
						<a href="#" class="menu-secondary">
	<span class="text">Child Page Lorem Ipsum</span>
</a>

					</li>
					<li class="nav-primary__child">
						<a href="#" class="menu-secondary">
	<span class="text">Child Page Lorem Ipsum</span>
</a>

					</li>
					<li class="nav-primary__child">
						<a href="#" class="menu-secondary">
	<span class="text">Child Page Lorem Ipsum</span>
</a>

					</li>
					<li class="nav-primary__child">
						<a href="#" class="menu-secondary">
	<span class="text">Child Page Lorem Ipsum on Two Lines</span>
</a>

					</li>
				</ul>
			</div>
		</li>
		<li class="nav-primary__item accordion-item" data-accordion-item>
			<a href="#nav-primary-1" class="nav-primary__heading accordion-title">
			   <span class="nav-primary__label">Cost And Aid</span>
			   <span class="trigger">
	
			<svg class="brei-icon brei-icon-plus" focusable="false">
				<use xlink:href="#brei-icon-plus"></use>
			</svg>
		
	
			<svg class="brei-icon brei-icon-minus" focusable="false">
				<use xlink:href="#brei-icon-minus"></use>
			</svg>
		
</span>
			</a>

			<div class="nav-primary__content accordion-content" data-tab-content id="nav-primary-1">

				 <a href="#" class="nav-primary__self">Cost And Aid <svg class="brei-icon brei-icon-triple-chevron" focusable="false" viewBox="0 0 45.2 32">
	<path class="chevron-1" d="M15.6,14.6L3.2,0L0,2.7L11.3,16L0,29.3L3.2,32l13.6-16L15.6,14.6z"/>
	<path class="chevron-2" d="M29.8,14.6L17.4,0l-3.2,2.7L25.5,16L14.2,29.3l3.2,2.7L31,16L29.8,14.6z"/>
	<path class="chevron-3" d="M44,14.6L31.5,0l-3.2,2.7L39.7,16L28.4,29.3l3.2,2.7l13.6-16L44,14.6z"/>
</svg>
</a>
				 
				 <ul class="nav-primary__children">
					<li class="nav-primary__child">
						<a href="#" class="menu-secondary">
	<span class="text">Child Page Lorem Ipsum</span>
</a>

					</li>
					<li class="nav-primary__child">
						<a href="#" class="menu-secondary">
	<span class="text">Child Page Lorem Ipsum</span>
</a>

					</li>
					<li class="nav-primary__child">
						<a href="#" class="menu-secondary">
	<span class="text">Child Page Lorem Ipsum</span>
</a>

					</li>
					<li class="nav-primary__child">
						<a href="#" class="menu-secondary">
	<span class="text">Child Page Lorem Ipsum</span>
</a>

					</li>
					<li class="nav-primary__child">
						<a href="#" class="menu-secondary">
	<span class="text">Child Page Lorem Ipsum on Two Lines</span>
</a>

					</li>
				</ul>
			</div>
		</li>
		<li class="nav-primary__item accordion-item" data-accordion-item>
			<a href="#nav-primary-2" class="nav-primary__heading accordion-title">
			   <span class="nav-primary__label">Admissions</span>
			   <span class="trigger">
	
			<svg class="brei-icon brei-icon-plus" focusable="false">
				<use xlink:href="#brei-icon-plus"></use>
			</svg>
		
	
			<svg class="brei-icon brei-icon-minus" focusable="false">
				<use xlink:href="#brei-icon-minus"></use>
			</svg>
		
</span>
			</a>

			<div class="nav-primary__content accordion-content" data-tab-content id="nav-primary-2">

				 <a href="#" class="nav-primary__self">Admissions <svg class="brei-icon brei-icon-triple-chevron" focusable="false" viewBox="0 0 45.2 32">
	<path class="chevron-1" d="M15.6,14.6L3.2,0L0,2.7L11.3,16L0,29.3L3.2,32l13.6-16L15.6,14.6z"/>
	<path class="chevron-2" d="M29.8,14.6L17.4,0l-3.2,2.7L25.5,16L14.2,29.3l3.2,2.7L31,16L29.8,14.6z"/>
	<path class="chevron-3" d="M44,14.6L31.5,0l-3.2,2.7L39.7,16L28.4,29.3l3.2,2.7l13.6-16L44,14.6z"/>
</svg>
</a>
				 
				 <ul class="nav-primary__children">
					<li class="nav-primary__child">
						<a href="#" class="menu-secondary">
	<span class="text">Child Page Lorem Ipsum</span>
</a>

					</li>
					<li class="nav-primary__child">
						<a href="#" class="menu-secondary">
	<span class="text">Child Page Lorem Ipsum</span>
</a>

					</li>
					<li class="nav-primary__child">
						<a href="#" class="menu-secondary">
	<span class="text">Child Page Lorem Ipsum</span>
</a>

					</li>
					<li class="nav-primary__child">
						<a href="#" class="menu-secondary">
	<span class="text">Child Page Lorem Ipsum</span>
</a>

					</li>
					<li class="nav-primary__child">
						<a href="#" class="menu-secondary">
	<span class="text">Child Page Lorem Ipsum on Two Lines</span>
</a>

					</li>
				</ul>
			</div>
		</li>
		<li class="nav-primary__item accordion-item" data-accordion-item>
			<a href="#nav-primary-3" class="nav-primary__heading accordion-title">
			   <span class="nav-primary__label">Student and Campus Life</span>
			   <span class="trigger">
	
			<svg class="brei-icon brei-icon-plus" focusable="false">
				<use xlink:href="#brei-icon-plus"></use>
			</svg>
		
	
			<svg class="brei-icon brei-icon-minus" focusable="false">
				<use xlink:href="#brei-icon-minus"></use>
			</svg>
		
</span>
			</a>

			<div class="nav-primary__content accordion-content" data-tab-content id="nav-primary-3">

				 <a href="#" class="nav-primary__self">Student and Campus Life <svg class="brei-icon brei-icon-triple-chevron" focusable="false" viewBox="0 0 45.2 32">
	<path class="chevron-1" d="M15.6,14.6L3.2,0L0,2.7L11.3,16L0,29.3L3.2,32l13.6-16L15.6,14.6z"/>
	<path class="chevron-2" d="M29.8,14.6L17.4,0l-3.2,2.7L25.5,16L14.2,29.3l3.2,2.7L31,16L29.8,14.6z"/>
	<path class="chevron-3" d="M44,14.6L31.5,0l-3.2,2.7L39.7,16L28.4,29.3l3.2,2.7l13.6-16L44,14.6z"/>
</svg>
</a>
				 
				 <ul class="nav-primary__children">
					<li class="nav-primary__child">
						<a href="#" class="menu-secondary">
	<span class="text">Child Page Lorem Ipsum</span>
</a>

					</li>
					<li class="nav-primary__child">
						<a href="#" class="menu-secondary">
	<span class="text">Child Page Lorem Ipsum</span>
</a>

					</li>
					<li class="nav-primary__child">
						<a href="#" class="menu-secondary">
	<span class="text">Child Page Lorem Ipsum</span>
</a>

					</li>
					<li class="nav-primary__child">
						<a href="#" class="menu-secondary">
	<span class="text">Child Page Lorem Ipsum</span>
</a>

					</li>
					<li class="nav-primary__child">
						<a href="#" class="menu-secondary">
	<span class="text">Child Page Lorem Ipsum on Two Lines</span>
</a>

					</li>
				</ul>
			</div>
		</li>
		<li class="nav-primary__item accordion-item" data-accordion-item>
			<a href="#nav-primary-4" class="nav-primary__heading accordion-title">
			   <span class="nav-primary__label">About Taft College</span>
			   <span class="trigger">
	
			<svg class="brei-icon brei-icon-plus" focusable="false">
				<use xlink:href="#brei-icon-plus"></use>
			</svg>
		
	
			<svg class="brei-icon brei-icon-minus" focusable="false">
				<use xlink:href="#brei-icon-minus"></use>
			</svg>
		
</span>
			</a>

			<div class="nav-primary__content accordion-content" data-tab-content id="nav-primary-4">

				 <a href="#" class="nav-primary__self">About Taft College <svg class="brei-icon brei-icon-triple-chevron" focusable="false" viewBox="0 0 45.2 32">
	<path class="chevron-1" d="M15.6,14.6L3.2,0L0,2.7L11.3,16L0,29.3L3.2,32l13.6-16L15.6,14.6z"/>
	<path class="chevron-2" d="M29.8,14.6L17.4,0l-3.2,2.7L25.5,16L14.2,29.3l3.2,2.7L31,16L29.8,14.6z"/>
	<path class="chevron-3" d="M44,14.6L31.5,0l-3.2,2.7L39.7,16L28.4,29.3l3.2,2.7l13.6-16L44,14.6z"/>
</svg>
</a>
				 
				 <ul class="nav-primary__children">
					<li class="nav-primary__child">
						<a href="#" class="menu-secondary">
	<span class="text">Child Page Lorem Ipsum</span>
</a>

					</li>
					<li class="nav-primary__child">
						<a href="#" class="menu-secondary">
	<span class="text">Child Page Lorem Ipsum</span>
</a>

					</li>
					<li class="nav-primary__child">
						<a href="#" class="menu-secondary">
	<span class="text">Child Page Lorem Ipsum</span>
</a>

					</li>
					<li class="nav-primary__child">
						<a href="#" class="menu-secondary">
	<span class="text">Child Page Lorem Ipsum</span>
</a>

					</li>
					<li class="nav-primary__child">
						<a href="#" class="menu-secondary">
	<span class="text">Child Page Lorem Ipsum on Two Lines</span>
</a>

					</li>
				</ul>
			</div>
		</li>
	</ul>

And this is about as far as I’ve gotten trying to replicate it from examples I’ve grabbed from various locations.

class WPDocs_Walker_Nav_Menu extends Walker_Nav_Menu {

    /**
     * Starts the list before the elements are added.
     *
     * Adds classes to the unordered list sub-menus.
     *
     * @param string $output Passed by reference. Used to append additional content.
     * @param int    $depth  Depth of menu item. Used for padding.
     * @param array  $args   An array of arguments. @see wp_nav_menu()
     */
    function start_lvl( &$output, $depth = 0, $args = array() ) {
        // Depth-dependent classes.
        $indent = ( $depth > 0  ? str_repeat( "\t", $depth ) : '' ); // code indent
        $display_depth = ( $depth + 1); // because it counts the first submenu as 0
        $classes = array(
            'nav-primary__children',
            ( $display_depth % 2  ? 'menu-odd' : 'menu-even' ),
            ( $display_depth >=2 ? 'sub-sub-menu' : '' ),
            'menu-depth-' . $display_depth
        );
        $class_names = implode( ' ', $classes );

        // Build HTML for output.
        $output .= "\n" . $indent . '<div class="nav-primary__content accordion-content" data-tab-content id="nav-primary-0"><a href="#" class="nav-primary__self">Academics <svg class="brei-icon brei-icon-triple-chevron" focusable="false" viewBox="0 0 45.2 32"><path class="chevron-1" d="M15.6,14.6L3.2,0L0,2.7L11.3,16L0,29.3L3.2,32l13.6-16L15.6,14.6z"/><path class="chevron-2" d="M29.8,14.6L17.4,0l-3.2,2.7L25.5,16L14.2,29.3l3.2,2.7L31,16L29.8,14.6z"/><path class="chevron-3" d="M44,14.6L31.5,0l-3.2,2.7L39.7,16L28.4,29.3l3.2,2.7l13.6-16L44,14.6z"/>						</svg></a><ul class="' . $class_names . '" >' . "\n";
    }

    /**
     * Start the element output.
     *
     * Adds main/sub-classes to the list items and links.
     *
     * @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 array  $args   An array of arguments. @see wp_nav_menu()
     * @param int    $id     Current item ID.
     */
    function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        global $wp_query;
        $indent = ( $depth > 0 ? str_repeat( "\t", $depth ) : '' ); // code indent

        // Depth-dependent classes.
        $depth_classes = array(
            ( $depth == 0 ? 'nav-primary__item accordion-item' : '' ),
            ( $depth >=2 ? 'nav-primary__child' : '' ),
            ( $depth % 2 ? 'menu-item-odd' : 'menu-item-even' ),
            'menu-item-depth-' . $depth
        );

        $depth_class_names = esc_attr( implode( ' ', $depth_classes ) );

        // Passed classes.
        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
        $class_names = esc_attr( implode( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) ) );

        // Build HTML.
        $output .= $indent . '<li id="nav-menu-item-'. $item->ID . '" class="' . $depth_class_names . ' ' . $class_names . '">';

        // Link attributes.
        $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
        $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
        $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
        $attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';
        $attributes .= ' class="nav-primary__heading ' . ( $depth > 0 ? 'sub-menu-link' : 'accordion-title' ) . '"';

        // Build HTML output and pass through the proper filter.
        $item_output = sprintf( '%1$s<a%2$s>%3$s%4$s%5$s</a>%6$s',
            $args->before,
            $attributes,
            $args->link_before,
            apply_filters( 'the_title', $item->title, $item->ID ),
            $args->link_after,
            $args->after
        );

		$output .= '<!-- Outception -->';
        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    }
	 function end_el( &$output, $data_object, $depth = 0, $args = null ) {
	if ( isset( $args->item_spacing ) && 'discard' === $args->item_spacing ) {
		$t = '';
		$n = '';
	} else {
		$t = "\t";
		$n = "\n";
	}
	$output .= "<!--</div>-->{$n}";
	}
	


}

At this point I would love to consider removing the stupid second level all together, but that’s half ass and I want to whole ass the project.

Can anyone shed some light on how to properly re-create this stupid menu?

Viewing 3 replies - 1 through 3 (of 3 total)

Moderator bcworkz
(@bcworkz)

1 year, 11 months ago

If the menu you want is so “stupid”, why waste effort replicating it? It’s better all around to have a consistent logical structure throughout all levels, which is what a walker is perfect for.

If you must replicate an illogical structure in a walker, you’ll need a bunch of conditional statements to do special things at certain points so the faulty, illogical structure can be replicated. For example, you could declare an additional method beyond the usual start/end level/element methods and conditionally call it when appropriate.

Thread Starter Jason
(@zushiba)

1 year, 11 months ago

Because that’s what’s required to replicate this theme. It’s not my theme it’s the theme I get forced to implement.

I did eventually get it mostly functional in the end but I still hate it and wish there was an easier, more logical way to do simple things like injecting HTML or added attributes within the initial wp_nav_menu function.

If wp_nav_menu had just a few more features it would completely solve this issue. Adding attributes to generated elements for instance or the ability to add HTML content before/after second or third level menus that’s different than the blanket before/after that is triggered regardless of the level.

It’s like wp_nav_menu is so close to being awesome but then fails at the last yard line.

Moderator bcworkz
(@bcworkz)

1 year, 11 months ago

You cannot only replicate the appearance and behavior of a menu, you need to replicate everything that’s wrong with it as well? What does it matter as long as it looks and behaves the same? There are many ways that can be achieved. You needn’t answer this, just posing the question in case it helps some in your approach.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Having real difficulty with custom walker for stupidly complex menu.’ is closed to new replies.

Having real difficulty with custom walker for stupidly complex menu.

Tags

Topics

Topics with no replies

Non-support topics

Resolved topics

Unresolved topics

All topics