This documentation is for AppPresser 2 only. For AppPresser 3 docs, click here.

AppSwiper Setup

AppSwpiper Logo

It seems that everyone these days has cameras in their pockets at all times. If you have a copy of the AppCamera extension, you have the ability to accept and attach user images. With the AppSwiper extension, you have an easy, convenient way to display those images. If you run an ecommerce store, you can display many products or even many individual product shots in a touch-friendly way, allowing your users to see everything you have to offer.

AppSwiper Video Demo

How to install AppSwiper

  1. Install and activate the AppSwiper plugin from the zip file that you were given when you purchased AppSwiper. You can upload that through your WordPress admin and let WordPress extract it into the right folder for you. If you would prefer SSH/FTP, extract the contents of the zip file and upload the contents to your wp-content/plugins/ directory on your server.

Using AppSwiper

AppSwiper is fairly self contained and does not have any user-configurable settings. However, it does a lot of things underneath the hood to help shape your site to be application-ready.

  • It registers a "slides" custom post type.

This custom post type will make it easy to create slides for sliders that you'll use. Since each slide is its own post, you have potential to extend each slide using post meta and make each slide more than just an image.

AppSwiper slides list screenshot

List of created slides in the 'Slides' post type
  • It registers some optimized image sizes for media uploads.

There are two sizes that AppSwiper registers for you: "phone" with dimensions of 500w x 300h, and "tablet" with dimensions of 1024w x 400h.

  • Uses two different javascript based libraries for its functionality.

AppSwiper uses Swiper by idangero.us and Picturefill by Scott Jehl. Swiper allows for multiple ways to display your content and provide scroll-ability within the context of your smart device. Picturefill helps aid in keeping your images responsive so that they display nicely to your users.

  • Provides two shortcodes

First shortcode available is [swiper]. This shortcode is well suited for the homepage and the slider displayed at the very top. This shortcode is limited to the 'slides' custom post type.

If you add a title and post content, it will show up as a headline and caption for the slide. If you prefer just the image, leave both blank. To set the image, use the "featured image" functionality along the right side of the slide editor.

Second shortcode available is [swiper-carousel]. This shortcode is more flexible and able to be used with any post type you have available, including your WooCommerce products. When you use this shortcode with your products, you'll want to specify "products" for the post type, and it'll use a special loop tailored for WooCommerce.

Adding Slides to the Homepage

If your homepage is displaying a list of posts, you can add a slider to the top of the list.  On the AppPresser settings page, press the Open Customizer button, then choose the Mobile Front Page option.  There you can select the 'Add slider to homepage?' checkbox and choose "What category?" you wish to use.

TIP: If you choose a category, your slides will be selected from both the 'post' and 'slides' custom post types as long as they have the category assigned to that post.

Tutorials

[swiper]

Attribute type Details Available parameters
category string Specifies which category name/slug to use with this swiper. any category terms you have created and attached to the posting.
Default: none
number integer Specifies how many slides to show Any amount you want. -1 for all
Default: 8

Examples:

[swiper category="uncategorized"]
[swiper number="12"]

[swiper-carousel]

Attribute type Details Available parameters
type string Specifies the post type to use with the swiper carousel. any post types that are registered.
Default: post
Note: use the post type slug.
category string Specifies which category name/slug to use with this swiper. any category terms you have created.
Default: none
Note: If using for WooCommerce products, use product_cat terms.
number integer Specifies how many slides to show Any amount you want. -1 for all
Default: 8

Examples:

[swiper type="testimonials"]
[swiper category="uncategorized"]
[swiper number="12"]

AppSwiper Hooks

The AppSwiper extension has been coded with WooCommerce compatibility in mind.

All of these apply only for the swipers used for WooCommerce.

woocommerce_after_shop_loop_item

Type: Action | File: /inc/woo-loop.php | Since: 1.0.0

Hooks right at the end of the product item container, after the permalink for the product.

woocommerce_after_shop_loop_item_title

Type: Action | File: /inc/woo-loop.php | Since: 1.0.0

Hooks right right the product title, inside the link anchor tag.

woocommerce_before_shop_loop_item

Type: Action | File: /inc/woo-loop.php | Since: 1.0.0

Hooks right inside the the product item container, above the permalink for the product.

woocommerce_before_shop_loop_item_title

Type: Action | File: /inc/woo-loop.php | Since: 1.0.0

Hooks right before the product title, inside the link anchor tag.

loop_shop_columns

Type: Filter | File: /inc/woo-loop.php | Since: 1.0.0

Allows you to modify the amount of columns to render in the woocommerce loop, related to grid display. Defaults to 4.

Provided value:

4