Loading...

Documentation Plugin

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]
  • 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 swiper hero

1200x900-dark

Just another post to demonstrate the swiper hero

1200x900-dark

Just another post to demonstrate the swiper hero

1200x900-dark

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

1200x900-dark

Just another post to demonstrate the swiper hero

1200x900-dark

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

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.

Load version on Github

  • [FEATURE] Disable excerpt, tags, and categories in shortcode #24
  • [IMPROVEMENT] Delete enqueued CSS file and add tags-heading-none class to hero 20cb295
  • [IMPROVEMENT] Switch to Vanilla JS #26

Load version on Github

  • [BUGFIX] Downgrade update checker v4 #23

Load version on Github

  • [BUGFIX] Hero tag badges #19
  • [IMPROVEMENT] Deny direct access #20
  • [UPDATE] Plugin update checker #21

Load version on Github

  • [FEATURE] Add composer.json #18

Load version on Github

  • [IMPROVEMENT] Replace PHP echo’s with shorthand b13ae8b

Load version on Github

  • [IMPROVEMENT] Loop cards #15

Load version on Github

  • [IMPROVEMENT] Removed data-bs-parent from Accordion #11
  • [NEW] Tabs template #13

Load version on Github

  • [NEW] Added accordion template

Load version on Github

  • [NEW] Added hero template
  • [IMPROVEMENT] Reformatted all php files

Load version on Github

  • [NEW] Added shortcode to show single items by id
  • [NEW] Added shortcode for custom post types by terms-slug
  • [REMOVED] Shortcode for CPT by parent terms id
  • [CHANGED] Template sc-grid.php
  • [CHANGED] Template sc-list.php

Load version on Github

  • [RENAMED] Changed repository and plugin name from “bS Post/Page Grid/List” to “bS Grid”
  • [CHANGED] Shortcodes
  • [NEW] Extended to Custom Post Types
  • [NEW] Included Plugin Update Checker

Load version on Github

  • [NEW] Override templates in child-theme

Load version on Github

  • Initial release

20 Comments on “bS Grid”

  • 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

      // 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

        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.

Comments are closed.

To top