Select first child/subpage item in wp list pages

This question is following on from a question I posted previously,

Ok, the html code that I’m trying to output is the same as the previous question – here:

Read More

The current outputted html is this:

<div id="nav">  
        <ul id="drop-nav">          
            <li><a href="#">About Us</a>
            <div class="subnav">
                    <div class="subnavTop">
                        <ul class="subnavContent">
                            <li>
                                <dl>
                                    <dd><a href="#">Child of About</a></dd> <!-- Child Item | Depth = 1 -->
                                    <dd><a href="#">Grandchild of About</a></dd> <!-- GrandChild Item | Depth = 2 -->
                                </dl>
                            </li>
                        </ul>
                    </div>
                </div>
            </li>
            <li><a href="#">Talk to us</a></li>
        </ul>
<br style="clear: left" />
</div>

Here is the code I’m using in header.php to generate the html/menu items:

<div id="nav">  
    <ul id="drop-nav">  
    <?php
    // Query the database for all top-level page IDs, and store them in the $menuPages array under the [ID] sub-array
    $menuPages = $wpdb->get_results("SELECT ID FROM $wpdb->posts WHERE post_parent=0 AND post_type='page' AND post_status='publish' ORDER BY menu_order ASC");

    // For each element in the $menuPages array, get the value from the [ID]-subarray to create the top-level menu and it's children
    foreach($menuPages as $menuItem){
        $menuItemTitle = get_the_title($menuItem->ID);          
        $menuItemClass = strtolower(trim($menuItemTitle));                  
        $menuItemClass = preg_replace('/[^a-z0-9-]/', '-', $menuItemClass);
        $menuItemClass = preg_replace('/-+/', "-", $menuItemClass);             
        $menuItemPermalink = get_permalink($menuItem->ID);
            if (isset($menuItemTitle) && $menuItemTitle != 'Home'){                 
                _e('<li class="'.$menuItemClass.'">'.PHP_EOL);
                _e('<a href="'.$menuItemPermalink.'">'.$menuItemTitle.'</a>'.PHP_EOL);

            // Run wp_list_pages to fetch any children, and put the HTML <LI> list results into $menuItemChildren as a string
                $menuItemChildren = wp_list_pages('title_li=&echo=0&sort_column=menu_order&child_of='.$menuItem->ID);                   

                $menuItemChildren = preg_replace('%<li class=".*">%U', '', $menuItemChildren);
                $menuItemChildren = str_replace('</li>', '', $menuItemChildren);
                $menuItemChildren = str_replace('<a', '<dd><a', $menuItemChildren);
                $menuItemChildren = str_replace('</a>', '</a></dd>', $menuItemChildren);
                $menuItemChildren = str_replace('<ul class='children'>', '', $menuItemChildren);
                $menuItemChildren = str_replace('</ul>', '', $menuItemChildren);            

            // If results were returned, $menuItemChildren is now a string with HTML in it, so create a drop-down and echo out the HTML
                if($menuItemChildren){                      
                    _e('<div class="subnav">'.PHP_EOL);
                    _e('<div class="subnavTop">'.PHP_EOL);
                    _e('<ul class="subnavContent">'.PHP_EOL);       
                    _e('<li>'.PHP_EOL);
                    echo '<dl>' .$menuItemChildren. '</dl>' . PHP_EOL;
                    _e('</li>'.PHP_EOL);
                    _e('</ul>'.PHP_EOL);
                    _e('</div>'.PHP_EOL);
                    _e('</div>'.PHP_EOL);                       
                }
                _e('</li>'.PHP_EOL);            
            }
        }
    ?>
    </ul>
    <br style="clear: left" />
    </div>

I know this is probably a really bad way of doing this, but it seems to do most of the job ok.

The only thing outstanding now is changing the child items/subpages on level/depth 1 from “dd’s” to “dt’s”, leaving any pages below as dd’s. I guess I need some code that takes the first item/child and gives it “dt” tags, then everything else “dd” tags, but I can’t for the life of me figure it out.

Hope this makes sense and any help greatly appreciated, S.

(And I have looked at the Walker class method : ( )

Related posts

Leave a Reply

1 comment

  1. See my Answer to your other question…i think you’re better off with a custom walker.

    Edit: I should perhaps mention explicitly here that i tried writing a walker for you, so check out the other question to find it.