Isotope and WordPress layout integration with custom post type

  • Resolved lettylou

    (@lettylou)


    4 years, 5 months ago

    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: 

    <?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>
  ...
</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(3),
.grid-item:nth-of-type(12) {
  // Add styles intended for .grid-item--width2
}
    Moderator bcworkz

    (@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).

    Thread Starter lettylou

    (@lettylou)

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Isotope and WordPress layout integration with custom post type’ is closed to new replies.