Loading...

Documentation Plugin

bs Swiper

Registers and initializes swiper.js to show posts, child pages, custom post types or products in a 4 (desktop), 3 (large), 2 (medium) and 1 (mobile) column cards, a hero-slider or a hero-fader by shortcode and adds related posts to single posts.

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-swiper-* placeholder in shortcode examples.

  • bs-swiper-card shows items in 4 (xxl), 3 (lg), 2 (md) and 1 (sm) column cards.
  • bs-swiper-card-autoplay shows items in 4 (xxl), 3 (lg), 2 (md) and 1 (sm) column cards with autoplay.
  • bs-swiper-card-product shows WooCommerce products in 4 (xxl), 3 (lg), 2 (md) and 1 (sm) column cards.
  • bs-swiper-hero shows items in a hero-slider with auto-slide effect. Items must have a featured-image.
  • bs-swiper-hero-fade shows items in a hero-slider with auto-fade effect. Items must have a featured-image.

Swiper.js requires a minimum of one more element than is currently displayed to create an infinite loop. In the desktop view, ensure there are at least five elements. The provided example is broken as it contains only two items. Shrink your browser window to phone size view and product example will work as expected.

Posts

Posts by category

[bs-swiper-* 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
  • categories="false" – hide categories badges
  • excerpt="false" – hide excerpt
  • tags="false" – hide tags badges

Posts by tags

[bs-swiper-* 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
  • categories="false" – hide categories badges
  • excerpt="false" – hide excerpt
  • tags="false" – hide tags badges

Single-posts by id

[bs-swiper-* type="post" id="1, 15"]
Options
  • id="" – id of post, multiple ids separated by comma
  • categories="false" – hide categories badges
  • excerpt="false" – hide excerpt
  • tags="false" – hide tags badges

Pages

Child-pages by parent-page id

[bs-swiper-* type="page" post_parent="21" order="ASC" orderby="title" posts="6"]

Showing child-pages in parent-page is very useful to avoid empty parent-pages.

Options
  • post_parent="" – id of parent page
  • order="" – ASC or DESC
  • orderby="" – date, title, or rand
  • posts="" – amount of posts to show
  • excerpt="false" – hide excerpt

Single-pages by id

[bs-swiper-* type="page" id="2, 25"]
Options
  • id="" – id of page, multiple ids separated by comma
  • excerpt="false" – hide excerpt

Custom Post Types

Cpt by terms

[bs-swiper-* 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 custom post types to show
  • excerpt="false" – hide excerpt

Single cpt by id

[bs-swiper-* type="isotope" id="33, 31"]
Options
  • id="" – id of custom-post-type, multiple ids separated by comma
  • excerpt="false" – hide excerpt

WooCommerce Products

Shortcode to show products

[bs-swiper-card-product]
Options:
  • category="cars, boats" – Category slug, multiple categories separated by comma. Will pull products matching these categories (Default: '')
  • id="1, 2, 3" – id of product(s), multiple ids separated by comma. Will show products matching these ids (Default: '')
  • brand="brand1, brand2" – Will pull products matching these brands (Default: '')
  • posts="12" – Specify how many products will be shown (Default: -1)
  • orderby="date"date, title or rand. Specify how products will be ordered by (Default: date)
  • order="DESC" – Specify if products will be ordered ASC or DESC (Default: DESC)
  • featured="true" – Will pull featured products (Default: false)
  • outofstock="false" – Will hide out of stock products (Default: true)
  • onsale="true" – Will show only onsale products (Default: '')
  • showhidden="true" Shows products hidden from catalog (Default: false)

Related Posts

Demo, related posts are above the pagination.

Bootscore v5.3.1 added a hook to all single-*.php‘s:

<?php if (function_exists('bootscore_related_posts')) bootscore_related_posts(); ?>

bs Swiper hooks related posts there showing the latest 12 posts from the same category. This means that the category should have at least 4 posts to show the related posts correctly.

Related posts can be removed by adding a filter to child’s functions.php:

// Remove related posts
add_filter('bootscore_disable_related_posts', '__return_true');

Or by a single line of CSS:

.related-posts {
  display: none;
}

Overriding templates via theme

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

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

The copied file will now override the bs Swiper template file. Change cards, classes or HTML as you want.

Templates that can be overridden

  • related-posts.php
  • sc-swiper-card.php
  • sc-swiper-card-autoplay.php
  • sc-swiper-card-product.php
  • sc-swiper-hero.php
  • sc-swiper-hero-fade.php

Changelog

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

Load version on Github

  • [FEATURE] Attribute for handling OOS products #54

Load version on Github

  • [FEATURE] Added featured products attribute #49
  • [FEATURE] Added ability to disable excerpt, categories and tags badges #51
  • [BUGFIX] Product shortcode triggering error when category is empty #48

Load version on Github

  • [BUGFIX] Downgrade to update checker v4

Load version on Github

  • [IMPROVEMENT] Deny direct access #40
  • [BUGFIX] Tags badges in heroes e5399d6
  • [UPDATE] Plugin update checker 5.2 #41

Load version on Github

  • [FEATURE] Related posts template #31
  • [IMPROVEMENT] Change --bs-primary to --bs-link-color (Dark Mode) 5b3e48c
  • [BUGFIX] Undefined variable in sc-product.php #33

Load version on Github

  • [IMPROVEMENT] Replace PHP echo’s with shorthand fe02917
  • [IMPROVEMENT] Change bullet CSS variable to body color 80034ba

Load version on Github

  • [IMPROVEMENT] Loop cards #27

Load version on Github

  • [NEW] Add composer.json #19
  • [NEW] Add card autoplay template 3e45162
  • [UPDATE] Update Swiper 8.4.5 b6f61b7

Load version on Github

  • [IMPROVEMENT] Fix product star rating #15

Load version on Github

  • [UPDATE] Swiper 8.3.2

Load version on Github

  • [IMPROVEMENT] Reformat all files
  • [UPDATE] Swiper 8.2.5

Load version on Github

  • [UPDATE] Swiper 8.2.3

Load version on Github

  • [UPDATE] Swiper 8.1.1

Load version on Github

  • [UPDATE] Swiper 8.0.2

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-swiper-card.php
  • [CHANGED] Template sc-swiper-hero.php
  • [CHANGED] Template sc-swiper-hero-fade.php
  • [UPDATE] Swiper 7.3.4

Load version on Github

  • Update to Swiper 7.0.9
  • Added bg-dark to heroes

Load version on Github

  • Update to Swiper 7.0.4
  • Changed repository and plugin name

Load version on Github

  • Added new hero-fade template

Load version on Github

  • Removed source map in swiper-bundle.min.js

Load version on Github

  • Initial release

25 Comments on “bs Swiper”

  • Arun Kumar

    says:

    How to Change The Hero Swiper Hight I have tried to edit in hero-swiper template am unable to get what I need

    I need to make hero-swiper height 400 px only please help me

    • Basti

      says:

      Try this

      .heroes {
          height: 400px;
      }
      
      .swiper-hero-img {
          object-fit: cover;
          height: 100%;
      }
      
  • Arun Kumar

    says:

    Thank you so much for that code base and how to add an image overlay on swiper.

  • nfgngn cbnbcn

    says:

    Hi,
    when i add short code to page e.g
    [bs-swiper-card type="post" category="equal-height" order="DESC" orderby="date" posts="4"]
    nothing happens..?
    Is there something else i’m missing here?

    Thanks

    • Basti

      says:

      Do you use a category named “equal-height” on your site? Replace that with slug from your category.

  • nfgngn cbnbcn

    says:

    Oh, whoops!? Got it.
    Thanks

  • Andrew

    says:

    Hi,
    how do I find the ID of parent taxonomy? I have [bs-swiper-hero type="job_listing" tax="job_listing_category" cat_parent="39" order="DESC" orderby="date" posts="10"] 39 is the ID of the job listing page..

    Thanks

    • Basti

      says:

      You will find id when you edit taxonomy/category in backend in the URL. For example &tag_ID=116. In this case id is 116.

  • Andrew

    says:

    HI,
    [bs-swiper-hero type="post" category="test" order="DESC" orderby="date" posts="3"]

    Doesn’t work for me with 3 posts with the category of ‘test’ displays nothing…

    Why would this be? any ideas?

    Thanks

    • Basti

      says:

      Please share a link to the site with embed shortcode and a link to one of the posts in this category.

  • Andrew

    says:

    Hi,
    Sorry, working on this locally. Not sure what’s going on there.. the cards work no problem with products (using woocommerce) I thought the problem with the slider may be I’m using wp job manager that has seperate ‘categories’ (custom posts?) Job_listing_category job_listings so I tested it with wp regular categories and posts. Can’t get any of the shortcodes to work: child, custom post, page, post..any ideas? Thanks,
    Andrew

    • Basti

      says:

      We cannot help on local projects. Please transfer site to a live server.

  • Andrew

    says:

    OK, Sorry.
    freetowork.co.nz/front/
    [bs-swiper-hero type="job_listing" tax="job_listing_category" cat_parent="39" order="DESC" orderby="date" posts="3"]

    Not sure if I have the ‘type’ and ‘tax’ right here..?

    many thanks!

  • Andrew

    says:

    • Basti

      says:

      Please create an admin account and send user and password to store(at)bootscore.me

  • Andrew

    says:

    ok

    • Basti

      says:

      Your site is 403. Please make sure that everything is fine 😉

  • Andrew

    says:

    Sorry, was blocking Europe, I guess thats where you are?

    • Basti

      says:

      freetowork.co.nz/swiper-jobs/

      You should use card template. Heroes need a featured image to work and jobs plugin has no featured image.

  • Andrew

    says:

    Oh, o.k. bummer! Hey thanks a lot for checking it out. Much appreciated.
    Cheers

    • Basti

      says:

      You’re welcome 👍

  • Henry Sprogis

    says:

    Hello.
    Is it possible to change the item-count in view?
    4 in Desktop is too cluttered for me. Would gladly switch to 3.

    • Basti

      says:

      Hello Henry,

      you can change this in js/swiper-init.js https://github.com/bootscore/bs-swiper/blob/main/js/swiper-init.js. There you will find slidesPerView: 4,. Change this to 3.

      Important! If you edit the plugin files, make sure that you have disabled the update checker. Open plugin main.php and delete snippet in lines 12 to 18.

      // Update checker
      require 'update/update-checker.php';
      $myUpdateChecker = Puc_v4_Factory::buildUpdateChecker(
      	'https://bootscore.me/wp-content/plugins/bs-swiper-main/update/plugin.json',
      	__FILE__, //Full path to the main plugin file or functions.php.
      	'bs-swiper-main'
      );
      
  • Luke K

    says:

    Hey Basti,

    Thanks for creating Bootscore – I love it! It has saved me many hours.

    I have a problem though, I am trying to display products using the BS Swiper plugin and your shortcode [bs-swiper-card-product order="ASC" orderby="date" posts="24" category="products"]

    For some reason, nothing is being displayed when I use the shortcode. I setup a new WordPress installation and installed the latest Bootscore, Bootcommerce Child Theme & BS Swiper and still the sortcode does nothing.

    Is there anything obvious that might cause this?

    Thanks,
    Luke

    • Basti

      says:

      Hi Luke,

      thank you. Do you have a category named “products” on your site? Change this with your category slug.

Comments are closed.

To top