Motif theme grid layout

• 

  bswdd · Member · Jan 15, 2014 at 9:41 pm

  • Copy link
  • Add topic to favorites

  The page template for the grid layout seems to have a bug. It tries to create rows of 4 items but only 3 fit in the width. The problem becomes apparent when there are 8 or more items in the grid.

  I made a fix in my child theme. The official Motif theme could be fixed with the following change to the grid loop:

  $nr = 0;
  					while ( $child_pages->have_posts() ) : $child_pages->the_post();
  						echo ( 0 == $nr % 3 ) ? '</div><!-- .grid-row --><div class="grid-row">' : '';
  						$nr++;
  						get_template_part( 'content', 'grid' );
  					endwhile;
  					wp_reset_postdata();

• 

  timethief · Member · Jan 15, 2014 at 9:50 pm

  • Copy link

  What is the URL of your blog please?

• 

  bswdd · Member · Jan 15, 2014 at 10:02 pm

  • Copy link

  The blog is not public so I can’t show you. However another website illustrating the problem was mentioned in this thread: https://en.forums.wordpress.com/topic/motif-theme-grid-page-alignment?replies=1#post-1585393. If you select the 2013-year-in-review page and scroll down you can see the mis-aligned grid.

• 

  firemuseumyyc · Member · Jan 17, 2014 at 7:46 pm

  • Copy link

  Hi! I’m having the same issue with grid alignment. I’m new to wordpress – where do I insert this code? Where is the ‘grid loop?’

  Thanks!

  Shannon

• 

  bswdd · Member · Jan 17, 2014 at 8:24 pm

  • Copy link

  @firemuseumyyx Under page-templates there is a file called grid-page.php. The loop is in this file. Ideally you would create a child theme and replace it there.

  Hopefully the theme developers can take a look at this soon and fix the master theme code.

• 

  firemuseumyyc · Member · Jan 17, 2014 at 8:28 pm

  • Copy link

  Thanks!

• 

  firemuseumyyc · Member · Jan 17, 2014 at 8:29 pm

  • Copy link

  thanks!

• 

  kardotim · Member · Jan 19, 2014 at 11:58 am

  • Copy link

  Thanks for the report. The issue has been reported to our theme developers. I’ll contact you once I know more.

• 

  bswdd · Member · Jan 19, 2014 at 3:03 pm

  • Copy link

  The code snippet I posted will actually insert an empty blank row at the beginning so it’s not ideal. But this should give you the gist of the problem and solution.

• 

  bswdd · Member · Jan 19, 2014 at 3:05 pm

  • Copy link

  Not tested, but this probably works better:

  $nr = 0;
  while ( $child_pages->have_posts() ) : $child_pages->the_post();
  get_template_part( 'content', 'grid' );
  echo ( 0 == $nr % 3 ) ? '</div><!-- .grid-row --><div class="grid-row">' : '';
  $nr++;
  endwhile;
  wp_reset_postdata();

• 

  bswdd · Member · Jan 19, 2014 at 3:06 pm

  • Copy link

  Wish I could edit my post!

  This is what I meant to post above:

  $nr = 0;
  while ( $child_pages->have_posts() ) : $child_pages->the_post();
  get_template_part( 'content', 'grid' );
  $nr++;
  echo ( 0 == $nr % 3 ) ? '</div><!-- .grid-row --><div class="grid-row">' : '';
  endwhile;
  wp_reset_postdata();

• 

  kardotim · Member · Jan 20, 2014 at 8:24 am

  • Copy link

  Thanks! I’ll keep you updated.

• 

  frankklein · Member · Jan 21, 2014 at 11:44 am

  • Copy link

  Hi,

  I just pushed a fix for this issue, and the grids should now align properly.

  Thanks for letting me know about this problem, I hope that you continue to enjoy using Motif.

  Cheers!

• 

  bswdd · Member · Jan 21, 2014 at 1:50 pm

  • Copy link

  Thanks! However, the download version of the theme doesn’t seem to include the latest fixes.

• 

  frankklein · Member · Jan 21, 2014 at 8:59 pm

  • Copy link

  Thanks Bev for pointing that out!

  I’ve generated a new ZIP that contains all the fixes since the theme launch, so that self-hosted sites can benefit from these as well.

  Thanks again for your help in debugging this.

  Cheers!