Different <li> class based off of category or tag in WordPress

1 Views

My goal is to have action icons in lists that correspond to how the list item is tagged or categorized.

For example, if I have a list item that is a webinar it should have a webinar icon next to it, the next item in the list might be a white paper, which should have a white paper icon next to it. The population of the icons should be controlled by how the list item is tagged or categorized.

Read More

I don’t know where to start; any suggestions are appreciated. Thanks!

EDIT:

Thought it might be helpful if I show the list I’m wanting to modify – technically, the items that I want to modify are in the span class=meta” section, but I’m open to using whatever method worls: 

    <ul class="sub_nav">
    <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active last">
        <a href="#resource_center" title="Resources II">
            Featured Resources
        </a>
    </li>
   </ul>

    <div id="resource_center">
    <?php
    $resources = get_posts("post_type=resource&posts_per_page=2&cat=31&tag=featured");
    ?>
    <?php foreach ($resources as $key => $resource): setup_postdata($resource); ?>
        <?php if ($key === 0): ?>

        <?php endif ?>

        <p><span class="meta"><?php echo apply_filters('get_the_date',mysql2date('m.d.Y', $resource->post_date), 'm.d.Y') ?></span> 
        <a href="<?php echo get_permalink($resource->ID) ?>"><?php echo $resource->post_title ?></a> &ndash; <?php echo strip_tags(get_the_excerpt()) ?></p>

    <?php endforeach; ?>

    <span class="more"><a href="/resources/">Read More</a></span>

</div>
Post Views: 1

Related posts

Leave a Reply

3 comments

  1. Just name all your icons after the tags they correspond to and put them in the same folder on your server (let’s say http://www.yoursite.com/tagicons)

    In your loop, just iterate the meta tag inside an image tag

    <img src="http://www.yoursite.com/tagicons/{$tag}.png" />

    Paste the code you’re using to iterate your list items if you need more help.

    Cheers
    -D

    EDIT:

    I se you’re using wordpress.

    Refer to http://codex.wordpress.org/Function_Reference/wp_get_post_tags
    to see how to get the tags you’re looking for.

  2. If you are generating the list inside the WordPress loop you can add the category as a class to the list element. For example:

    ...loop started
$categories = get_the_category();
$ids = '';
foreach ($categories as $category) {
    $ids .= ' ' . $category->slug;
}
echo '<li class="' .  $ids '">This item</li>';
...more loop

    Then utilize CSS to style the list block.

  3. While I think both of these solutions would have worked, I decided to go with a third solution I discovered as I researched options to meet my use case. This one was ideal because I was able to seamlessly fit it into my existing code structure and because I have a relatively low number of resources that I need to add the featured image to.

    I added the code below, which basically uses the post’s featured image as a left-aligned thumbnail.

         <?php if ( has_post_thumbnail()): ?>

        <?php
        $thumb_id = get_post_thumbnail_id($resource->id);
        $args = array(
        'p' => $thumb_id,
        'post_type' => 'attachment'
        );
        $thumb_image = get_posts($args);
        $thumb_caption = $thumb_image->post_excerpt;
        ?>
        <?php if (!empty($thumb_caption)): ?>
    <div class="caption"><?php echo $thumb_caption ?></div>
        <?php endif ?>

        <?php the_post_thumbnail('sidebar-thumb'); ?>

<?php endif; ?>

    Followed by this code snipped to grab the image and put it by the list item:

    <?php echo get_the_post_thumbnail($id, 'thumbnail', array()); ?>

    Here’s a screen shot of my test site list section after I added the code – it’s exactly what I was looking for:

    enter image description here

    Thanks for the suggestions and help, it got me moving in the right direction!