I am trying to make a custom grid for my Wordpress posts. I have been searching the web however all the tutorials I have found utilize a column method where it just alternates between the columns. For what I am doing that would be impossible I need it to actually count off six thumbnails and then return a line and do it again. Does anyone know of a good tutorial/example of this(It can't be a plugin.)? All answers much appreciated. The code below is what I have so war without it wrapping the lines.
$categories = get_categories('child_of=2');
foreach ($categories as $category) {
//Display the sub category information using $category values like $category->cat_name
echo '<h2>'.$category->name.'</h2>';
foreach (get_posts('cat='.$category->term_id) as $post) {
echo '<li class="item">';
setup_postdata( $post );
$custom = get_field('face');
echo wp_get_attachment_image($custom);
echo '<div class="name">';
$custom = get_field('fullname');
echo $custom;
echo '</div>';
echo '</li>';
REVISED TO POST BELLOW:
I am trying to make a custom grid for my Wordpress posts. I have been searching the web however all the tutorials I have found utilize a column method where it just alternates between the columns. For what I am doing that would be impossible I need it to actually count off six thumbnails and then return a line and do it again. Does anyone know of a good tutorial/example of this(It can't be a plugin.)? All answers much appreciated. The code below is what I have so war without it wrapping the lines.
$categories = get_categories('child_of=2');
foreach ($categories as $category) {
//Display the sub category information using $category values like $category->cat_name
echo '<h2>'.$category->name.'</h2>';
foreach (get_posts('cat='.$category->term_id) as $post) {
echo '<li class="item">';
setup_postdata( $post );
$custom = get_field('face');
echo wp_get_attachment_image($custom);
echo '<div class="name">';
$custom = get_field('fullname');
echo $custom;
echo '</div>';
echo '</li>';
REVISED TO POST BELLOW:
This isn't really a Wordpress related question, and you can get your desired result by a simple PHP loop:
$i = 1;
foreach ($array as $var) {
if ($i==7) {
// six items already displayed.
// Do whatever you want here
// now restart the count
$i = 1;
}
// display your thumbs or whatever
// increment $i
$i++
}
This is going to be somewhat lengthy. And I'm inclined to call the issue off-topic in the first place, since you have the WP-specific part figured out already.
But since I have a decent grid lying around and my football club just played well, here you are:
div.grid-row {
width: 100%;
max-width: 1140px; // adjust to your liking
margin: 0 auto;
overflow: hidden;
}
div.column,
div.splitcol {
margin-right: 3.8%;
float: left;
min-height: 1px;
}
div.column {
width: 30.75%;
}
.ie div.column { // width for IE (I use modernizr)
width: 30.6%;
}
div.splitcol {
width: 43.8%;
margin-right: 12.35%;
}
div.last {
margin-right: 0;
}
/* collapse columns at some threshold */
@media handheld, only screen and (max-width: 799px) { // adjust to your liking
div.column {
width: auto;
float: none;
margin-right: 0;
overflow: hidden;
}
}
/* further collapse splitcols at some threshold */
@media handheld, only screen and (max-width: 479px) { // adjust to your liking
div.splitcol {
width: auto;
float: none;
margin-right: 0;
overflow: hidden;
}
}
$categories = get_categories( 'child_of=2' );
foreach ( $categories as $category ) {
echo '<div class="grid-row"><h2>'.$category->name.'</h2></div>';
$cat_posts = get_posts( 'cat='.$category->term_id );
$end = count( $cat_posts ) - 1;
$i = 0;
foreach ( $cat_posts as $post ) {
setup_postdata( $post );
$face = get_field( 'face' );
$name = get_field( 'fullname' );
if ( $i % 6 === 0 ) {
echo '<div class="grid-row">';
}
if ( $i % 2 === 0 ) {
echo '<div class="column';
if ( $i % 6 === 4 ) {
echo ' last';
}
echo '">';
}
echo '<div class="splitcol';
if ( $i % 2 === 1 ) {
echo ' last';
}
echo '">';
echo wp_get_attachment_image($face)
. '<div class="name">'.$name.'</div>';
echo '</div>';
if ( $i % 2 === 1 ) {
echo '</div>';
}
if ( $i % 6 === 5 ) {
echo '</div>';
}
if ( $i === $end && $i % 6 !== 5 ) {
echo '</div>';
if ( $i % 2 !== 1 ) {
echo '</div>';
}
}
$i++;
}
}
As foreseen, turned out quite lengthy. The CSS however is adjusted to your requirement of 6 columns. In case you care to dive into it, here is the CSS of the grid I currently use in production in its entirety.
Further you could consider:
column-count and column-gap (related article)