Loading...

bS5 Post/Page Grid/List

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

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-post-grid type="post" category="documentation, category-default" order="ASC" orderby="title" posts="6"]

List

[bs-post-list type="post" category="sample-category" order="DESC" orderby="date"]

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-post-grid type="page" post_parent="413" order="ASC" orderby="title" posts="6"]

List

[bs-post-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

Overriding templates via theme

Template files can be found within the /bs5-post-page-grid-list/templates/ plugin directory.

Edit files in an upgrade-safe way using overrides. Copy the template into a directory within your theme named /bs5-post-page-grid-list keeping the same file structure but removing the /templates/ subdirectory. Path must be /your-theme/bs5-post-page-grid-list/[file].php.

The copied file will now override the bS5 Isotope template file. Change grid, classes or HTML as you want.

Templates that can be overwritten:

  • grid.php
  • list.php

8 Comments on “bS5 Post/Page Grid/List”

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

Leave a Comment

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