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