I'm currently creating a wordpress theme and so far all my code is working fine (my theme is based on the isotope js gallery), but I would like to transform my normal grids into masonry grids, could you help me?

Here's my code:

    <?php
/**
 *  gallery isotope
 *
 */
 ?> 
<div class="isotopewrapper customprimary">  

<div id="filters" class="button-group"> 
  <button class="gallery-button btn from-top" data-filter="*">All</button>
  <?php 
      $terms = get_terms("rt-ga-cat"); 
      $count = count($terms); 
      if ( $count > 0 ){ 
        foreach ( $terms as $term ) { 
        $termname = strtolower($term->name);
      $termname = str_replace(' ','-', $termname);
        echo "<button class=\"gallery-button\" data-filter='.".$termname."'>" . $term->name . "</button>\n";
        } 
    }    
  ?>
</div>

<div class="grid <?php 
if ($gap == 'yes') { 
  echo 'gap';
}?>">

<?php
$args = array( 'post_type' => 'rt-gaf', 'posts_per_page' => $limit, 
'order' => $order, 'gap' => $gap,
'columns' => $columns );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();

$terms = get_the_terms( $post, 'rt-ga-cat' );                       
  if ( $terms && ! is_wp_error( $terms ) ) : 
    $items = array();
      foreach ( $terms as $term ) {
        $items[] = $term->name;
      }
      $taxonomy_items = join( " ", str_replace(' ', '-', $items));          
      $taxonomy_items = strtolower($taxonomy_items);
      else :    
        $taxonomy_items = NULL;                 
      endif; 
?>
<div class="element-item 
    <?php 
    if ($columns == 1) { 
      echo 'element-item1 ';
    }
    elseif ($columns == 2) { 
      echo 'element-item2 ';
    }
    elseif ($columns == 3) { 
    echo 'element-item3 ';
    }
    else { 
    echo 'element-item2 ';
    }
    echo esc_attr( strtolower($taxonomy_items) );?>">

      <figure id="richart">
        <?php 
        echo the_post_thumbnail();
        ?> 
        <figcaption class="overlay">
          <div class="text">
            <h2><?php echo the_title(); ?></h2>
          </div>
          <a class="imagepopup" href="<?php the_post_thumbnail_url();?>"></a>
        </figcaption> 
      </figure>

          <p>
            <?php echo the_excerpt(); ?>
          </p>

    </div> 

    <?php endwhile; wp_reset_postdata(); ?>

  </div> 
</div>

I'm currently creating a wordpress theme and so far all my code is working fine (my theme is based on the isotope js gallery), but I would like to transform my normal grids into masonry grids, could you help me?

Here's my code:

    <?php
/**
 *  gallery isotope
 *
 */
 ?> 
<div class="isotopewrapper customprimary">  

<div id="filters" class="button-group"> 
  <button class="gallery-button btn from-top" data-filter="*">All</button>
  <?php 
      $terms = get_terms("rt-ga-cat"); 
      $count = count($terms); 
      if ( $count > 0 ){ 
        foreach ( $terms as $term ) { 
        $termname = strtolower($term->name);
      $termname = str_replace(' ','-', $termname);
        echo "<button class=\"gallery-button\" data-filter='.".$termname."'>" . $term->name . "</button>\n";
        } 
    }    
  ?>
</div>

<div class="grid <?php 
if ($gap == 'yes') { 
  echo 'gap';
}?>">

<?php
$args = array( 'post_type' => 'rt-gaf', 'posts_per_page' => $limit, 
'order' => $order, 'gap' => $gap,
'columns' => $columns );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();

$terms = get_the_terms( $post, 'rt-ga-cat' );                       
  if ( $terms && ! is_wp_error( $terms ) ) : 
    $items = array();
      foreach ( $terms as $term ) {
        $items[] = $term->name;
      }
      $taxonomy_items = join( " ", str_replace(' ', '-', $items));          
      $taxonomy_items = strtolower($taxonomy_items);
      else :    
        $taxonomy_items = NULL;                 
      endif; 
?>
<div class="element-item 
    <?php 
    if ($columns == 1) { 
      echo 'element-item1 ';
    }
    elseif ($columns == 2) { 
      echo 'element-item2 ';
    }
    elseif ($columns == 3) { 
    echo 'element-item3 ';
    }
    else { 
    echo 'element-item2 ';
    }
    echo esc_attr( strtolower($taxonomy_items) );?>">

      <figure id="richart">
        <?php 
        echo the_post_thumbnail();
        ?> 
        <figcaption class="overlay">
          <div class="text">
            <h2><?php echo the_title(); ?></h2>
          </div>
          <a class="imagepopup" href="<?php the_post_thumbnail_url();?>"></a>
        </figcaption> 
      </figure>

          <p>
            <?php echo the_excerpt(); ?>
          </p>

    </div> 

    <?php endwhile; wp_reset_postdata(); ?>

  </div> 
</div>

• wp-query
• javascript
• masonry

1 Answer 1

This is not really a Wordpress issue, you will have to play around with the CSS to get the layout you desire, if you take a look at isotope.js library you will see that hey have documentation on how to display Masonry grid https://isotope.metafizzy.co/layout-modes/masonry.html , and if that doesn't fit your needs you can learn more about Flexbox and do it yourself with some custom classes. https://developer.mozilla/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container