In my last post, I demonstrated how easy it is to install a community site from Reclaim Hosting’s template, and how to use the Gravity Form it comes with to start populating your community site with student, faculty, and staff work. I’ll return to Gravity Forms in a future post, and show how to modify the existing form a little bit.
Now, I’d like to take a step back and go into some detail about The Post Grid and how to configure this important WordPress plugin. It, along with some settings in the NEVE WordPress theme, will control a lot of the look and behavior of your community site.
If you’d just like to see how I’ve configured The Post Grid for Muhlenberg’s community site, you can skip to that section of this post.
Last week I really started working with the different components of the Community Site template. In addition to the WordPress installation, this template brings in:
The NEVE theme. I expect other themes that employ a masonry or grid approach could work well, and there are a ton of them out there. I’m sticking with the NEVE theme because it’s clean and it has some nice customization options. I may write a short post about this theme for my own memory dump or to aid other folks working with it. But for now I’ve kept my site mostly as it comes when installing the Reclaim Hosting template. I just changed the navigation menus a little bit.
The Gravity Forms plugin. This is used for submission of web sites to the community site and generating a WordPress post from the form. There is a lot that has been written about Gravity Forms elsewhere, so I’m not sure what information would be helpful here. I made small changes to the submission form as it exists when you initially install the community template. Specifically, I made the website author field optional instead of required. I want to really consider what to capture with this form, and I’ll carefully work through that later. For now, this is working great.
The Post Grid plugin. Not to be confused with the Post Grid plugin. When searching, put “The Post Grid” in quotes to help arrive at the right one. If there is no mention of Isotope in the plugin’s description, you have the wrong thing. The correct plugin comes pre-installed with the community template, so you may not need to locate this plugin at all. But if you’re trying to access the documentation, or if you would like to use this plugin on a different WordPress site, please know there are two similarly named plugins and “The Post Grid” is the one you’ll want.
For me, bringing Isotope so easily into WordPress is a real breakthrough! In a nutshell, Isotope is a reusable layout library that handles sorting, filtering, pagination, and light searching. As long as your projects are non-commercial and open-source, Isotope is openly and freely available. And it does stuff like this:
As I mentioned in a previous post, I used the Isotope library when I built a community site from scratch. Isotope makes it easy to do a bunch of stuff on a website with items that are presented as tiles. These items, in our case, are WordPress posts. These are the “posts” of The Post Grid. But the items could be thumbnails that link to merchandise, or to photographs in a photo gallery, or to real estate listings. There are so many occasions when we might want to display and arrange and especially sort different curated stuff.
So, imagine a bunch of tiles representing things, arranged in rows. These things are described within HTML tags or elsewhere by qualities or characteristics that can group them together, or split them apart.
<div class="animal feline tiger orange white black stripe" data-id="205"><img src="tiger.jpg" /></div> <div class="animal canine wolf white gray black solid" data-id="206"><img src="wolf.jpg" /></div> <div class="insect arachnid spider black brown" data-id="207"><img src="spider.jpg" /></div>
In my previous community site, I merged my muhlenberginstalls.json file with a hand-built google sheet containing a column for categories like blog, portfolio, and exhibit and another column for contributors (student, faculty, staff). PHP makes it possible to sort arrays and to decode and encode JSON, and then ultimately put stuff into files using the file_put_contents function. But it can be a lot of work to write the loops necessary to parse arrays, especially when you’re a crappy coder like me. Also, small syntax errors can break the whole thing, and humans aren’t great at avoiding typos and such.
The Post Grid makes this so simple I just want to grab a tambourine and shake it. By assigning categories to posts in WordPress, the classification becomes trivial, and there is very little possibility for human error. I mean, it’s just so easy and great.
The Post Grid gives me a graphical user interface for setting up Isotope just the way I want, and then establishing the categories that will sort my posts (in this case, websites included in the community). There is only one small downside to using The Post Grid as compared to my hand-built site. Previously, I built my community site to support multifaceted sorting. In other words, I could sort by the type of website featured (blog, portfolio, exhibit) AND by the type of contributor (student, staff, faculty).
First, I’m not sure my website visitors really care to interact with the community site in this way. I like sorting by faculty, staff, and student because I have a fairly specialized set of needs. But I don’t think multifaceted sorting is something most folks here need or want. I also think heavy customization of the underlying code might run counter to a broader desire to standardize and simplify the launching of community sites across DoOO institutions. Multifaceted sorting is not a high priority for me, and there are ways to do something acceptably similar that I’ll mention later.
So here is how I’ve configured The Post Grid to get pretty close to the same setup I had previously at https://community.bergbuilds.domains. I’ve manually added about a dozen sites as I work to understand things. I decided to purchase the pro version of The Post Grid as a lifetime license. It’s pretty affordable and I want to have all the supported features, but I think I could build a respectable community site that only uses the free version of the plugin. If you see configurations that don’t match your installation of the community site template, it’s likely because I’m using the paid version of the plugin.
My Configuration of The Post Grid
Here is what I see when I initially click on the The Post Grid option on the left of my WordPress dashboard. I only have one grid configured presently, and I’ve named it “websites selected grid”.
When I bring up the Short Code Generator for the specific grid I’ve built (which I’ve called “Websites Selected Grid”), I see five tabs: Query Build, Layout Settings, Settings, Field Selection, and Style. I’ll first just record how I have my site configured, and where things get interesting, I’ll talk a bit about the settings below.
Post Type = Post
Common Filters (leave all fields blank)
Advanced Filters = [X] taxonomy [X] categories
Category (leave blank)
Operator = IN
Order By = random
Order – Ascending
[ ] Author
[X] Status = Publish
[ ] Date range
Show Sticky Post = off
Here, I selected the Isotope layout and Isotope Layout 1
Isotope Filter = Categories
Isotope Filter (selected items) = Show All
Dropdown Filter = off
Isotope File Count # = on
Isotope Filter URL = on
Column = 4 | 4 | 1
Pagination = on
Display per page = 16
Link to detail page = on
Detail page link type = new page
Link target = new window
Not Found Text = [leave this blank]
Grid Style = even
Content will be visible for = [leave this blank]
Set a default preview image = see below
Shortcode heading = off
Position = default
Style = Style3 (but I’m not totally clear what this does)
Icon = off
Position = below image
Title tag = H4
Title Limit = [leave blank]
Title Limit Type = character
Position = default
Icon = off
Separator = default (which is a comma)
Hide Featured Image = off
Featured Image Size = large
Media Source = featured image
Type = normal
Hover animation = zoom in
Border radius = [leave blank]
Feature Image Size (small) = thumbnail
Read More Button
Border radius = 3
Alignment = center
Text = More
This determines what displays on each record’s tile. If you select a field, the label will display whether there is data contained in that field or not (one of my web development pet peeves!). For that reason, if a field is optional on my form (e.g., Author), I have chosen to not display it in the tile. I have selected the following fields by checking their checkboxes:
This tab permits the configuration of colors, padding, margins, and opacity for various aspects of The Post Grid’s Isotope grid without having to manually edit CSS. I chose custom styling for:
everything else I left the defaults untouched.
These settings all pertain to the particular grid I’ve built, again called “Websites Selected Grid”. It is possible to have different styling for different grids you create. For more information about the Style tab, I recommend visiting the plugin developer’s documentation, which in this case isn’t too bad.
Other Settings (don’t pertain to any particular grid)
There are other universal settings which can be found by clicking on the additional links within the The Post Grid submenu of the WordPress dashboard
Post Type: Post (the other option is Page)
Select Taxonomy: Categories (the other options are Tags or Status (i.e., Draft, Published).
Once these options are set, you can arrange the order of category buttons for this grid by dragging and dropping, exactly as you would menu items in WordPress. There is no “Save” button; changes are recorded automatically.
Next is a collection of universal The Post Grid settings that will apply to all grids you create. There are five tabs. The last, Plugin License, is where you enter your license key once the Pro version of The Post Grid has been purchased. I’ll focus on the other four tabs below.
PopUp Field Selection
I have these set to more or less conform to the Field Selection settings above. These will appear on the interstitial page that appears when you click on a post’s thumbnail. This Pop Up page will then take you on to the actual website featured in the Community Site. I would like there to be a way to
I left these blank. Checking a checkbox will display a social media icon (a font-awesome brand icon) for the corresponding social media platform.
Load Script Only Shortcode Page – I have this set to OFF, but I’ll confess I’m not entirely sure what this toggle is referencing, and the documentation doesn’t specify.
I have no idea what the rest of these options control, so please let me know in the comments of this post if you have any idea what they control or whatever. There are no layouts in these dropdowns by default, and I’m unclear where to build them so that they might display as selections.
Note: Unlike other areas of The Post Grid, you will need to click the Save Changes button when finished. I’ve found that changes I’ve set (in particular, turning off those Font Awesome icons) don’t stick around forever. For whatever reason, I sometimes have to go back into this area of The Post Grid’s settings and flip them off again.
A Few Departing Thoughts
So that is a full rundown of my current The Post Grid configurations for my community site. There are a few settings in this list that warrant some explanation. I marked them above with footnotes that link to the explanations below.
# order by = random – I really like the idea of randomizing the location of tiles on my community site, so as to not give preferential location to any one site. However, this also presents some usability challenges for any visitor who may want to reference something where it was during a previous visit. This is a longstanding usability tradeoff, but since student work is involved, I’ve decided to err in the direction of randomized content.
# Isotope Filter Count = on – this is, in my opinion, actually really useful information. There are parenthetic counts on the tab for each category that help me and hopefully other folks consider how may Travel & Languages sites there are, for example. I think this is important data for me as I assess the parts of my campus making use of Berg Builds, and I can imagine that this might be helpful information for students and faculty as they consider themselves and their work in relation to the broader Berg Builds community.
# column arrangement – I chose to have a 4 x 4 grid of tiles on my community site homepage. Column arrangement options, and masonry layouts, will permit you do mix things up. This might be something to explore if you are building an exhibit site, as opposed to a community site.
# pagination – this is a great improvement over my previous version of the Berg Builds community site. I expect we will have a few hundred sites or more selected by the time my next community site is fully launched. That’s a lot to navigate, and pagination with forward and backward directional links will really help folks browse and explore.
# grid style = even – again, I chose to have a regularized grid of content, but I can imagine other uses of the community site template that might want to explore changing this setting
# set a default preview image – I hope to eventually script-generate page thumbnails using NodeJS and a headless browser called Puppeteer. I have selected a default preview image in case these script-generated thumbnails fail, or on the chance that I forget to attach a manually produced thumbnail image when I complete the “Submit a Site” form. I think it a good practice to have a default preview image.
- If there is no data, don’t display the label, just insert a line break in the HTML
- Swap out the Font Awesome icons for ones I like better
- Make the interstitial (or Pop Up) page optional, or make it go away. I’d be happy if clicking on a post’s tile took you straight to the site.
As always, I’d love to hear if you are also exploring the Community Site template, The Post Grid, or anything else I’m covering in these posts. I’m happy to help if I can, and it would be great to know if others are working through these things, too.
2 thoughts on “Moving to a new community (part 4)”
Man I love the animation and slick style of the Post Grid, but I really wanted the ability to sort by multiple selectors, and I really wanted to be able to use the plugin with Full Site Editing so that the work I did on the front page would also apply to the archive pages, the search pages, and in all of those automatically created WordPress locations.
The Post Grid’s implementation of Isotope was precisely why I choose that as part of the template. Isotope.js is cool 😎