WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 2 months ago

#14102 closed enhancement (fixed)

Additional CSS class in wp_list_pages when a page has children

Reported by: Jonnyauk Owned by:
Milestone: 3.7 Priority: normal
Severity: normal Version: 3.0
Component: Formatting Keywords: has-patch
Focuses: Cc:

Description

A great addition to the wp_list_pages function would be to add an extra CSS class of 'page_has_children' (or similar) to a list item for when it has child pages.

This would enable theme authors to style the list items with CSS to differentiate between those pages that have child pages, and those that don't at whatever depth you are viewing in really simple CSS.

Here is how it could be implemented in the WP3.0 codebase. I have simply amended the 'start_el' function as shown below.

FILE: wp-includes/classes.php - from line 1173

/**
 * @see Walker::start_el()
 * @since 2.1.0
 *
 * @param string $output Passed by reference. Used to append additional content.
 * @param object $page Page data object.
 * @param int $depth Depth of page. Used for padding.
 * @param int $current_page Page ID.
 * @param array $args
 */
function start_el(&$output, $page, $depth, $args, $current_page) {
	if ( $depth )
		$indent = str_repeat("\t", $depth);
	else
		$indent = '';

	extract($args, EXTR_SKIP);
	$css_class = array('page_item', 'page-item-'.$page->ID);
	
	//JA ADDITION START 1 of 2 - DETECT IF PAGE HAS CHILDREN START
	$has_children = wp_list_pages('&child_of='.$page->ID.'&echo=0');
	//JA ADDITION END 1 of 2 - DETECT IF PAGE HAS CHILDREN
	
	if ( !empty($current_page) ) {
		$_current_page = get_page( $current_page );
		if ( isset($_current_page->ancestors) && in_array($page->ID, (array) $_current_page->ancestors) )
			$css_class[] = 'current_page_ancestor';
		if ( $page->ID == $current_page )
			$css_class[] = 'current_page_item';

		//JA ADDITION START 2 of 2 - DETECT IF PAGE HAS CHILDREN START
		if ( !empty($has_children) )
			$css_class[] = 'page_has_children';
		//JA ADDITION START 2 of 2 - DETECT IF PAGE HAS CHILDREN END

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

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

	$output .= $indent . '<li class="' . $css_class . '"><a href="' . get_page_link($page->ID) . '" title="' . esc_attr( wp_strip_all_tags( apply_filters( 'the_title', $page->post_title, $page->ID ) ) ) . '">' . $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);
	}
}

Attachments (1)

page_with_children.diff (550 bytes) - added by scribu 4 years ago.

Download all attachments as: .zip

Change History (7)

comment:1 Jonnyauk4 years ago

  • Type changed from feature request to enhancement

scribu4 years ago

comment:2 scribu4 years ago

  • Keywords has_patch added
  • Milestone changed from Awaiting Review to 3.1

Actually, you already have $has_children set. See patch

Related: #14041

comment:3 Jonnyauk4 years ago

Great - that makes it even neater! You can see how this would be useful for page menu styling with wp_list_pages - I'll look forward to using this in 3.1, thank you!

comment:4 sorich874 years ago

  • Keywords has-patch added; wp_list_pages has_patch removed

comment:5 nacin3 years ago

  • Milestone changed from 3.1 to Future Release

comment:6 johnbillion2 months ago

  • Milestone changed from Future Release to 3.7
  • Resolution set to fixed
  • Status changed from new to closed

Fixed in r25602 which adds the page_item_has_children class when walking pages in the Walker_Page class.

Note: See TracTickets for help on using tickets.