Different HTML structure for different post categories in the same loop?

I have something I want to try, but after some research I’m not sure where to start.

Let’s say I have a post category called Photos, for which each post should display an image in the loop, similar to this:

<div class="category-photos">
  <img src="feature-image-here"></img>
</div>

Also, in the same loop, I want to show posts from a category called “Trips”, which should each contain a headline element:

<div class="category-trips">
  <h2>The Title of the Post</h2>
</div>

I want these different structures to be presented in chronological order in the same loop, mixed together. However, posts from each category will require a different structure, with images for Photos and headlines for Trips.

Is there a way to do this with Wordpress Actions like The Loop or Show Posts - Smart? If not, is there a way to write a custom loop for my Wordpress theme in Pinegrow? I’m not confident in my ability to do the latter, but maybe I could cobble it together by creating two separate loops, then copying and pasting the code preview into a custom php if statement?

I’m open to any ideas.

Ha—I’ve been thinking and experimenting on this for weeks with no luck, and of course minutes after I posted the question I found a possible lead. There is a WP Conditional called IF In_category that seems to allow filtering the use of different HTML elements for posts in specific categories.

It’s late and I’ll have to stop for the night before I have it working right. In the meantime, if anyone knows of documentation for IF In_category or some other solution that might work, I would be very interested.

1 Like