WordPress.org

1. demonboy
   Member
   Posted 1 year ago #

   I have a div whose background image changes according to my WordPress categories:

   div.cat-links a.cat-log {
   	background-position: 20px 5px;
   }
   
   div.cat-links a.cat-a day in the life {
   	background-position: -163px 5px;
   }

   The code for the image is being reproduced here:

   <div class="cat-links">
   <?php foreach((get_the_category()) as $category) {
   echo '<a rel="category-tag" href="'.get_category_link($category->cat_ID).'" class="cat-'.$category->cat_name.'">'.$category->cat_name.'</a>';
   						} ?>
   </div>

   In my example above it works for the first category, 'log', because it is a single word category. It doesn't work, however, for my category 'a day in the life'.

   I am aware of threads like this but I'm struggling to implement it and would appreciate some help with this. Thank you.

2. alchymyth
   The Sweeper
   Posted 1 year ago #

   div.cat-links a.cat-a day in the life
   won't work;

   don't use $category->cat_name;
   use $category->slug

   and then use:
   div.cat-links a.cat-a-day-in-the-life

3. demonboy
   Member
   Posted 1 year ago #

   Hi and thanks for your reply. I've changed the name of the slug to...

   adayinthelife

   ...just to make things a bit easier. I've changed the line as you suggested but it can't be working since the background position of the image does not correlate to the position I have given it. It is still at position 0 0, rather than -163 5.

   Here is the amended code as per your recommendation:

   <?php foreach((get_the_category()) as $category) {
      echo '<a rel="category-tag"href="'.get_category_link($category->cat_ID).'" class="cat-'.$category->slug.'">'.$category->slug.'</a>';
   } ?>

   Perhaps you could tell me where I'm going wrong? Thank you.

4. alchymyth
   The Sweeper
   Posted 1 year ago #

   css issues are difficult/impossible to judge without seeing the whole thing live:

   a link to your site might help to get more detailed replies.

   and by all means, keep using the category name for the visible part of the link(s):

   <?php foreach((get_the_category()) as $category) {
      echo '<a rel="category-tag" href="'.get_category_link($category->cat_ID).'" class="cat-'.$category->slug.'">'.$category->category_name.'</a>';
   } ?>

5. demonboy
   Member
   Posted 1 year ago #

   Unfortunately this is all on my local machine and there are too many calls to the database to put up live just yet. However I can point you to the code I am trying to replicate. Take a look at OMG Ubuntu, where the grey roll-over category icons are the called category references. Their CSS file is here.

6. demonboy
   Member
   Posted 1 year ago #

   OK, I solved it myself. The answer is this:

   <?php foreach( get_the_category() as $cat ) echo '<a rel="category" class="cat-' . $cat->slug . '" title="View all posts in ' . $cat->name . '" href="' . get_category_link($cat->term_id) . '">' . $cat->name . '</a>'; ?>

   Hope that helps.

Topic Closed

This topic has been closed to new replies.