Support » Themes and Templates » First element in a list: class=”cat-item-first”

  • Resolved baudesign


    Hi everyone,

    I would like to add a class to the first item in a list, in my sidebar, like so:

    <li class="cat-item cat-item-first cat-item-4">
    <li class="cat-item cat-item-5">

    This class definition comes from the “classes.php” file, but I do not want to change anything in the wordpress core files. I would like to make this change in my theme directory, and I do not know how.

    Thanks for any tip about how to do this.


Viewing 8 replies - 1 through 8 (of 8 total)
  • This is not enough information. Where is this list coming from? You are creating it manually? It is the output of wp_list_categories? Some other function?

    This list is automatically generated by WP. It lists the categories of you blog in the sidebar. And the classes are automatically applied by WP, they come from the classes.php file in the wp-includes folder.

    Some code pasted here:

    if ( 'list' == $args['style'] ) {
    			$output .= "\t<li";
    			$class = 'cat-item cat-item-'.$category->term_id;
    			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<br />\n";

    I am no PHP programmer, but I have a good idea of what it can be done, and I suppose that you could create a function that would say…

    if li is the first element in the list, then apply cat-item-first class on top of cat-item and cat-item-[X], where X is a number.

    But again, I do not want to modify the classes.php file. I use thematic framework. I would like to add this function in the function.php file.




    So do a preg_replace on whatever it is you’re outputting?..

    Are you using the walker class specifically for something, or simply using a function that utilises code from the walker class? As stvwlf said above, are you calling a particular function, such as wp_list_categories?…

    More details would help, please..

    You might be making this more complicated than it needs to be.

    The typical way category lists are displayed in WP is through a call to wp_list_categories() in a theme template file, setting the parameters in wp_list_categories to whatever you need.

    If your theme is using (or can be set up to use) wp_list_categories, you can accomplish what you want by placing the output of the function in a PHP variable, then do a str_replace on the output, changing the first occurrence of
    '<li class="cat-item ' to
    '<li class="cat-item cat-item-first'

    My point exactly, it really depends what baudesign is trying to do, and with what..


    Hi – sorry, for some reason I didn’t see your reply when I answered this earlier. I basically said what you had already said…

    Thanks to Chris over at Thematic Support, the solution to my question was:

    function add_markup($output) {
        return preg_replace('/cat-item/', 'cat-item cat-item-first', $output, 1);
    add_filter('wp_list_categories', 'add_markup');

    Thanks to all of you guys who looked at my question, stvwlf, t31os_



    i had the same probleme, then i found a function in a thread, but it did not work, so i rewrote it and is works pretty well,

    i’m shure it could be imporved by comdining both regex into one, but still, it works pretty good

    it will ad a first and a last class to the li

    function add_last_class($input) {
    	if( !empty($input) ) {
    		$pattern = '/<li class="/is';
    		$replacement = '<li class="first ';
    		$input = preg_replace($pattern, $replacement, $input);
    		$pattern = '/<li class="(?!.*<li class=")/is';
    		$replacement = '<li class="last ';
    		$input = preg_replace($pattern, $replacement, $input);
    		echo $input;
    /* the echo=0 parma is important here */

    hope it helps

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘First element in a list: class=”cat-item-first”’ is closed to new replies.