Loading...

bS Grid

This plugin displays WordPress posts from category, child-pages from parent page id or custom post types in your post, page or widget via shortcode. Live preview

bS Grid replaces the former bS5 Post/Page Grid/List. It can now show custom post types. If you want to update, uninstall old plugin first before uploading the new one. Change existing shortcodes to new ones.

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.

There are two different types of presentation:

  1. Grid, displays the content as a card grid
  2. List, shows the content as horizontal cards and flips to vertical cards on smaller screens

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

Posts

Use a shortcode to display posts.

Grid 

[bs-grid type="post" category="documentation, category-default" order="ASC" orderby="date" posts="6"]

List

[bs-list type="post" category="documentation, category-default" order="DESC" orderby="date" posts="6"]

Options:

  • category: category slug – multiple categories separated by commas
  • order: ASC or DESC
  • orderby: date, title or rand
  • posts: number of posts to display

Pages

Use a shortcode to display child pages.

Grid

[bs-grid type="page" post_parent="413" order="ASC" orderby="title" posts="6"]

List

[bs-list type="page" post_parent="413" order="DESC" orderby="date"]

Options:

  • post_parent: ID of parent page
  • order: ASC or DESC
  • orderby: date, title or rand
  • posts: number of pages to display

Custom Post Types

Use a shortcode to show custom post types.

Grid

[bs-grid type="isotope" tax="isotope_category" cat_parent="111" order="DESC" orderby="date" posts="5"]

List

[bs-list type="isotope" tax="isotope_category" cat_parent="111" order="DESC" orderby="date" posts="5"]

Options

  • type: type of custom post type
  • tax: taxonomy of custom post type
  • cat_parent: ID of parent taxonomy
  • orderby: date, title or rand
  • posts: number of pages to display

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 columns, classes or HTML as you want.

Templates that can be overwritten:

  • sc-grid.php
  • sc-list.php

17 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

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

Leave a Comment

Cookies help us deliver our services. By using our services, you agree to our use of cookies. More Information