logo
Ask your WordPress questions! Pay money and get answers fast! (more info)

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.

$15
Add a class name to all anchor links that have children

Below is a block of code that adds a "parent" class to all wp_nav_menu() and wp_list_pages() list items that have children. Please can someone suggest a new block of code that assigns a "parent" class directly to the anchor link, rather than the enclosing list item.

The default classes that WordPress assigns to wp_nav_menu() and wp_list_pages() list items should remain unchanged.

Thank you


// Add a class of "parent" to all menu items that have children - wp_nav_menu();
add_filter( 'wp_nav_menu_objects', 'add_menu_parent_class' );
function add_menu_parent_class( $items ) {
$parents = array();
foreach ( $items as $item ) {
if ( $item->menu_item_parent && $item->menu_item_parent > 0 ) {
$parents[] = $item->menu_item_parent;
}
}
foreach ( $items as $item ) {
if ( in_array( $item->ID, $parents ) ) {
$item->classes[] = 'parent';
}
}
return $items;
}


// Create a custom fallback menu
function menu_default() {
$page = get_page_by_title('Homepage');
wp_list_pages('title_li=&sort_column=menu_order&exclude='.$page->ID);
}


// Add a class of "parent" to all pages that have children - wp_list_pages();
add_filter( 'page_css_class', 'add_parent_class', 10, 4 );
function add_parent_class( $css_class, $page, $depth, $args ) {
if ( ! empty( $args['has_children'] ) )
$css_class[] = 'parent';
return $css_class;
}

This question has been answered.

designbuildtest | 01/30/13 at 10:43am Edit
Tutorial: How to assign prize money


(7) Responses

See a threaded view of answers?

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

  • avatar
    Last edited:
    01/30/13
    10:48am
    Francisco Javier Carazo Gil says:

    I would do it using jQuery, execute this script only when you need it:


    <script>
    jQuery("a").childre().addClass("myClass");
    </script>

  • avatar
    Last edited:
    01/30/13
    11:32am
    Dbranes says:

    Hi, here is one idea:

    function my_nav_with_link_class( $menu ){
    $menu = str_replace('title="parent"', 'class="parent"', $menu );
    return $menu;
    }
    add_filter( 'wp_nav_menu', 'my_nav_with_link_class' );

    add_filter( 'wp_nav_menu_objects', 'my_menu_objects', 11, 2 );
    function my_menu_objects( $items, $args ) {
    $parents = array();
    foreach ( $items as $item ) {
    if ( $item->menu_item_parent && $item->menu_item_parent > 0 ) {
    $parents[] = $item->menu_item_parent;
    }
    }
    foreach ( $items as $item ) {
    if ( in_array( $item->ID, $parents ) ) {
    //$item->classes[] = 'parent';
    $item->attr_title = 'parent'; // add title attribute to the link
    }
    }
    return $items;
    }


    i.e. you can use the attr_title to mark the correct menu items, and then replace it with class="parent" when you output the menu.

    Previous versions of this answer: 01/30/13 at 11:24am | 01/30/13 at 11:32am

  • avatar
    Last edited:
    01/30/13
    11:08am
    designbuildtest says:

    Hi Francisco, I'd prefer the classes be added via filters/functions rather applied via jQuery.
    Thanks

  • avatar
    Last edited:
    01/30/13
    11:21am
    Francisco Javier Carazo Gil says:

    I think that $item object doesn't let you access directly to anchor.

    Maybe you can parse HTML directly.

  • avatar
    Last edited:
    01/30/13
    11:34am
    designbuildtest says:

    Hi Dbranes, this might work for wp_nav_menu(), but doesn't appear to have any effect when then menu fallbacks to wp_list_pages()

  • avatar
    Last edited:
    01/30/13
    1:27pm
    Dbranes says:

    ok, here is a custom walker for wp_list_pages, that adds the class "parent" to the link if the item has children:

     class My_Custom_Walker extends Walker_page {
    function start_el( &$output, $page, $depth, $args, $current_page = 0 ) {
    if ( $depth )
    $indent = str_repeat("\t", $depth);
    else
    $indent = '';

    extract($args, EXTR_SKIP);
    $css_class = array('page_item', 'page-item-'.$page->ID);
    if ( !empty($current_page) ) {
    $_current_page = get_post( $current_page );
    if ( in_array( $page->ID, $_current_page->ancestors ) )
    $css_class[] = 'current_page_ancestor';
    if ( $page->ID == $current_page )
    $css_class[] = 'current_page_item';
    elseif ( $_current_page && $page->ID == $_current_page->post_parent )
    $css_class[] = 'current_page_parent';
    } elseif ( $page->ID == get_option('page_for_posts') ) {
    $css_class[] = 'current_page_parent';
    }

    $link_css="";
    if($args['has_children']>0){
    $link_css="class=\"parent\"";
    }

    $css_class = implode( ' ', apply_filters( 'page_css_class', $css_class, $page, $depth, $args, $current_page ) );

    $output .= $indent . '<li class="' . $css_class . '"><a href="' . get_permalink($page->ID) . '" '.$link_css.'>' . $link_before . apply_filters( 'the_title', $page->post_title, $page->ID ) . $link_after . '</a>';

    if ( !empty($show_date) ) {
    if ( 'modified' == $show_date )
    $time = $page->post_modified;
    else
    $time = $page->post_date;

    $output .= " " . mysql2date($date_format, $time);
    }
    }
    }


    and you can call it like this:

    // Create a custom fallback menu
    function menu_default() {
    $page = get_page_by_title('Homepage');

    // custom walker class:
    $mywalker = new My_Custom_Walker();

    $args = array(
    'walker' => $mywalker,
    'title_li'=>'',
    'sort_column'=>'menu_order',
    'exclude'=>$page->ID,
    );

    wp_list_pages( $args );

    // old:
    //$page = get_page_by_title('Homepage');
    //wp_list_pages('title_li=&sort_column=menu_order&exclude='.$page->ID);
    }


  • avatar
    Last edited:
    01/31/13
    12:19am
    designbuildtest says:

    Superb - thanks Dbranes. Works perfectly.

This question has expired.



Gabriel Reguly, designbuildtest, Christianto, Arnav Joy, Naveen Chand voted on this question.



Current status of this question: Completed



Please log in to add additional discourse to this page.





Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.