Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Add a class name to all anchor links that have children WordPress

  • SOLVED

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;
}

2013-01-30 by designbuildtest

Answers (2)

2013-01-30

Dbranes answers:

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.

designbuildtest comments:

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()

Dbranes comments:

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);
}


designbuildtest comments:

Superb - thanks Dbranes. Works perfectly.

2013-01-30

Francisco Javier Carazo Gil answers:

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

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

designbuildtest comments:

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

Francisco Javier Carazo Gil comments:

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

Maybe you can parse HTML directly.