WordPress.org

1. GisokuBudo
   Member
   Posted 2 years ago #

   Hi all,

   Just a question here - I want to customise the wp_list_pages in my blog to insert a list item between each of the main headings. The end result would be something like this:

   <ul id="nav-menu">
     <li class="nav-menu-divider"></li>
     <li><a href="">Gallery</a>
       <ul>
         <li><a href="">Submenu-1</a></li>
         <li><a href="">Submenu-2</a></li>
         <li><a href="">Submenu-3</a>
           <ul>
             <li><a href="">submenu-3.1</a></li>
           </ul>
         </li>
         <li><a href="">Submenu-4</a>
           <ul>
             <li><a href="">Submenu-4.1</a></li>
           </ul>
         </li>
       </ul>
     </li>
     <li class="nav-menu-divider"></li>
     <li><a href="">About</a></li>
     <li class="nav-menu-divider"></li>
     <li><a href="">Contact</a></li>
   </ul>

   I've looked at using str_replace in a tutorial at http://www.wantusiak.com/wordpress/wordpress-how-to-style-wp_list_pages , but figured that doing that would affect all posts including the nested ul's, and not the main listing.

   Can anyone offer any advice on getting a str_replace to affect just the top level items? All I need to do is insert the li with the nav-menu-divider class before each.

   Note I'm a bit of a n00b when it comes to php, so be gentle :)

2. vtxyzzy
   Member
   Posted 2 years ago #

   I think this will work for you:

   $my_pages = wp_list_pages('echo=0&title_li=');
   $parts = preg_split('/(<ul|<li|<\/ul>)/',$my_pages,null,PREG_SPLIT_DELIM_CAPTURE);
   $insert = '<li class-"nav-menu-divider"></li>';
   $newmenu = '';
   $level = 0;
   foreach ($parts as $part) {
      if ('<ul' == $part) {++$level;}
      if ('</ul>' == $part) {--$level;}
      if ('<li' == $part && $level == 1) {$newmenu .= $insert;}
      $newmenu .= $part;
   }
   echo $newmenu;

3. GisokuBudo
   Member
   Posted 2 years ago #

   Thanks for the reply vtxyzzy!

   I've put your code in, and it hasn't inserted that extra bit of HTML between the heading tags; instead, it's inserting the following between the sub-menu tags:

   <li nav-menu-divider="" class-=""/>

   FYI, my site's URL is: http://www.gisoku-budo.com/ if you want to see the code in context.

   Any chance you could have a look at that great snippet of code you provided to help move the extra divs to being inserted at the base heading styles and clean up the inserted tags, e.g.

   Currently:

   <li nav-menu-divider="" class-=""/>

   Should be:

   <li class="nav-menu-divider"></li>

   Thanks again, I really appreciate your help :)

4. GisokuBudo
   Member
   Posted 2 years ago #

   Quick update - fixed up the li/class issue by making the change as follows:

   $insert = '<li class-"nav-menu-divider"></li>';

   To:

   $insert = '<li class="nav-menu-divider"></li>';

   Go me for missing that one!

   I've checked and it's actively inserting the extra li in the submenu; all I need is a point in the right direction to get it to insert that code on the header line or first ul tag instead of the submenu list.

5. vtxyzzy
   Member
   Posted 2 years ago #

   Sorry about the typo. Glad you fixed it.

   I need to see the code around the place where you inserted the code I provided. Please post from about 10 lines before the new code to about 10 lines after.

   My guess is that the new code is being called after the <ul id="nav-menu"> is inserted. That changes the algorithm completely. Also, it appears that you do not want a divider before the first <li. That is not like the example you first gave.

   If this is the case, try inserting array_unshift($parts,'<ul'); just ahead of the line foreach ($parts as $part) {

6. GisokuBudo
   Member
   Posted 2 years ago #

   Sorry for another reply, doesn't look like I can edit my previous one!!

   I had a wicked brainwave and gave an idea a whirl, and it worked!!

   I changed the line:

   if ('<li' == $part && $level == 1) {$newmenu .= $insert;}

   To:

   if ('<li' == $part && $level == 0) {$newmenu .= $insert;}

   And it is working perfectly! For the sake of compiling the end result if someone else ever comes across this and needs help:

   <?php
   $my_pages = wp_list_pages('echo=0&title_li=&exclude=313');
   $parts = preg_split('/(<ul|<li|<\/ul>)/',$my_pages,null,PREG_SPLIT_DELIM_CAPTURE);
   $insert = '<li class="nav-menu-divider"></li>';
   $newmenu = '';
   $level = 0;
   foreach ($parts as $part) {
   if ('<ul' == $part) {++$level;}
   if ('</ul>' == $part) {--$level;}
   if ('<li' == $part && $level == 0) {$newmenu .= $insert;}
   $newmenu .= $part;
   }
   echo $newmenu;
   ?>

   Thanks so much, would never had been able to code something like that up myself :) Full results can be found at: http://www.gisoku-budo.com/

   Edit: Oops, you replied while I was in the middle of posting my result!!

7. vtxyzzy
   Member
   Posted 2 years ago #

   Please check my previous post. If what I described is true, others need to know that part of the fix.

   Also, please use the dropdown at top right to mark this topic 'Resolved'.

   Edit: We seem to be racing each other. But I think your fix is better than mine given the fact that you do not want the 'Home' link to be preceeded by the divider.

   Very glad you figured it out!

8. GisokuBudo
   Member
   Posted 2 years ago #

   No worries, here's my source code for the header:

   <div id="header"> <!-- Header block -->
   
     <div id="header-top">
   
       <?php include(TEMPLATEPATH .'/searchform.php'); ?> <!-- Get search box -->
   
     </div>
   
     <div id="header-bottom">
   
       <ul id="nav-menu">
   
         <li><a href="/">Home</a></li>
   
         <?php
         $my_pages = wp_list_pages('echo=0&title_li=&exclude=313');
         $parts = preg_split('/(<ul|<li|<\/ul>)/',$my_pages,null,PREG_SPLIT_DELIM_CAPTURE);
         $insert = '<li class="nav-menu-divider"></li>';
         $newmenu = '';
         $level = 0;
         foreach ($parts as $part) {
         if ('<ul' == $part) {++$level;}
         if ('</ul>' == $part) {--$level;}
         if ('<li' == $part && $level == 0) {$newmenu .= $insert;}
         $newmenu .= $part;
         }
         echo $newmenu;
         ?>
   
       </ul>
   
     </div>
   
   </div>

   You'll notice I have the link to 'Home' hard-coded, this is left-over from when I first started using WP and wasn't sure how to generate a link to home from within the GUI. Because I'm lazy, I'm leaving it in, and it also ensure it was easier to implement the dividers when I was designing the solution with coding it up in mind.

   Extra thanks for setting this one to resolved - wasn't sure if this happened by a mod or if it could be something I could do. Will do so once I've posted this.

   Again, thank you so much for your help, could not have done it without your assistance!

   Edit: SOrry for all the racing with my replies! I was wondering if I posted this solution as a tech tip on my blog, how would you like to be credited? Happy just to mention your name/link to this thread/plug your website, let me know by replying here or contacting me via my blog. Credit's due where credit's deserved. I've also made a note of it in my source code.

9. vtxyzzy
   Member
   Posted 2 years ago #

   Thanks for the credit offer, but that is not necessary. Just pass along the help.

Topic Closed

This topic has been closed to new replies.