adding tag icons

  • I am looking for suggestions on a plugin to tag all of the current document tags, and on the title line of post on all views add icons for the tags.

    I noticed this on slashdot the other day and thought it was something interesting to add some graphics to the content rather then just a line of highlighted text at the bottom.

    Two questions – has anyone done any work to make this happen? A plugin or theme to work from for the code?

    And secondly, has anyone done any reserch or given any thought on this to see if it helps readership in any way, or how people ract to it? Is it too much graphics? Do they expect to see that line of text?

Viewing 6 replies - 1 through 6 (of 6 total)

  • i’d definitely be interested in having tag icons. category icons are very popular, so why not tag icons? i use wordpress as a CMS and use a combination of categories and tags to organize my posts, so it would help vastly to have something simple and visual for my tags.

    any idea how to do this?

    Thread Starter storpappa

    (@storpappa)

    Bumping this because I am still looking for the answer myself.

    This works for me…

    After failing (for some reason) to get the file icon plugin to do my bidding, I used CSS to tag specific a tags. I added the fileicon class to the specific area in my template where I wanted this magic to occur. I guess I could have used a ‘little man’ icon for the author.

    Works pretty schweetlty with the_category(' and ',multiple)

    If you tweak this please let me know as I’m stumbling around in the dark.

    /* WaxLotus Categories Icons in PostMeta Area */
/* case-sensitive!  Use WP category stub value. */

.fileicon a {
	background-repeat:no-repeat;
	background-position:left;
	padding: 5px 0 0 20px; margin: 0 0 0 5px;
}

.fileicon a[href*="author"] {background-image:none; padding: 0; margin: 0;}
.fileicon a[href$="paddle/"] {background-image: url(../../../uploads/icons/silkicons/cat_paddle.png);}
.fileicon a[href$="daytrip/"] {background-image: url(../../../uploads/icons/silkicons/cat_day_trip.png);}
.fileicon a[href$="weekend/"] {background-image: url(../../../uploads/icons/silkicons/cat_weekend.png);}
    Thread Starter storpappa

    (@storpappa)

    I have tried doing this once before, and never get the actual images to load up, Do you have this working now? If so, can you share the code in the page that is calling the_tags

    Um, this is from my single.php…

    <p class="postmetadata alt fileicon">
					<small>
						<p>This entry is filed under:</p>
						<p><?php the_category(' and ',multiple) ?>.</p>

    etc.

    The output of the_category will be:
    blah/category/paddle/
    blah/category/daytrip/
    blah/category/weekend/

    The CSS rules will search for anchor tags where the href attribute ends in “paddle/” for e.g.

    I just had to change these rules to remove the / and swap the $ for *
    (search for “paddle” anywhere in the href…) as the script compression plugin I was using was causing core dumps the error log files were so huge… The compression script didn’t like the ‘/’ at all!

    In fact, I’m sure this hack is terrible. It’s only a few lines but it’s a lot of checking!

    .fileicon a[href*=”author”] {background-image:none; padding: 0; margin: 0;}
    .fileicon a[href*=”paddle”] {background-image: url(../../../uploads/icons/silkicons/cat_paddle.png);}
    .fileicon a[href*=”daytrip”] {background-image: url(../../../uploads/icons/silkicons/cat_day_trip.png);}
    .fileicon a[href*=”weekend”] {background-image: url(../

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘adding tag icons’ is closed to new replies.