Question

I am trying to build a menu in WordPress that will look like this HTML below from the Tags/taxonomy on WordPress

Desired Output

<ul id="menu-navigation">
    <li class="no-menu"><a href="">Tag 1</a></li>
    <li class="no-menu"><a href="">Tag 2</a></li>
    <li class="no-menu"><a href="">Tag 3</a></li>
    <li class="no-menu"><a href="">Tag 4</a></li>    
    <li><a href="">More <span class="arrow">▾</span></a>
        <ul>
            <li><a href="">tag 5</a></li>
            <li><a href="">tag 6</a></li>
            <li><a href="">tag 7</a></li>
            <li><a href="">tag 8</a></li>
        </ul>
    </li>
</ul>

Assuming I get a list of 20 tags returned to me as an array()

The goal is the above HTML output, notice..

• First 4 tags will be wrapped in <li> tags
• The 5th menu item should be the text More and have <span class="arrow">▾</span> and also the beginning of a new <ul>
• The 5th through 20th tags will be wrapped in <li> tags but they will be under a sub-menu

I have put this together so far that will almost give me the desired output…

<?php
$posttags = array('tag 1', 'tag 2', 'tag 3', 'tag 4', 'tag 5', 'tag 6', 'tag 7',
    'tag 8', 'tag 9', 'tag 10', 'tag 11', 'tag 12', 'tag 13', 'tag 14', 'tag 15',
    'tag 16', 'tag 17', 'tag 18', 'tag 19', 'tag 20');


$count = 0;
if ($posttags) {
    echo '<ul id="menu-navigation">';
    foreach ($posttags as $tag) {
        $count++;
        // If count less then 5 we show the first 4 tags as top level links
        if ($count < 5) {
            echo '<li class="no-menu"><a href="">' . $tag . '</a></li>';
        }
        // The 5th top level link/menu item will be the More link and begin our Sub-menu
        if ($count == 5) {
            echo '<li><a href="">More <span class="arrow">▾</span></a>';
                echo '<ul>';
        }
                    echo '<li class="no-menu"><a href="">' . $tag . '</a></li>';

    }
                echo '</ul>';
             echo '</li>';
    echo '</ul>';
}

This almost works it give me…

<ul id="menu-navigation">
    <li class="no-menu"><a href="">tag 1</a></li>
    <li class="no-menu"><a href="">tag 1</a></li>
    <li class="no-menu"><a href="">tag 2</a></li>
    <li class="no-menu"><a href="">tag 2</a></li>
    <li class="no-menu"><a href="">tag 3</a></li>
    <li class="no-menu"><a href="">tag 3</a></li>
    <li class="no-menu"><a href="">tag 4</a></li>
    <li class="no-menu"><a href="">tag 4</a></li>
    <li><a href="">More <span class="arrow">?</span></a>
        <ul>
            <li class="no-menu"><a href="">tag 5</a></li>
            <li class="no-menu"><a href="">tag 6</a></li>
            <li class="no-menu"><a href="">tag 7</a></li>
            <li class="no-menu"><a href="">tag 8</a></li>
            <li class="no-menu"><a href="">tag 9</a></li>
            <li class="no-menu"><a href="">tag 10</a></li>
            <li class="no-menu"><a href="">tag 11</a></li>
            <li class="no-menu"><a href="">tag 12</a></li>
            <li class="no-menu"><a href="">tag 13</a></li>
            <li class="no-menu"><a href="">tag 14</a></li>
            <li class="no-menu"><a href="">tag 15</a></li>
            <li class="no-menu"><a href="">tag 16</a></li>
            <li class="no-menu"><a href="">tag 17</a></li>
            <li class="no-menu"><a href="">tag 18</a></li>
            <li class="no-menu"><a href="">tag 19</a></li>
            <li class="no-menu"><a href="">tag 20</a></li>
        </ul>
    </li>
</ul>

So the only problem I am having so far is tag 1-4 are printed twice

Please help me correct this and also if you know a better way to do this I am all ear, appreciate any help, thanks in advance

Answer 1

You were printing the li both when $count<4 and in the end of every iteration, when just printing it once should be sufficient. This should do the trick:

$count = 0;
if (is_array($posttags)) {
    echo '<ul id="menu-navigation">';
    foreach ($posttags as $tag) {
        $count++;
        // The 5th top level link/menu item will be the More link and begin our Sub-menu
        if ($count == 5) {
            echo '  <li><a href="">More <span class="arrow">▾</span></a>';
            echo '    <ul>';
        }            // Fix indentation for the items in the sub-menu
        if($count > 4) {
            echo '      ';
        }
        echo '  <li class="no-menu"><a href="">' . $tag . '</a></li>';

    }
    if (count($posttags) > 4) {
        echo '    </ul>';
        echo '  </li>';
        echo '</ul>';
    }
}