Motif theme grid layout

  • Author
    Posts
  • #1603586

    bswdd
    Member

    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();
    #1603691

    timethief
    Member

    What is the URL of your blog please?

    #1603696

    bswdd
    Member

    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.

    #1603869

    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

    #1603871

    bswdd
    Member

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

    #1603872

    Thanks!

    #1603873

    thanks!

    #1603885

    kardotim
    Member

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

    #1603886

    bswdd
    Member

    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.

    #1603887

    bswdd
    Member

    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();
    #1603888

    bswdd
    Member

    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();
    #1603891

    kardotim
    Member

    Thanks! I’ll keep you updated.

    #1603901

    frankklein
    Member

    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!

    #1603903

    bswdd
    Member

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

    #1603906

    frankklein
    Member

    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!

The topic ‘Motif theme grid layout’ is closed to new replies.