How to add class on wp_list_pages children

2 Views

I’ am using bootstrap 3. I’ don’t know if its possible in WordPress to add the class on function wp_list_pages on its children ul. I know it possible with jQuery.

This is what I currently have

Read More
<ul class="nav navbar-nav dropdown" role="menu" aria-labelledby="dLabel">
<?php 
  $args = array(
    'authors'      => '',
    'child_of'     => 0,
    'date_format'  => get_option('date_format'),
    'depth'        => 2,
    'echo'         => 1,
    'exclude'      => '5, 141, 143, 145',
    'include'      => '',
    'link_after'   => '',
    'link_before'  => '',
    'post_type'    => 'page',
    'post_status'  => 'publish',
    'show_date'    => '',
    'sort_column'  => 'menu_order',
    'title_li'     => '', 
    'walker'       => ''
  ); 
?>
<?php wp_list_pages( $args ); ?> 
</ul>

This is a dropdown menu, so WordPress adds a class children into its ul, but can I add bootstrap class dropdown into that children ul.

Post Views: 2

Related posts

Leave a Reply

2 comments

  1. You need to create a custom walker to change the child <ul> class. There’s no filter inside the default page walker to change the classes that are applied.

    You don’t need to include so many arguments for wp_list_pages by the way. Only the ones you change.

    Here’s how I’d do it:

    Add to functions.php –

    class WPSE_Walker_Page extends Walker_Page {
    /**
     * @see Walker::start_lvl()
     * @since 2.1.0
     *
     * @param string $output Passed by reference. Used to append additional content.
     * @param int $depth Depth of page. Used for padding.
     * @param array $args
     */
    function start_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("t", $depth);
        $output .= "n$indent<ul class='change-me children'>n"; // MAKE SURE TO CHANGE CLASSES HERE
    }
}

    Then replace your existing call to wp_list_pages() with:

    <?php 
$args = array(
    'depth'        => 2,
    'exclude'      => '5, 141, 143, 145',
    'sort_column'  => 'menu_order',
    'title_li'     => '', 
    'walker'       => new WPSE_Walker_Page(),
); 

wp_list_pages( $args ); ?>

  2. Okay, still didn’t find what I was looking for but I found a work around without using jQuery only had to paste in the code of class dropdown-menu into my css style, thats it. Works!

    CSS

    .primary-menu-container > ul > li.page_item_has_children > ul.children{
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    list-style: none;
    font-size: 14px;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
    background-clip: padding-box;
}