WordPress.org

1. luispunchy
   Member
   Posted 5 years ago #
   

   WordPress spits out lots of bloated markup for the Categories list. Specifically, by default, the categories template tag wp_list_categories() creates markup with list items for that category that each include CSS class names which I don't need - BUT I can't find how to stop them from being generated.

   Here's a quick example:

   <ul id="categories">
   <?php
   wp_list_categories('title_li='); ?>
   </ul>

   This then generates (generically) the following markup:

   <ul id="categories">
    <li class="cat-item cat-item-1"><a href="#">Category name</a></li>
    <li class="cat-item cat-item-2"><a href="#">Category name</a></li>
    ...
   </ul>

   As shown, I am using an ID on the containing UL, and therefore for my purposes I don't need those class attributes on the individual LIs. But WP just puts them in there anyway. This is not controlled by any Theme files, and I am searching through the widget.php template file for where this code bloat is generated but no luck.

   Any ideas where the Category list items' bloated markup / class attributes are coming from, and how I can modify that?

2. luispunchy
   Member
   Posted 5 years ago #
   

   I think I see those extraneous class attributes are being added in classes.php (under wp-includes). I am going to backup and edit that and see what happens...

   Meanwhile, a gripe / request / question on this issue:
   WHY does WordPress insert those extra class names in the first place? And wouldn't it be swell if the codex included just a small amount of documentation on how such markup is generated and where to go to edit it?

3. luispunchy
   Member
   Posted 5 years ago #
   

   talking to myself here ;) But to clarify, what I want ideally is for that wp_list_categories tag to instead just push out much slimmer markup without all the extra class attributes. Such as:

   <ul id="categories">
   <li><a href="#">Category name</a></li>
   <li><a href="#">Category name</a></li>
   ...
   </ul>

   I'm nitpicking here, but I like my code clean and without bloat... it should be that if you need classes or any attributes for that matter, the wp_list_categories tag will allow you to pass it arguments to get what you need in the output. Otherwise, it should just keep to the minimum markup... IMHO.

   Still looking for the suspect include template file / code that controls this...

4. luispunchy
   Member
   Posted 5 years ago #
   

   Took well over an hour, but here's the KLUDGEY HACK to get rid of that over-bloated markup generated by the wp_list_categories tag and related functions.

   The relevant code is in classes.php (under wp-includes).

   The original code, starting at line 635:
   

   if ( 'list' == $args['style'] ) {
   			$output .= "\t<li";
   			$class = 'cat-item cat-item-'.$category->term_id;
   			if ( $current_category && ($category->term_id == $current_category) )
   				$class .=  ' current-cat';
   			elseif ( $_current_category && ($category->term_id == $_current_category->parent) )
   				$class .=  ' current-cat-parent';
   			$output .=  ' class="'.$class.'"';
   			$output .= ">$link\n";
   		} else {
   			$output .= "\t$link<br />\n";
   		}
   
   		return $output;
   	}

   Updated to following:
   

   if ( 'list' == $args['style'] ) {
   			$output .= "\t<li";
   			if ( !( $current_category && ($category->term_id == $current_category) ) || !( $_current_category && ($category->term_id == $_current_category->parent) ) )
   			$output .= ">$link\n";
   			return $output;
   			} else {
   				if ( $current_category && ($category->term_id == $current_category) )
   				$class .=  ' current-cat';
   			elseif ( $_current_category && ($category->term_id == $_current_category->parent) )
   				$class .=  ' current-cat-parent';
   			$output .=  ' class="'.$class.'"';
   			$output .= ">$link\n";
   		} 
   
   		return $output;
   	}

   The end result being that by default, the list items are now generated WITHOUT the unnecessary class attributes. If you are on a Category page, then the 'selected' class attribute will be generated for that category's respective list item.

   I have tested on the index page and the markup is good. I'm still building the rest of the theme templates so I have tested whether those class attributes actually *WILL* show up on the category pages... TBD.

5. blocklevel
   Member
   Posted 5 years ago #
   

   Hi, strangely enough I'm using the classes that WP writes in to style the links differently for each category/section. It's proving useful, however that's not why I'm posting...

   Any ideas how I would insert a tabindex="0" at the beginning of each link to make them render tabbable in the default document flow?

   Cheers.

6. luispunchy
   Member
   Posted 5 years ago #
   

   Long time, but finally got back to this particular issue and confirmed that the "hack" noted above DOES NOT output the class="current-cat" attribute/value pair when rendered on category pages. If that is a desired result (was for me), then this won't work.

   I'm far from a php expert, so there's likely a correct way to get that desired result... if anybody knows, feel free to chime in (ask for clarification if needed, as well). Thanks!

   Meanwhile, I decided to "let it go" (not one of my strong points) and settle for "almost" - here's the revised hack. Starting at line 678 as of version 2.5:

   if ( 'list' == $args['style'] ) {
   			$output .= "\t<li";
   			if ( isset($current_category) && $current_category && ($category->term_id == $current_category) )
   				$class .=  ' current-cat';
   			elseif ( isset($_current_category) && $_current_category && ($category->term_id == $_current_category->parent) )
   				$class .=  ' current-cat-parent';
   			$output .=  ' class="'.$class.'"';
   			$output .= ">$link\n";
   		} else {
   			$output .= "\t$link\n";
   		}
   
   		return $output;
   	}

   This no longer generates the extraneous default class attribute/value pairs for the list items on all non-category pages - you do get an empty class attribute, however (that's why it's "almost" but not quite what I was aiming for). The rest of the logic is left as is, so the class="current-cat" attribute/value pair will still be rendered on category pages.

Topic Closed

This topic has been closed to new replies.