[resolved] First element in a list: class="cat-item-first" (9 posts)

  1. baudesign
    Posted 6 years ago #

    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.


  2. stvwlf
    Posted 6 years ago #

    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?

  3. baudesign
    Posted 6 years ago #

    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.




  4. Mark / t31os

    Posted 6 years ago #

    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..

  5. stvwlf
    Posted 6 years ago #

    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'

  6. Mark / t31os

    Posted 6 years ago #

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

  7. stvwlf
    Posted 6 years ago #


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

  8. baudesign
    Posted 6 years ago #

    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_


  9. stakabo
    Posted 6 years ago #


    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

Topic Closed

This topic has been closed to new replies.

About this Topic