Account
Cart

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

1200x900-dark

Post Demos 2

Demo Post 1

/ by Basti | Leave a Comment

Just another post to demonstrate the theme’s loop.

Read more »

1200x900-dark

Post Demos 2

Demo Post 2

/ by Basti | Leave a Comment

Just another post to demonstrate the theme’s loop.

Read more »

1200x900-dark

Post Demos 2

Demo Post 3

/ by Basti | 2 Comments on Demo Post 3

Just another post to demonstrate the theme’s loop.

Read more »

1200x900-dark

Post Demos 2

Demo Post 4

/ by Basti | Leave a Comment

Just another post to demonstrate the theme’s loop.

Read more »

List

1200x900-dark

Post Demos 2

Demo Post 1

/ by Basti | Leave a Comment

Just another post to demonstrate the theme’s loop.

Read more »

1200x900-dark

Post Demos 2

Demo Post 2

/ by Basti | Leave a Comment

Just another post to demonstrate the theme’s loop.

Read more »

1200x900-dark

Post Demos 2

Demo Post 3

/ by Basti | 2 Comments on Demo Post 3

Just another post to demonstrate the theme’s loop.

Read more »

1200x900-dark

Post Demos 2

Demo Post 4

/ by Basti | Leave a Comment

Just another post to demonstrate the theme’s loop.

Read more »

Hero

1200x900-dark

Post Demos 2

Demo Post 3

Just another post to demonstrate the theme’s loop.

Read more »

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-grid, bs-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-grid, bs-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-grid, bs-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-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 comma
  • order="" ASC or DESC
  • orderby="" 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-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-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 comma
  • order="" ASC or DESC
  • orderby="" 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

Block patterns

Added in 5.8

The plugin supports Accordion and Tabs patterns, making it easy to create in-page content. Select patterns directly in the page editor.

Accordion

This is the first item’s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the second item’s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the third item’s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Accordion flush

This is the first item’s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the second item’s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the third item’s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Tabs

This is some placeholder content the Home tab’s associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Profile tab’s associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Contact tab’s associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

Changelog

Currently bs Grid v5.8.0

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

20 Comments on “bs Grid”

  • Nicola Ramos

    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

      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

      // add new image sizes
add_image_size( 'slider', 950, 537, true );
add_image_size( 'cta', 755, 300, true );
add_image_size( 'post-teaser-single', 1535, 866, true );
add_image_size( 'post-teaser', 364, 273, true );
add_image_size( 'fb', 1200, 627, true );

// make the new size available in the media library
add_filter( 'image_size_names_choose', 'my_custom_sizes' );

      and replace ‘medium’ with for example ‘post-teaser’ in the .php file.

      It works fine in my case

      • Nicola Ramos

        Thanks!

  • David Gómez

    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

      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

        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

    Please tell me what is the template for this shortcode?
    [bs-post-grid type=”page” …………. ]
    Where can I edit it?

    • Basti

      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

    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

      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

    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

      Hi Andrey,

      it’s not planned now. Maybe later 😉

  • Bernd Dietrich

    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

      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

    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

      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

        Hi Bernd,
        solved and delete comments?

  • Gene Cowan

    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

      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

      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.

Comments are closed.

On this page