bS Grid

Plugin to show posts, pages or custom-post-types in grid / list cards, heroes, an accordion or tabs via shortcode. Showing child-pages inside a parent-page is very useful to avoid empty parent-pages. The parent-page thus serves as a kind of “category“ for child-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 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

Equal Height

Swiper Post 1

1. April 2018 / 26. January 2023 by Basti

Just another post to demonstrate the swiper hero

Read more »

Equal Height

Swiper Post 2

1. March 2018 / 26. January 2023 by Basti

Just another post to demonstrate the swiper hero

Read more »

Equal Height

Swiper Post 3

1. February 2018 / 26. January 2023 by Basti

Just another post to demonstrate the swiper hero

Read more »

Equal Height

Swiper Post 4

1. January 2018 / 26. January 2023 by Basti

Just another post to demonstrate the swiper hero

Read more »

List

Equal Height

Swiper Post 1

1. April 2018 / 26. January 2023 by Basti

Just another post to demonstrate the swiper hero

Read more »

Equal Height

Swiper Post 2

1. March 2018 / 26. January 2023 by Basti

Just another post to demonstrate the swiper hero

Read more »

Equal Height

Swiper Post 3

1. February 2018 / 26. January 2023 by Basti

Just another post to demonstrate the swiper hero

Read more »

Equal Height

Swiper Post 4

1. January 2018 / 26. January 2023 by Basti

Just another post to demonstrate the swiper hero

Read more »

Hero

5.2.1.0

Equal Height

Swiper Post 3

Just another post to demonstrate the swiper hero

Read more »

Accordion

5.2.2.0

Swiper Post 1

Just another post to demonstrate the swiper hero

Swiper Post 2

Just another post to demonstrate the swiper hero

Swiper Post 3

Just another post to demonstrate the swiper hero

Swiper Post 4

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

5.2.3.0

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 comma
• order: ASC or DESC
• orderby: date, title, or rand
• posts: amount of posts to show

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 to show

Single posts by id

[bs-* type="post" id="1, 15"]

Options

• id: id of post, multiple ids separated by comma

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: id of parent-page
• order: ASC or DESC
• orderby: date, title, or rand
• posts: amount of pages to show

Single pages by id

[bs-* type="page" id="2, 25"]

Options

• id: id of page, multiple ids separated by comma

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 to show

Single cpt by id

[bs-* type="isotope" id="33, 31"]

Options

• id: id of custom-post-type, multiple ids separated by comma

Overriding templates via theme

Template files can be found within the /bs-grid-main/templates/ plugin directory.

Edit files in an upgrade-safe way using overrides. Copy the template into a directory within your theme named /bs-grid-main/ keeping the same file structure but removing the /templates/ subdirectory. Path must be /your-theme/bs-grid-main/[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

Earlier versions can be downloaded via the Github repository. Install/downgrade via the plugin uploader.