Plugin showcases posts, pages, or custom post types in grid/list cards, heroes, accordions, or tabs via shortcode. Useful for organizing child pages within parent pages.
Contents
Installation
- Download Plugin
- In your admin panel, go to Plugins > and click the Add New button.
- Click Upload Plugin and Choose File, then select the Plugin’s .zip file. Click Install Now.
- Click Activate to use your new Plugin right away.
Usage
Select template you want to use by replacing bs-*
placeholder in shortcode examples.
[bs-grid]
bs-grid
shows items in 4 (xxl), 3 (lg), 2 (md) and 1 (sm) column cards.bs-list
shows items in 1 column vertical cards (md) and flip into 1 column horizontal cards (lg).bs-hero
shows hero items with background-images. Good to create “Featured Posts”.bs-accordion
shows items with full content in a Bootstrap accordion. Good to create “FAQ”.bs-tabs
shows items with full content in Bootstrap tabs.
Grid
List
Hero
Accordion
Just another post to demonstrate the swiper hero
Just another post to demonstrate the swiper hero
Just another post to demonstrate the swiper hero
Just another post to demonstrate the swiper hero
Add following snippet to your child’s custom.js
inside the jQuery(function ($) {
… });
wrapper if first accordion item always stay open:
$('.accordion .accordion-item:first-child .accordion-button').removeClass('collapsed');
$('.accordion .accordion-item:first-child .accordion-collapse').addClass('show');
Use following snippet to make accordion items stay open when another item is opened.
$('.accordion-collapse').removeAttr('data-bs-parent');
Tabs
Just another post to demonstrate the swiper hero
Just another post to demonstrate the swiper hero
Posts
Posts by category
[bs-* type="post" category="cars, boats" order="ASC" orderby="date" posts="6"]
Options
category=""
category-slug, multiple categories separated by commaorder=""
ASC or DESCorderby=""
date, title, or randposts=""
amount of posts
Additional options bs-grid
, bs-list
and bs-hero
excerpt="false"
hide excerpttags="false"
hide tagscategories="false"
hide categories
Posts by tags
[bs-* type="post" tax="post_tag" terms="bikes, motorbikes" order="DESC" orderby="date" posts="5"]
Options
tax=""
taxonomy (post_tag)terms=""
tags-slug, multiple terms separated by commaorder=""
ASC or DESCorderby=""
date, title, or randposts=""
amount of posts
Additional options bs-grid
, bs-list
and bs-hero
excerpt="false"
hide excerpttags="false"
hide tagscategories="false"
hide categories
Single posts by id
[bs-* type="post" id="1, 15"]
Options
id=""
post id, multiple id’s separated by commaorder=""
ASC or DESCorderby=""
date, title, or rand
Additional options bs-grid
, bs-list
and bs-hero
excerpt="false"
hide excerpttags="false"
hide tagscategories="false"
hide categories
Pages
Child-pages by parent-page id
Showing child-pages in parent-page is very useful to avoid empty parent-pages.
[bs-* type="page" post_parent="21" order="ASC" orderby="title" posts="6"]
Options
post_parent=""
parent-page idorder=""
ASC or DESCorderby=""
date, title, or randposts=""
amount of pages
Additional options bs-grid
, bs-list
and bs-hero
excerpt="false"
hide excerpt
Single pages by id
[bs-* type="page" id="2, 25"]
Options
id=""
page id, multiple id’s separated by commaorder=""
ASC or DESCorderby=""
date, title, or rand
Additional options bs-grid
, bs-list
and bs-hero
excerpt="false"
hide excerpt
Custom Post Types
Cpt by terms
[bs-* type="isotope" tax="isotope_category" terms="dogs, cats" order="DESC" orderby="date" posts="5"]
Options:
type=""
type of custom-post-typetax=""
taxonomyterms=""
terms-slug, multiple terms separated by commaorder=""
ASC or DESCorderby=""
date, title, or randposts=""
amount of custom-post-types
Additional options bs-grid
, bs-list
and bs-hero
excerpt="false"
hide excerpt
Single cpt by id
[bs-* type="isotope" id="33, 31"]
Options
id=""
id of custom-post-type, multiple id’s separated by commaorder=""
ASC or DESCorderby=""
date, title, or rand
Additional options bs-grid
, bs-list
and bs-hero
excerpt="false"
hide excerpt
Filters
Add filters to child’s functions.php
.
Grid
Change the grid template columns:
/**
* Change bs Grid column class
*/
function change_bs_grid_columns($class) {
return 'col-6 col-lg-4';
}
add_filter('bootscore/bs-grid/class/col', 'change_bs_grid_columns');
Overriding templates via theme
Template files can be found within the /bs-grid/templates/
plugin directory.
Edit files in an upgrade-safe way using overrides. Copy the template into a directory within your theme named bs-grid
keeping the same file structure but removing the templates
subdirectory. Path must be your-theme/bs-grid/[file].php
.
The copied file will now override the bS Grid template file. Change cards, classes or HTML as you want.
Templates that can be overridden
sc-grid.php
sc-list.php
sc-hero.php
sc-accordion.php
sc-tabs.php
Changelog
Currently bs Grid v5.7.1
Visit the Releases page for a detailed changelog. Previous versions can be downloaded from the Assets tab. Install/downgrade via the plugin uploader.
Nicola Ramos
says:Hey, I’m trying to change de thumbnail size on the post grid list, but it’s not working
I tried changing the default size at the wordpress media settings but nothing happend, so i tried changing the list. php file but that also didn’t work.
I tried to change the get_the_post_thumbnail(null, ‘medium’) to get_the_post_thumbnail(null, ‘thumbnail’) and get_the_post_thumbnail(null, array(200,200))
<?php if (has_post_thumbnail() )
echo '’ . get_the_post_thumbnail(null, ‘medium’) . ”;
?>
Can you help me changing it?
Basti
says:Hello Nicola,
you can edit the sizes in the .php files by changing default ‘medium’ to ‘thumbnail’, ‘large’ or ‘full’.
Default WordPress image size settings for them can be changed in Backend > Settings > Media.
If you want more custom sizes you can use function like this
and replace ‘medium’ with for example ‘post-teaser’ in the .php file.
It works fine in my case
Nicola Ramos
says:Thanks!
David Gómez
says:Hi Basti! Hope you’re good. I wanted to ask if you can explain to me a way to exclude posts from a certain category on the post list. I want to create a post list with the posts from category “news” but also want to exclude the posts from that category that are also categorized as “highlight”, since those posts are already been showed in a different section of the page.
Appreciate your efforts and thank you in advance.
Cheers!
David
Basti
says:Hi David,
this cannot be done in a clean way, because plugin catches posts by category which is set in shortcode. Is post in two categories like news and highlights, of course, plugin will show highlights as well because post is in category news too.
In this edge case I think I will do that with JavaScript. For example searching for word “highlights“ in the category bagde and if contains, then hide the card or add a class to it and hide it via CSS. Ask Google for that, you will find examples on Stackoverflow like here https://stackoverflow.com/questions/27144518/hide-a-div-only-if-it-contains-some-specific-words/27144591
This code must be placed only on this page. You can use Gutenberg HTML block for that (hmm), create an own page template and paste code in this (better) or wrap JS in a function and assign it only to this page by id (good). Check example how to wrap JS in function here https://bootscore.me/documentation/scrollspy-onepager/
However, this is just a idea to solve that in a quick and rough way. Much better and sustainable it will be if it‘s possible to separate both categories and combine them in a parent category again.
Example category structure
All News
– News
– Highlights
Now you can create 3 shortcodes: all-news will show posts of all news and highlights, news only news and highlights only highlights.
Just an idea…
Cheers Basti
David Gómez
says:Amazing answer Basti. Thank you so much for your kind attitude and help. I think the cleanest way is the latter you proposed, I have the necessary skills to approach any of the solutions provided, but that one seems to be the simpler and better in terms of functionality.
Cheers! And keep pounding, your job is great!!!
David
Ara Voskan
says:Please tell me what is the template for this shortcode?
[bs-post-grid type=”page” …………. ]
Where can I edit it?
Basti
says:Plugin folder templates/grid.php. Edit as described above in the article by creating folder “bs5-post-page-grid-list” in child and paste grid.php direct in this folder.
Arun Kumar
says:Hi, Basti I like Very Much Bootscore Theme Thanx For making this,
How to add pagination to this plugin (bS5 Post/Page Grid/List) am Unable to see in the shortcode for pagination to enable
please help me am very thankful to you basti
Basti
says:Hi Arun,
there is no pagination in this plugin. It’s just if you want to show some posts or pages somewhere else. You can set number if items in shortcode.
If you want to use paginated posts, you must set a menu-link in backend to a category. 24 items are displayed by default.
Andrey
says:Hi Basti, awesome work with this plugin. Have you considered a button ‘SHOW MORE’ that uses jQuery and loads dynamically more posts on the grid, eg. the next two lines of six/eight posts ? Cheers!
Basti
says:Hi Andrey,
it’s not planned now. Maybe later 😉
Bernd Dietrich
says:Hi Basti, I habe found a problem, if I use this plugin more than one time in an Installation. For example, if I want show Posts to different categories on different sides. The first cards are shown correctly. But starting at different numbers of cards the witdth of cards will be larger. The cards now are placed only in one column, the sidebar is placed under the last card.
A part of generated source code shows that suddenly the card text gets a stronger tag and som div are not closed.
I have some screenshots to show that more in detail.
The effect isalso visible if I use the original template files.
Thanks.
Bernd Dietrich
Basti
says:Hi Bernd,
I need a link to your site to check. At first glance it looks like there are missing close tags. But it can be that this tags are missing in your content above or below the cards as well. Try to set up a page and insert only the plugin shortcodes from the broken page.
Basti
Bernd Dietrich
says:Hi Basti, many thanks for your pompt reaction. Following you I had a look on to my data. There are missing closing tags in in some excerpt an content fields, resulting from my programs for the data transfer from Contao to WordPress. Up to nowI hadn’t seen any consequences in other listings.
But I have made some sdditional tests. I have two identical blocks on a side. The described problems only occure, for order “DESC”.
Tomorrow I will provide you access to my systems.
By Bernd.
Bernd Dietrich
says:Hi Basti, at the end of the day it is a problem of my data inconsistencies. You and the plugin had helped me to find the problem. If it is possible I want to withdraw my comments.
Many thanks.
Bernd
Basti
says:Hi Bernd,
solved and delete comments?
Gene Cowan
says:Is there any way to use more than one post types or taxonomies in the short code, the same way multiple categories are supported?
Basti
says:Hi Gene,
it’s not possible to show multiple post types in the same grid. Multiple taxonomies not yet, but this seems to be a logical function. We’ll try to add this feature in next update.
Basti
says:Hi Gene,
plugin has been updated to 5.2.0.0. You can use now multiple terms in shortcode for custom post types by slug.