Displaying category links with ID number class

  • I’m attempting to style some category links with images in the css. I want to assign the category with a class of its own ID. I’ve found it done elsewhere but it was hardcoded and not ideal. I’ve tried tons of little hacks and stuff and it seems to be beyond my coding abilities. Any help would be greatly appreciated. Thanks!

    Here is what I currently have running in my loop.

    <?php printf( __( '<div id="cat_wrap"> %1$s %2$s', 'twentyten' ), get_the_category_list( ', ' ), '</div>' ); ?>

Viewing 1 replies (of 1 total)

  • Not used the code as is but I have used the meta part.

    This post was from another topic here,and you can add an image for each category.

    That looks like it will suit your requirements?

    Anyone else that wanted all categories then here is what I do for a colored menu and stylesheet swapper.

    I use it here for menu class colors per parent category and loading the colors stylesheet.

    Two parts to the function, first is to add the ancestor class as the function does not do ancestors only two levels, then there is the style class, I have one style block in the stylesheet for each color.

    I use a different storage method than the post above I use a serialized array, however the function returns a menu with a class style added bases on the category meta, you would need to adjust the category meta part for images.

    if ( ! function_exists( 'digimag_top_categories' ) ) :
function digimag_top_categories() {
	$list_args = 'sort_column=name&sort_order=asc&style=list&depth=0&hierarchical=true&title_li=0&hide_empty=1&echo=0';
	$catlist = wp_list_categories($list_args);
	global $cat_meta;

	if ( is_category() ) {
		//Get the active category id
		global $cat;
		$curr_cat = get_category($cat);
		$catid = $curr_cat->cat_ID;
		//Find the top level id and number of levels
		while ($catid){
			$curr_cat = get_category($catid);
			$catid = $curr_cat->category_parent;
			$id[] = $curr_cat->cat_ID;
		}
		//How many levels more than two set hierarchical ancestor?
		//Count from 1 array from 0 : 1:0=Current 2:1=Parent >2:1 all Ancestors
		if( count($id) > 2){
			$max=count($id)-1; //Array elements zero based = count - 1
			$extra_class='current-cat-ancestor';
			for ( $counter = 1; $counter <= $max; $counter ++) {
				$cat_ancestor_class = 'cat-item cat-item-'. $id[$counter];
				$amended_class = $cat_ancestor_class . ' ' . $extra_class;
				$catlist = str_replace($cat_ancestor_class, $amended_class, $catlist );
			}
		}
	}

	//Add a color class to the top level
	$categories = get_categories( array('depth'=>1, 'hide_empty'=>1,'order'=>'DESC' ) );
	foreach ($categories as $menu_cat) {
		$i=$menu_cat->cat_ID;
		$style=( isset( $cat_meta[$i]['style'] ) ) ? $cat_meta[$i]['style'] : "";                                    ;
		if( $style ) {
			/* Normal Category Menu Item */
			$cat_class = '"cat-item cat-item-' .$i .'"';
			$amended_class = '"cat-item cat-item-' .$i .' ' .$style .'"';
			$catlist = str_replace($cat_class, $amended_class, $catlist );
			/* Parent Category Menu Item */
			$cat_class = '"cat-item cat-item-' .$i .' current-cat-parent"';
			$amended_class = '"cat-item cat-item-' .$i .'  current-cat-parent ' .$style .'"';
			$catlist = str_replace($cat_class, $amended_class, $catlist );
			/* Ancestor Category Menu Item */
			$cat_class = '"cat-item cat-item-' .$i .' current-cat-ancestor"';
			$amended_class = '"cat-item cat-item-' .$i .'  current-cat-ancestor ' .$style .'"';
			$catlist = str_replace($cat_class, $amended_class, $catlist );
		}
	}
	$menu = str_replace( array( "\r", "\n", "\t" ), '', $catlist );
	echo $menu;
}
endif;

    The theme is a twenty ten based theme and I call the menu something like this:

    <div id="access" role="navigation">
	<div class="menu-header">
		<ul class="menu">
			<?php wp_nav_menu( array( 'container_class' => '','theme_location' => 'none','fallback_cb'=>'digimag_top_categories') ); ?>
		</ul>
	</div>
</div>

    Style.css classes to finish it off:

    #access-cat .blue li:hover,
#access-cat .blue li:hover > a,
#access-cat .blue ul ul :hover > a {
    background: #008194;
}

#access .red a:hover,
#access .red li:hover > a,
#access .red ul ul :hover > a {
    background: #D15949;
}

#access .purple a:hover,
#access .purple li:hover > a,
#access .purple ul ul :hover > a {
    background: #B56BC4;
}

    Good Luck!

    HTH

    David

Viewing 1 replies (of 1 total)
  • The topic ‘Displaying category links with ID number class’ is closed to new replies.