Since framework v2.0, Grid Mode is a feature we had always planned for but didn’t really have ironed out completely. In framework v2.3, this was something we finally put all the pieces together with.
So, what is grid mode? — If you’re familiar with our themes you know that you can display posts in various ways. However by default, all of your archives of posts (i.e. when you display posts by category, tag, etc) show in a standard blog format. Well, when you trigger Grid Mode, these post archives will automatically display in a grid.
How to Trigger Grid Mode
In order to really understand how this works, it’s important that you first understand how our framework handles template parts: Template Parts
Conceptually
Conceptually, triggering grid mode is actually pretty straight forward. When you change the archive template part to “grid” then the framework automatically will go into grid mode.
By viewing the the framework’s default template parts, you can see that the “archive” template part points to “list” by default. In other words, when your post archives are displayed, each post is displayed with the file content-list.php.
So by pointing the “archive” template part to “grid” and thus calling for content-grid.php to display each post, you’ll now be in a grid mode, which allows the framework to do a few other things in the background to make displaying a grid possible.
The Code
The most basic way to set this up would be just to filter the “archive” template part to “grid” from your child theme’s functions.php like this:
/**
* Use content-grid.php for all post archives and trigger
* grid mode.
*/
function my_template_parts( $parts ) {
$parts['archive'] = 'grid';
return $parts;
}
add_filter( 'themeblvd_template_parts', 'my_template_parts' );
The above code will tell WordPress archives to use content-grid.php, and the framework will automatically trigger grid mode to accommodate that.
Additional Ways to Trigger Grid Mode
Now that we’ve covered the most basic example, let’s outline some more ways you can potentially trigger grid mode for various reasons.
Using a separate file for archive grids
Maybe you don’t want your standard post grids to use the same template, content-grid.php, for displaying grids of your post archives. And so we’ve built another template part file ID that will trigger grid mode — “archive_grid”
To pull this off, we’ll use the same code as our basic example above, except for we’ll filter the template part ID to “archive_grid”.
/**
* Use content-archive_grid.php for archive posts and
* trigger grid mode.
*/
function my_template_parts( $parts ) {
$parts['archive'] = 'archive_grid';
return $parts;
}
add_filter( 'themeblvd_template_parts', 'my_template_parts' );
This means that we’re now pointing to a template part file, content-archive_grid.php. But remember that this file doesn’t exist by default, and so you need to create it in your child theme.
A good tip is to start by copying content-grid.php from your parent theme to your child theme. Then change its name to content-archive_grid.php and proceed with your edits.
Homepage posts
If you’re using your Theme Blvd theme for more of a classic blog website, you can use this approach for your homepage posts, as well.
Point your homepage posts to content-grid.php.
/**
* Use content-grid.php for homepage posts and trigger
* grid mode.
*/
function my_template_parts( $parts ) {
$parts['index'] = 'grid';
return $parts;
}
add_filter( 'themeblvd_template_parts', 'my_template_parts' );
Or, point your homepage posts to content-index_grid.php.
/**
* Use content-index_grid.php for homepage posts and
* trigger grid mode.
*/
function my_template_parts( $parts ) {
$parts['index'] = 'index_grid';
return $parts;
}
add_filter( 'themeblvd_template_parts', 'my_template_parts' );
Search results
And the same goes for displaying your search results. Point your search results to use content-grid.php.
/**
* Use content-grid.php for search results and trigger
* grid mode.
*/
function my_template_parts( $parts ) {
$parts['search_results'] = 'grid';
return $parts;
}
add_filter( 'themeblvd_template_parts', 'my_template_parts' );
Or, point your search results posts to content-search_grid.php.
/**
* Use content-search_grid.php for search results and
* trigger grid mode.
*/
function my_template_parts( $parts ) {
$parts['search_results'] = 'search_grid';
return $parts;
}
add_filter( 'themeblvd_template_parts', 'my_template_parts' );
Custom taxonomy archive with content-grid.php
Let’s say you have a custom taxonomy archive that you want to display in a grid, but you’d like to keep your standard post archives in the standard list format.
If you’re using our Theme Blvd Portfolios plugin, we’re actually doing this already, which you can see here on Github, as an example.
Basically, we can take the original code snippet given in this tutorial and just use basic WordPress conditional is_tax() before changing its template part.
/**
* Use content-grid.php for archives of my_taxonomy
* and trigger grid mode.
*/
function my_template_parts( $parts ) {
if ( is_tax( 'my_taxonomy' ) ) {
$parts['archive'] = 'grid';
}
return $parts;
}
add_filter( 'themeblvd_template_parts', 'my_template_parts' );
Custom taxonomy archive with custom template part file
The previous example is great if you don’t mind your custom taxonomy archive fitting into the default content-grid.php template. But what if you’d like a unique grid template for your taxonomy?
For example, let’s say we have a custom taxonomy we’ve registered called “my_taxonomy” and then we want to trigger grid mode, but use a unique template file content-my_taxonomy.php.
The first step is to do essentially what we’ve been doing all along; we need to filter the template part file ID.
/**
* Use content-my_taxonomy.php for archives of my_taxonomy.
*/
function my_template_parts( $parts ) {
if ( is_tax( 'my_taxonomy' ) ) {
$parts['archive'] = 'my_taxonomy';
}
return $parts;
}
add_filter( 'themeblvd_template_parts', 'my_template_parts' );
Since content-my_taxonomy.php is not anything recognized by the framework, it will not trigger grid mode. So we can do this manually like this.
/**
* Manually trigger grid mode.
*/
function my_theme_mode_override( $mode ) {
if( is_tax( 'my_taxonomy' ) ) {
$mode = 'grid';
}
return $mode;
}
add_filter( 'themeblvd_theme_mode_override', 'my_theme_mode_override' );
Putting it all together
If you’re looking at these examples above and you’re new to PHP, you may be in more of a blind copy/paste mode, but try to get out of that. Try to account for every line of code you copy from any tutorial into your work.
So, what if you want to combine several of the examples above? For example, maybe you want your homepage posts, archives, and search results to all display in a grid. There’s no need to have three separate filter functions for this.
For example, we could do something like this.
/**
* Change post archives, homepage posts, and search
* results to use content-grid.php and trigger
* grid mode.
*/
function my_template_parts( $parts ) {
$parts['archives'] = 'grid';
$parts['index'] = 'grid';
$parts['search_results'] = 'grid';
return $parts;
}
add_filter( 'themeblvd_template_parts', 'my_template_parts' );
Useful Tidbits
Rows, columns, and posts per page
As you dive into this and get into the details of everything, the issue of rows, columns, and total posts per page is something you’ll want to understand with your archive post grids.
By default, your archive grids are going to display in 3 columns by 4 rows, for a total of 12 posts per page. If you want to change this, you can do so with the following two filters.
For example, let’s change our archive grids to be 2 columns by 3 rows.
/**
* Adjust archive grid columns
*/
function my_default_grid_columns() {
return 2;
}
add_filter( 'themeblvd_default_grid_columns', 'my_default_grid_columns' );
/**
* Adjust archive grid rows
*/
function my_default_grid_rows() {
return 3;
}
add_filter( 'themeblvd_default_grid_rows', 'my_default_grid_rows' );
The total number of posts per page will be the product of the columns multiplied by the rows. In this case — 2×3=6.
Checking for grid mode
Within your custom code, if it ever comes up, there is a function themeblvd_is_grid_mode() that you can use to check if the framework is currently in grid mode or not. If in grid mode, this will return true.
if( themeblvd_is_grid_mode() ) {
// We're in grid mode, folks!
}