Turning a wp_nav_menu into a foreach loop

Question

I have a customised wp_nav_menu navigation that is outputting a whole list of sub page items from just one echo line...

<?php

$menuParameters = array(
    'theme_location'    =>'primary',
    'menu_id'           => 'main-menu',
    'before'            => '<div class="service-boxes-item"><h2>',
    'after'             => '</h2></div>',
    'container'         => false,
    'echo'              => false,
    'depth'             => 0,
    'walker'=>new Selective_Walker()
);

echo strip_tags(wp_nav_menu( $menuParameters ), '<a><div><h2>' );
?>

I've done this in order to strip out the ul and li tags. Currently it outputs this:

<div class="service-boxes-item"><h2><a href="#">page title</a></h2></div>
<div class="service-boxes-item"><h2><a href="#">page title</a></h2></div>
<div class="service-boxes-item"><h2><a href="#">page title</a></h2></div>
<div class="service-boxes-item"><h2><a href="#">page title</a></h2></div>
<div class="service-boxes-item"><h2><a href="#">page title</a></h2></div>
<div class="service-boxes-item"><h2><a href="#">page title</a></h2></div>

Which is perfect and just what I want.

You'll see I'm using a custom walker, this is there to enable me to only show the sub menu items of the current page.

The problem now comes when I need to add other elements to each of the service-boxes-items.

I've managed to add tags and classes such as the H1 and the Div tags... but now, I would like to add a button underneath each page title in side each service-boxes-items.

I believe the best option for this would be to add it inside a loop so instead of adding those items into the echo string, I can add them properly, giving me more flexibilty for each item.

I've done this previously with page and post loops, but I cant figure out how to do it with the wp_nav_menu.

The only way I can think of is something like this...

<?php 
$menuParameters = array(
    'theme_location'    =>'primary',
    'menu_id'           => 'main-menu',
    'container'         => false,
    'echo'              => false,
    'depth'             => 0,
    'walker'=>new Selective_Walker()
);
$pages = wp_nav_menu($menuParameters);  ?>

<?php foreach( $pages as $menuParameters ) { ?>

    <div class="service-boxes-item">
        <h2>
            <a href="#">page title</a>
        </h2>
    </div>

    <button class="button button-service" onclick="window.location.href = '<?php echo  get_permalink($page->ID); ?>';">More Info</button>

<?php } ?>

But as you can see, this obviously won't work because the code is very wrong, and it has all sorts of issues. I'm mixing page/post loops with nav output.

I'm getting in a real mess as I don't know how to approach other things like permalinks with nav menus as they seem to be automatically built in and probably not accessible from the foreach loop using get_permalink();.

Essentially I just need to be able to add other elements to each item... Unless I can add the button (with the permalink etc.) inside the echo string? Any help or advice is massively appreciated!!

If you're wondering, it currently looks like this:

and I'm trying to get each item to look like this:

Add the button in your walker. Without seeing your walker, can't really help, but you can easily add this. Or without even using PHP, make the "button" a pseudo CSS element. — disinfor
Thanks for that :) I'll look into how to get it added in the walker, and see if that works, that seems like the most sensible way :) — Shaun Taylor
Look in the Walker for the start_el method and there should be some sort of $item_output variable. I'm going to assume, based on how the Walker works, that you'll want to add your button around one of the last concatenated $item_outputs. — disinfor

Tokant Tokant · Accepted Answer · 2020-04-27T21:00:11

0

votes

In your foreach loop try

get_permalink($menuParameters->ID)

Turning a wp_nav_menu into a foreach loop

1 Answers