Skip to content
A Swiper Shortcode for Wordpress
Branch: master
Clone or download
Rafael Nowrotek
Rafael Nowrotek Fix include doesn't apply
Latest commit e2e1205 Mar 31, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
bin Add template feature and gallery thumbnails Mar 30, 2019
dist Fix it up, scotty Mar 31, 2019
templates Fix it up, scotty Mar 31, 2019
test/fixtures/themes Add template feature and gallery thumbnails Mar 30, 2019
.eslintignore Update dev stack and gallery shortcode Jan 29, 2018
.eslintrc.js Update dev stack and gallery shortcode Jan 29, 2018
.gitignore Add template feature and gallery thumbnails Mar 30, 2019
README.md Update build Mar 5, 2019
composer.json Fix include doesn't apply Mar 31, 2019
composer.lock Fix include doesn't apply Mar 31, 2019
docker-compose.yml Add template feature and gallery thumbnails Mar 30, 2019
package-lock.json Fix include doesn't apply Mar 31, 2019
package.json Fix include doesn't apply Mar 31, 2019
swiper-shortcode-caption.php Update dev stack and gallery shortcode Jan 29, 2018
swiper-shortcode-gallery.php Fix include doesn't apply Mar 31, 2019
swiper-shortcode-helpers.php Add template feature and gallery thumbnails Mar 30, 2019
swiper-shortcode-slide.php
swiper-shortcode.css Fix it up, scotty Mar 31, 2019
swiper-shortcode.js Update build Mar 5, 2019
swiper-shortcode.php Fix include doesn't apply Mar 31, 2019
webpack.config.js Update dependencies and setup Mar 5, 2019

README.md

wp-swiper-shortcode

Swiper integration for Wordpress

Usage

Place inside post content

[swiper autoplay=3000]
  [swiper_slide]
    Slide 1
  [/swiper_slide]
  [swiper_slide]
    Slide 2
  [/swiper_slide]
[/swiper]

Embed in a template

Use output buffering in order to embed in a php-template

<?php ob_start('do_shortcode'); ?>
[swiper autoplay=3000]
  [swiper_slide]
    Slide 1
  [/swiper_slide]
  [swiper_slide]
    Slide 2
  [/swiper_slide]
[/swiper]
<?php ob_end_flush(); ?>

Attributes

Customize the default behaviour by using the shortcode_atts_swiper-filter

<?php
function custom_shortcode_atts_swiper($out, $pairs, $atts, $shortcode) {
  return array_merge($out, array(
    # Custom attributes
    'id' => 'swiper-' . uniqid(),
    'class' => '',
    'before' => '',
    'before_content' => '',
    'after' => '',
    'after_content' => '<div class="swiper-pagination"></div>'
      . '<div class="swiper-button-next"></div>'
      . '<div class="swiper-button-prev"></div>'
      . '<div class="swiper-scrollbar"></div>',
    # Swiper options
    'pagination' => array(
      'el' => '.swiper-pagination',
      'clickable' =>  true
    ),
    'navigation' => array(
      'next_el' => '.swiper-button-next',
      'prev_el' => '.swiper-button-prev'
    ),
    'scrollbar' => false,
    'loop' => true
  ), $atts);
}
add_filter( 'shortcode_atts_swiper', 'custom_shortcode_atts_swiper' );
?>

Recipes

Featured Galleries Integration

If you like to show a swiper-driven gallery instead of a single featured image, the recommended approach is as follows.

Download, install and activate Featured Galleries Wordpress Plugin.

Paste the following code into your theme's function.php:

/**
 * Render featured galleries as post thumbnail
 */
function featured_galleries_post_thumbnail_html($html, $post_id) {
	$post_gallery_ids = get_post_gallery_ids($post_id, 'string');
	if (strlen($post_gallery_ids) > 0) {
		$html = do_shortcode('[swiper_gallery ids="' . $post_gallery_ids . '"]');
	}
	return $html;
}
add_filter( 'post_thumbnail_html', 'featured_galleries_post_thumbnail_html', 99, 5 );

This will render a swiper_gallery shortcode with every call to the_post_thumbnail in case the current post actually has a featured gallery assigned.

Development

Download Docker CE for your OS.

Environment

Point terminal to your project root and start up the container.

docker-compose up -d

Open your browser at http://localhost:3000.

Go through Wordpress installation and activate Swiper Shortcode wordpress plugin or install via wpcli:

docker-compose run --rm wp-cli install-wp

Useful docker commands

Startup services

docker-compose up -d

You may omit the -d-flag for verbose output.

Shutdown services

In order to shutdown services, issue the following command

docker-compose down

List containers

docker-compose ps

Remove containers

docker-compose rm

Open bash

Open bash at wordpress directory

docker-compose exec wordpress bash

Update composer dependencies

If it's complaining about the composer.lock file, you probably need to update the dependencies.

docker-compose run composer update
List all globally running docker containers
docker ps
Globally stop all running docker containers
docker stop $(docker ps -a -q)
Globally remove all containers
docker rm $(docker ps -a -q)
Remove all docker related stuff
docker system prune
You can’t perform that action at this time.