Hello! I'm working on a newspaper-like theme for Beans. I'm starting to get the hang of things, but my PHP knowledge isn't great. How would I go about a varied grid where the posts are given different classes depending on which number they are in the sequence? I made a mockup to show what I want.
After the 3 first posts the layout could recycle with some alternation, but this isn't very important to begin with.
I understand that I should create some PHP function that counts the posts and gives them the appropriate UIKit-classes depending on their number.
Hi Olaf,
Here is a snippet which you can add to your child theme functions.php
add_action( 'wp', 'example_posts_grid' );
/**
* Display posts in a responsive grid.
*/
function example_posts_grid() {
// Only apply to non singular view.
if ( ! is_singular() ) {
// Add grid.
beans_wrap_inner_markup( 'beans_content', 'example_posts_grid', 'div', array(
'class' => 'uk-grid uk-grid-match',
'data-uk-grid-margin' => '',
) );
beans_wrap_markup( 'beans_post', 'example_post_grid_column', 'div' );
// Move the posts pagination after the new grid markup.
beans_modify_action_hook( 'beans_posts_pagination', 'example_posts_grid_after_markup' );
}
}
add_filter( 'example_post_grid_column_attributes', 'example_post_grid_column_attributes' );
/**
* Add post grid columns adaptive class.
*
* @param array $attributes Array of post grid column HTML attributes.
*
* @return array Array of post grid column HTML attributes.
*/
function example_post_grid_column_attributes( $attributes ) {
static $index = 0;
// Add space after current class if it exists.
$attributes['class'] = isset( $attributes['class'] ) ? $attributes['class'] . ' ' : null;
// Add adaptive grid class.
$columns = ( 0 === $index % 5 ) ? '2-3' : '1-3';
$attributes['class'] .= "uk-width-large-{$columns} uk-width-medium-1-2";
// Bump post index.
$index++;
return $attributes;
}The snippet above is inspired by this snippet. Instead of setting the uk-width-large-1-3 uk-width-medium-1-2 class to every post wrap, we use the {$markup_id}_attributes filter which is called for each post in the loop and add some logic so that the first and every multiple of 6th post take 2 columns.
Happy coding,
Hello, Thierry!
Thank you so much! I was convinced that I had to create a custom WP_query loop to get the result I wanted, but it seems like beans is much more powerful than I had thought!
Olaf
Thierry, Can you please point out where I can learn how to adapt this to set up the grid how I see fit?
An example would be using home php template- with the right side bar. the first post set as is - post two and three in a 2 column grid if it's an aside and quote post it's unaffected and is set as the default (1st post width. ) Also how about adding widget before forth and fifth post.
thanks
Hi Dee,
All the logic to apply the correct width on the post according to your needs (eg. if the post format is "aside") should be done in the example_post_grid_column_attributes() function above. In the snippet posted in my as reply, you see that the first and every multiple of 6th post are set to take 2 columns here -> $columns = ( 0 === $index % 5 ) ? '2-3' : '1-3'; which is where you may add additional logic to fit your needs.
Regarding adding widget, there is quite a level of complexity to that which I unfortunately don't have the time to write code for it.
Happy coding,