Support » Themes and Templates » Inject divs before sub uls in wp_list_pages

  • Hello!

    I would like to add some divs before and after my sub uls in my navigation, while using wp_list_pages.

    Here is an example of what I want to accomplish:

    <li><a href="link">Parent Page 1</li>
    <li><a href="link">Parent Page 2
       <div class="topleft">
       <div class="topright">
           <li><a href="link">Child of 2</li>
           <li><a href="link">Child of 2</li>
    <li><a href="link">Parent Page 3</li>

    Any help would be really appreciated!

Viewing 3 replies - 1 through 3 (of 3 total)
  • That’s not possible with wp_list_pages. You’d need to use something like get_pages instead and create your own Pages listing.

    Actually it should be able do be done with wp_list_pages. The closest I have got is the following, but it also adds the code even if the page parent has no children…

    		//This funtion allows you to find text between any marker text
    		//This allows us to find the pade ID for the parent pages
    		function ExtractString($str, $start, $end)
    			$str_low = strtolower($str);
    			$pos_start = strpos($str_low, $start);
    			$pos_end = strpos($str_low, $end, ($pos_start + strlen($start)));
    			if ( ($pos_start !== false) && ($pos_end !== false) )
    			$pos1 = $pos_start + strlen($start);
    			$pos2 = $pos_end - $pos1;
    			return substr($str, $pos1, $pos2);
    		$parents = wp_list_pages("sort_column=menu_order&title_li=&title=&depth=1&echo=0"); //get parent pages
    		$parents_arr= explode("\n", $parents); //put parent pages into an array
    		$howmanyparents = count($parents_arr); // find out how many parent pages are in the array
    		for($i=0;$i<($howmanyparents - 1);$i++){ //Go through each parent to find the children for that parent
    			$trimmedparent = str_replace('</li>','<div class="drop">
    								<div class="drop-inner">
    									<div class="table">
    										<div class="top-left"></div>
    										<div class="top"></div>
    										<div class="top-right"></div>
    										<div class="body">
    											<div class="left"></div>
    											<div class="content">
    												<div class="col">
    												<ul>',$parents_arr[$i]); //replace the closing <li> from the parent with a <ul> for the sub-list and the custom div here.
    			$pagelist = $pagelist.$trimmedparent; //Add the current parent to the output list of pages - this is where we start rebuilding the wp_list_pages output
    			If(stristr($parents_arr[$i], 'current_page_item"') !== FALSE || stristr($parents_arr[$i], 'current_page_parent"') !== FALSE)
    			{ //If the parent is the current page item or parent we have to search for the page ID in a different way because the current page/parent has no trailing quote after the page ID in the link
    				$parentid = ExtractString($parents_arr[$i], 'page-item-', ' '); //Find the ID of the "current page item" Parent page assigned by WordPress via the "page-item-" part of the link
    				$parentid = ExtractString($parents_arr[$i], 'page-item-', '"'); //Find the ID of the Parent page assigned by WordPress via the "page-item-" part of the link
    			$children = wp_list_pages("title_li=&child_of=".$parentid."&echo=0"); //Get the list of children for the current parent using wp_list_pages and the parent's ID
    			if($children == "") {$children = "<li>&nbsp;</li>";}
    			$pagelist = $pagelist.$children; //Add children to the pagelist
    			$pagelist = $pagelist.'</ul></div></div><div class="right"></div></div><div class="bottom-left"></div><div class="bottom"></div><div class="bottom-right"></div></div><div class="narr"></div></div></div></li>'; // Close the custom div, sublist, and original parent list item before continuing to the next parent and children
    		echo $pagelist;

    Anyone able to help?

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Inject divs before sub uls in wp_list_pages’ is closed to new replies.