2

I currently have a parent page with some child pages. I am able to list these child pages but would like to insert a custom li class. The wp_list_pages outputs <li class="page-item number"></li>. I would like for it to output <li class="hvr-underline"></li>. Here is the code I have so far:

$children = wp_list_pages( 'title_li=&child_of='.$post->ID.'&echo=0' );

if ( $children) : ?>
    <ul class="menu ">
        <?php echo $children; ?>
    </ul>
<?php endif;
  • Just to check. Any reason you can't put a class on the ul and address the elements as ul.my_class li instead? – Andy Macaulay-Brook Sep 30 '16 at 15:58
  • I have a global animation class that i would like to place where the li is, that way the animation is only called once in the css – steamfunk Sep 30 '16 at 16:03
  • And you can't use a more complex selector to do that? – Andy Macaulay-Brook Sep 30 '16 at 16:07
  • @AndyMacaulay-Brook I just used your method of having the animation specific to the li – steamfunk Sep 30 '16 at 16:18
  • I've turned the comments into an answer. Glad it worked out. – Andy Macaulay-Brook Sep 30 '16 at 16:44
1

wp_list_pages allows you to include a walker function. That would give you complete freedom to add any classes you want, but it's no a beginner's method. You could start by reading this.

If you want a simple search and replace on the class, as your question seems to indicate, you can use the wp_list_pages filter like this:

add_filter ('wp_list_pages','wpse241119_replace_class',10,3);
function wpse241119_replace_class ($output, $r, $pages) {
  $output = str_replace ('page-item number', 'hvr-underline', $output);
  return $output;
  }
1

If there's no reason to stop you, you could solve this simply by adding a class to the ul and using a more complex selector in your CSS or JavaScript:

$children = wp_list_pages( 'title_li=&child_of='.$post->ID.'&echo=0' );

if ( $children) : ?>
    <ul class="menu wpse241119_list">
        <?php echo $children; ?>
    </ul>
<?php endif;

And then address each li as ul.wpse241119_list li or if the list might be nested, ul.wpse241119_list > li to catch the top level list items.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.