Use Grid layout on category pages

Hey Guilherme,

thank you for choosing Bento!

At the moment the grid layout is available for static pages only; we’re working to expand this functionality to archive templates such as native blog posts pages, WooCommerce shop page, as well as category, author, tag, and data archive pages, yet still need to solve several usability issues before we can make this new feature live. It’s planned for the version 1.7 at the moment, but before it’s part of the official Bento features it’s unfortunately outside of the scope of the theme support offer as defined by the www.remarpro.com guidelines. Thank you for understanding!

What I can advise is editing the “archive.php” theme template file by including the elements found in the “grid.php” template which currently is responsible for rendering static pages with “Grid” layout selected.

Sincerely,
Andrii / Satori Studio

Thank you, Andrii!

I’m also eager to display the a category page in grid or masonry style. Hope it will come soon !

I’m with these guys. I use static pages, so I create a “blog” page that displays my blog (obviously). However, because this is apparently an “archive” page, I can’t use the grid mode (I would much prefer to display the blogs as a grid than the very long and, personally, ugly list style. I look forward to this update! ??

It’s already version 1.7.3

Has it been implemented yet? Can’t find the option.

Hey Guilherme,

the grid version of the native archive page(s) is still in the making; thanks for understanding!

Sincerely,
Andrii / Satori Studio

Hi Bento-folks!
Thx for a fine free theme at the first impression. But i can’t get the Masonry-Grid Layout for posts on either “Blog-page” or “Category-pages” to work at all! I’ve followed your instructions in the “Bento Manuel” but this doesn’t work for me with posts in the actual version as you promised!
All posts are set as “Masonry”, but the blog-page is only showing a long ugly list!!
Can You tell me what to do?

Cheers, Madzzoni

Hey Madzzoni,

thanks for choosing Bento! At the moment the grid layout is currently available for static pages only – for more information, please refer to the first answer in the current thread. As a work-around for blog posts pages, take a look at recommendations in this thread.

Sincerely,
Andrii / Satori Studio

@satoristudio

I believe that combining “archive.php” & “content-grid.php” would definatly do the thing. So can you please tell us how to add “category-slug filter” Inside “content-grid.php” template.
Because Default Grid template is showing ALL Post. So how to limit it by perticlular category?
Please help us out.. All we need is You tell us which snippet we need to copy/edit from “content-grid.php”

Hey @hardikwp,

in order to be able to display certain categories on a Grid page, you’ll need to add taxonomy arguments to the custom WP_Query argument list contained in the bento_grid_query() function inside the theme’s functions.php file.

Hi, I’m trying to do just that and it isn’t working. I wanted to have a grid with general news in the front page and a grid with specific tagged posts on each page. I added taxonomy arguments to the bento_grid_query() on functions.php and still I cannot define the taxonomy filter for a given grid.

Hello @thaisweiller,

could you please paste the full WP_Query code you’re using? (there’s a “code” button in the text editor here, you can select the entire code after pasting it into the textarea a use that button to format the entire thing as code).

here

function bento_grid_query() {
	$post_id = get_queried_object_id();
	$bento_grid_query_args = array();
	$post_types = get_post_meta( $post_id, 'bento_page_content_types', true );
	$bento_grid_query_args['post_type'] = $post_types;
	$the_query = new WP_Query( $args );
	if ( $the_query->have_posts() ) {
	echo '<ul>';
	while ( $the_query->have_posts() ) {
		$the_query->the_post();
		echo '<li>' . get_the_title() . '</li>';
	}
	echo '</ul>';
	/* Restore original Post Data */
	wp_reset_postdata();
	} else {
		// no posts found
	}
	if ( is_front_page() ) {
		$bento_paged = ( get_query_var('page') ) ? get_query_var('page') : 1;
	} else {
		$bento_paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
	}
	$bento_grid_query_args['paged'] = $bento_paged;
	$bento_grid_number_items = get_post_meta( $post_id, 'bento_page_number_items', true );
	if ( ctype_digit($bento_grid_number_items) && ctype_digit($bento_grid_number_items) != 0 ) {
		$bento_grid_query_args['posts_per_page'] = (int)$bento_grid_number_items;
	} else {
		$bento_grid_query_args['posts_per_page'] = get_option('posts_per_page');	
	}
	return $bento_grid_query_args;
}

Thanks!
The bento_grid_query() function is used to return an array of arguments to be later used in custom WP_Query calls by other functions, it should not contain calls to WP_Query itself. Instead, you’ll need to retrieve the taxonomy (e.g. category or tag) parameters via page meta and then add those to the $bento_grid_query_args array.

Hey, that worked, thank you!