I want to have different sized previews for different kinds of work I've done. Say 100x100px for regular stuff, but 200x200px for a bigger project.

I figure I can use category to sort, and I know how to call that separately, but I don't want to list all the 'premium' stuff first and then the rest later. I want all works to appear (roughly) in the correct order, but with some projects at a larger scale. This would still call more attention to them, but a bit more playfully than clumping them all together.

enter image description here

Is there some way to add a CSS class to certain excerpts halfway through the loop? Maybe it's possible to filter by combining a CSS classes of the excerpt and the category? Can I do something with tags? Perhaps another solution I'm missing?

  • I would add it to the element that contains your project not the excerpt, if you don't have such an element then you will need one, especially if you try to use a js lib to arrange things to fit as described in your image above – Tom J Nowell Feb 15 '16 at 1:56
  • Yes I'm adding it in a container div. What I'm asking is how to add a CSS class to a excerpt, div, or anything really. I just need to be able to echo a simple string (my CSS class name) based on filtering the posts. As for the arrangement, it's not quite exactly like this, but I've already got a JS-less solution with a simple column-counter. I'd rather not rely on JS for what I'd consider pretty basic layout stuff. – PixelSnader Feb 20 '16 at 0:31

You're on the right path. You can add classes to your content in the loop based on the terms assigned to each piece of work. For example,

<?php if( has_term( $term, $taxonomy, $post ) ) { $work_classes = 'big-item'; } ?>
<div class="<?php echo $work_classes; ?>"> ... </div>

This only adds the class big-item when the taxonomy term exists on that post. To get has_ter to work, fill in $term with the slug, $taxonomy with the taxonomy slug, and $post with the post id or object.

More information: https://codex.wordpress.org/Function_Reference/has_term

  • Thanks. This got me towards in_category, which provided a workable solution: ||| <div class="thumbnail<?php if( in_category( 'promoted' ) ) { echo "doublesize" ;} else {echo "singlesize";}?> "> ||| However, I can't seem to get has_term to work in the same way. Do I have to declare the list of terms somewhere? – PixelSnader Feb 18 '16 at 12:59
  • You must specify the term and taxonomy. That's the big difference. If it's still not working, try specifying the post object or id as well. – MikeNGarrett Feb 19 '16 at 17:57
  • Oh I get it now. If I want to check for post with tag or category, I should <?php if has_term('promo', 'post_tag'){do stuff} ?> or <?php if has_term('promo', 'category'){do stuff} ?>. But why would I choose that over <?php if has_tag('promo'){do stuff} ?> or <?php if has_category('promo', 'tag'){do stuff} ?>? has_term just seems overly complex? – PixelSnader Feb 20 '16 at 0:26
  • You can definitely use has_category and has_tag they work in a similar manner, but assume the taxonomy name. Just remember, the second variable specified in those functions is the post object or id and not the taxonomy name. – MikeNGarrett Feb 20 '16 at 22:35
  • I'm only using the first variable anyway, don't need to check another post-ID, just the one currently in the loop. – PixelSnader Feb 20 '16 at 22:52

First off, let's assume each project has markup similar to this:

<div class="project">
.... excerpts and images etc...

I am assuming your 'project' is a custom post type called project but it may be that you've repurposed the standard post post type.

I recommend that you make use of the post_class() function, and make all items small. Then, add a tag or category to put all the 'big' items inside, and use that categories css class as provided by post_class()

For example, on my own website, my current latest post has these CSS classes auto generated via that function:

post-699 post type-post status-publish format-standard hentry category-maintenance tag-cli tag-export tag-import tag-importer tag-ssh tag-wordpress tag-wxr

The body_class() function also provides css classes for your body tag, which you can mix and match to apply rules only to single posts, or date archives, etc etc

Your Answer

