Grid Skeleton Responsive with Wordpress

Question

Next I’m building a website that needs to show the posts with wordpress, however I’m using the Skeleton grid framework, it works as follows:

<div class="container">
    <div class="row">
       <div class="three columns"></div>
       <div class="three columns"></div>
       <div class="three columns"></div>
       <div class="three columns"></div>
    </div>
</div>

And so go....

But I’m having the following :

And the Problem:

Wordpress has the following scheme of giving display in the posts:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<?php endwhile?>

<?php else: ?>

<?php endif; ?>

How I adapt the grid system for every 4 posts to give a <div class="row"> at the beginning and a </div> at the end, to be responsive?

Current situation:

<div class="row">
    <div class="three columns">
        <article class="articlebox">
            <header class="articleheader">
                <h2 class="article_title">Teste Bananinha</h2>
            </header>
        </article>
    </div>
    <div class="three columns">
        <article class="articlebox">
            <header class="articleheader">
                <h2 class="article_title">Teste Bananinha</h2>
            </header>
        </article>
    </div>
    <div class="three columns">
        <article class="articlebox">
            <header class="articleheader">
                <h2 class="article_title">Teste Bananinha</h2>
            </header>
        </article>
    </div>
    <div class="three columns">
        <article class="articlebox">
            <header class="articleheader">
                <h2 class="article_title">Teste Bananinha</h2>
            </header>
        </article>
    </div>
</div>
<div class="row">
    <div class="three columns">
        <article class="articlebox">
            <header class="articleheader">
                <h2 class="article_title">Teste Bananinha</h2>
            </header>
        </article>
    </div>
    <div class="three columns">
        <article class="articlebox">
            <header class="articleheader">
                <h2 class="article_title">Teste Bananinha</h2>
            </header>
        </article>
    </div>
    <div class="three columns">
        <article class="articlebox">
            <header class="articleheader">
                <h2 class="article_title">Teste Bananinha</h2>
            </header>
        </article>
    </div>
    <div class="three columns">
        <article class="articlebox">
            <header class="articleheader">
                <h2 class="article_title">Teste Bananinha</h2>
            </header>
        </article>
    </div>
</div>

Answer 1

There are several ways to resolve this issue. Below are some of the ways I’ve used.

1. CSS:

Instead of using the framework in this situation you can use pure CSS. It would look something like this:

HTML (generated by Wordpress):

<div class=" posts container">
    <div class="three"></div>
    <div class="three"></div>
    <div class="three"></div>
    <div class="three"></div>
    <div class="three"></div>
    <div class="three"></div>
    <div class="three"></div>
    <div class="three"></div>
</div>

CSS:

.posts {
    width: 1280px;
}

.posts .three {
    width: 25%;
}

However, a few more lines of code would be required to correct possible layout mismatches.

2. PHP:

You can also use a function to include the necessary code in the loop, that was the way I did at first. I made an example function, just put it in funcions.php and call it on the page you want:

Function:

function add_row( $current, $end = false, $columns = 4 ) {
    $row = ( $current % $columns ) === 0 ? true : false;

    if( $row && ! $end ) {
        echo '<div class="row">';
    }
    if( $row && $end) {
        echo '</div>';
    }
}

Example of use:

if ( have_posts() ):
    $count = 1;
    while ( have_posts() ):
        add_row($count); // Imprimi a tag de abertura
        the_post();
        add_row($count, true); // Imprimi a tag de fechamento
        $count++;
    endwhile;
endif;

With this modification the loop will generate the HTML you expect.

3. Jeet:

Or you can use the Jeet which is a grids system, it makes creating css grids much easier and faster. But for this you will also need to use a Runner task like Grunt or Gulp and a CSS preprocessor like Less or Sass or Stylus. Interesting that taking a look at the documentation of Skeleton saw that they support Less and Sass, you can see this here. Using these combined tools* you would have code like this:

HTML:

Serious the same as the first example.

Sass:

@import 'jeet/index';

.container {
  .three {
    col(3/12)
  }
}

*The combination I like due to learning curve is Gulp + Sass + Jeet.