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 simply be hidden by removing the hook in your child’s single-*.php or by using a single line of CSS:

.related-posts {
  display: none;
}

Overriding templates via theme

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

Edit files in an upgrade-safe way using overrides. Copy the template into a directory within your theme named /bs-swiper-main/ keeping the same file structure but removing the /templates/ subdirectory. Path must be /your-theme/bs-swiper-main/[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.