Need help? Check out our Support site, then


Motif theme grid layout

  1. 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();
  2. What is the URL of your blog please?

  3. The blog is not public so I can't show you. However another website illustrating the problem was mentioned in this thread: http://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.

  4. 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

  5. @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.

  6. Thanks!

  7. thanks!

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

  9. 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.

  10. 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();
  11. 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();
  12. Thanks! I'll keep you updated.

  13. 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!

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

  15. 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!

Topic Closed

This topic has been closed to new replies.

About this Topic