Make WordPress Core

Opened 12 years ago

Closed 12 years ago

Last modified 12 years ago

#18256 closed defect (bug) (invalid)

Close the current-cat li before the children

Reported by: betsyk's profile betsyk Owned by:
Milestone: Priority: normal
Severity: normal Version: 3.2.1
Component: Template Keywords:
Focuses: Cc:

Description (last modified by dd32)

In a hierarchical category list, children adopt the current-cat class from parents. This is due to the Walker_Category structure which nests <ul class='children'> inside the <li> of the parent list. The parent list should be closed before the child <ul> begins.

Let's say I have a list of categories:

<ul><?php wp_list_categories('style=list&hierarchical=1&depth=0'); ?></ul>

And I want to style the current category:

.current-cat {
background-color: #cccccc;
}

The HTML output is this:

<ul><li class="cat-item cat-item-21 current-cat"><a href="http://mysite/category/food/cookies">cookies</a>
<ul class='children'><li class="cat-item cat-item-107"><a href="http://mysite/category/food/cookies/oatmeal">oatmeal</a></li></ul></li></ul>

It should be this:

<ul><li class="cat-item cat-item-21 current-cat"><a href="http://mysite/category/food/cookies">cookies</a></li><ul class='children'><li class="cat-item cat-item-107"><a href="http://mysite/category/food/cookies/oatmeal">oatmeal</a></li></ul></ul>

Didn't see anything related in the open tickets - hopefully this isn't a duplicate bug report.

Attachments (1)

category-template-patch.php (38.5 KB) - added by betsyk 12 years ago.
changes are commented and prefixed with FIX

Download all attachments as: .zip

Change History (3)

@betsyk
12 years ago

changes are commented and prefixed with FIX

#1 @dd32
12 years ago

  • Description modified (diff)
  • Milestone Awaiting Review deleted
  • Resolution set to invalid
  • Status changed from new to closed
<ul>
  <li>
   has-children
  </li>
  <ul>
   <li> children..

like you suggest is invalid nested HTML.

The current form is the correct method for nested lists:

<ul>
 <li>
   has-children
   <ul>
     <li> children..

You can probably achieve what you want by having the child ul 100% width, and setting a padding on it instead of a margin, as a result, the background colour of the parent would be hidden behind the background colour of the child ul.

Closing as invalid due to the premise being the HTML is incorrect.

#2 @dd32
12 years ago

  • Component changed from General to Template
  • Description modified (diff)

just reverting that description change.. Didn't mean to add it to the final comment.

Note: See TracTickets for help on using tickets.