Support » Developing with WordPress » Isotope and WordPress layout integration with custom post type

  • Resolved lettylou


    I am trying to create a masonry layout using isotope with a custom post type I created. I have got the basics functioning, but would like to apply the additional grid-item classes to certain posts. I’m wondering if there is a way to call to a certain post number and apply the extra class to it within the structure needed for isotope to work.

    Here is the original php:

    		  $story = new Wp_Query(['post_type'=>'story']);
    			  if ($story->have_posts()) : while ($story->have_posts()) : $story->the_post(); ?>
    		<a class="grid-item <?php $categories = get_the_category(get_the_id());
    		  foreach ($categories as $category) {
    			  echo $category->slug.' ';
    		  }	?>" href="<?php the_permalink();?>">	  
    	<img src="<?php the_field('story_image'); ?>">
    		<h3><?php the_title(); ?></h3>
    		<?php the_content(); ?></a>
    <?php endwhile; endif; ?>

    The isotope layout I’m trying to mimic within the php code is would look something like this:

    <div class="grid">
      <div class="grid-item"></div>
      <div class="grid-item grid-item--width2"></div>
      <div class="grid-item"></div>
      <div class="grid-item grid-item--height2"></div>

    In other words, is there a way I can have the 3rd and 12th posts have the additional class of “grid-item–width2” and the 6th and 18th posts have the “grid-item–height2” class applied to the<a> tag?

    Let me know if you need additional clarification! Or perhaps there is a way through css that I can do this? Thanks so much for any help you can offer!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Hi.
    I dont know about isotope, but if it is just for fixed post order like 3rd and 12th posts, you can achieve with css only.

    .grid-item:nth-of-type(12) {
      // Add styles intended for .grid-item--width2
    Moderator bcworkz


    If you must have the classes in HTML, initialize a counter variable before the post while loop starts. Increment the counter at the end of the loop but still within it. Add a conditional structure which outputs the desired classes when the counter reaches 5 or 17 (assuming the counter was initialized to 0).



    Thanks everyone! I was able to address it with css using @ikaring’s method!

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.