Integrates swiper.js for customizable card layouts, hero sliders, and related posts, optimizing display across devices via shortcode.
Installation
- Download Plugin
- In your admin panel, go to Plugins > and click the Add New button.
- Click Upload Plugin and Choose File, then select the Plugin’s .zip file. Click Install Now.
- 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.
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 commaorder=""
– ASC or DESCorderby=""
– date, title, or randposts=""
– amount of posts to showcategories="false"
– hide categories badgesexcerpt="false"
– hide excerpttags="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 commaorder=""
– ASC or DESCorderby=""
– date, title, or randposts=""
– amount of posts to showcategories="false"
– hide categories badgesexcerpt="false"
– hide excerpttags="false"
– hide tags badges
Single-posts by id
[bs-swiper-* type="post" id="1, 15"]
Options
id=""
– id of post, multiple ids separated by commacategories="false"
– hide categories badgesexcerpt="false"
– hide excerpttags="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 pageorder=""
– ASC or DESCorderby=""
– date, title, or randposts=""
– amount of posts to showexcerpt="false"
– hide excerpt
Single-pages by id
[bs-swiper-* type="page" id="2, 25"]
Options
id=""
– id of page, multiple ids separated by commaexcerpt="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-typetax=""
– taxonomyterms=""
– terms-slug, multiple terms separated by commaorder=""
– ASC or DESCorderby=""
– date, title, or randposts=""
– amount custom post types to showexcerpt="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 commaexcerpt="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
orrand
. Specify how products will be ordered by (Default:date
)order="DESC"
– Specify if products will be orderedASC
orDESC
(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.
Filters
Add filters to child’s functions.php
.
Change heading ‘You might also like’:
/**
* Change related posts heading
*/
function change_related_posts_heading($title) {
return 'Also very interesting...';
}
add_filter('bootscore/bs-swiper/related-posts/heading', 'change_related_posts_heading');
Remove related posts:
/**
* Disable related posts
*/
add_filter('bootscore_disable_related_posts', '__return_true');
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
Currently bs Swiper v5.8.8
Visit the Releases page for a detailed changelog. Previous versions can be downloaded from the Assets tab. Install/downgrade via the plugin uploader.
Arun Kumar
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
Try this
Arun Kumar
Thank you so much for that code base and how to add an image overlay on swiper.
nfgngn cbnbcn
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
Do you use a category named “equal-height” on your site? Replace that with slug from your category.
nfgngn cbnbcn
Oh, whoops!? Got it.
Thanks
Andrew
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
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
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
Please share a link to the site with embed shortcode and a link to one of the posts in this category.
Andrew
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
We cannot help on local projects. Please transfer site to a live server.
Andrew
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
Basti
Please create an admin account and send user and password to store(at)bootscore.me
Andrew
ok
Basti
Your site is 403. Please make sure that everything is fine 😉
Andrew
Sorry, was blocking Europe, I guess thats where you are?
Basti
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
Oh, o.k. bummer! Hey thanks a lot for checking it out. Much appreciated.
Cheers
Basti
You’re welcome 👍
Henry Sprogis
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
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 findslidesPerView: 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 lines12
to18
.Luke K
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
Hi Luke,
thank you. Do you have a category named “products” on your site? Change this with your category slug.