Loading...

bs Grid

| 20 Comments on bs Grid

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.

Installation

  1. Download Plugin
  2. In your admin panel, go to Plugins > and click the Add New button.
  3. Click Upload Plugin and Choose File, then select the Plugin’s .zip file. Click Install Now.
  4. 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

1200x900-dark

Just another post to demonstrate the theme’s loop.

1200x900-dark

Just another post to demonstrate the theme’s loop.

1200x900-dark

Just another post to demonstrate the theme’s loop.

1200x900-dark

Just another post to demonstrate the theme’s loop.

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

1200x900-dark

Just another post to demonstrate the theme’s loop.

1200x900-dark

Just another post to demonstrate the theme’s loop.

Posts

Posts by category

[bs-* type="post" category="cars, boats" order="ASC" orderby="date" posts="6"]
Options
  • category="" category-slug, multiple categories separated by comma
  • order="" ASC or DESC
  • orderby="" date, title, or rand
  • posts="" amount of posts
Additional options bs-gridbs-list and bs-hero
  • excerpt="false" hide excerpt
  • tags="false" hide tags
  • categories="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 comma
  • order="" ASC or DESC
  • orderby="" date, title, or rand
  • posts="" amount of posts
Additional options bs-gridbs-list and bs-hero
  • excerpt="false" hide excerpt
  • tags="false" hide tags
  • categories="false" hide categories

Single posts by id

[bs-* type="post" id="1, 15"]
Options
  • id="" post id, multiple id’s separated by comma
  • order="" ASC or DESC
  • orderby="" date, title, or rand
Additional options bs-gridbs-list and bs-hero
  • excerpt="false" hide excerpt
  • tags="false" hide tags
  • categories="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 id
  • order="" ASC or DESC
  • orderby="" date, title, or rand
  • posts="" amount of pages
Additional options bs-gridbs-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 comma
  • order="" ASC or DESC
  • orderby="" date, title, or rand
Additional options bs-gridbs-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-type
  • tax="" taxonomy
  • terms="" terms-slug, multiple terms separated by comma
  • order="" ASC or DESC
  • orderby="" date, title, or rand
  • posts="" amount of custom-post-types
Additional options bs-gridbs-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 comma
  • order="" ASC or DESC
  • orderby="" date, title, or rand
Additional options bs-gridbs-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.2

Visit the Releases page for a detailed changelog. Previous versions can be downloaded from the Assets tab. Install/downgrade via the plugin uploader.