Weaver Plugin Documentation

Weaver Show Sliders
Version 1.2

This document has information about the Weaver Show Sliders plugin. This plugin allows you to display Image and Post Sliders and Carousels on your site.

The Weaver Show Sliders plugin requires that you also install both plugins the Weaver Show Posts plugin, available from the WordPress.org plugin repository. Show Sliders uses the post selection filters and other features available in Show Posts to display post and image sliders.

Important Note: This plugin was formerly called ATW Show Sliders. The name has been changed to Weaver Show Sliders to tie it in to our other plugins and themes. There is no functional difference between the old and new versions. To preserve compatibility, classes will retain their previous ".atw-class-name" naming conventions.

Table of Contents

Plugin Summary

The Weaver Show Sliders plugin allows you to create sliders and slide shows to display images and posts using a shortcode. You can use the retuired Weaver Show Posts plugin's filter options to specify which posts or posts with images will be used by the slider. Can also specify an images show using the standard WordPress Media Library Create Gallery interface.

The Show Posts plugin is a stand-alone plugin, and can be installed and used independently of the Show Sliders plugin. The Show Sliders Plugin requires the Show Posts plugin to work.

Weaver Posts and Slider Admin Page

The administrative interfaces for these plugins will be added as a menu item on the Dashboard Menu. When you have both plugins installed , the menu is called Weaver Posts/Slider, with an additional Dashboard menu called Slider Posts used to define custom pages for your sliders.

Using Shortcodes

Shortcodes are an important part of WordPress. They allow you to insert a shortcode - a named entity surrounded by [square brackets] anywhere into your pages and posts. The [show_posts] and [show_slider] shortcodes make it easy by adding buttons above the icon bar in the Page and Post editor.

You can also insert the shortcodes anywhere else that a theme, plugin, or widget area supports shortcodes. Note that by default, the standard Text Widget does not support shortcodes. Some themes and plugins extend the Text Widget so it supports shortcodes. If your theme doesn't do that, you can check the option at the bottom of the Weaver Show Posts admin tab to add shortcode support to the standard Text Widget.

[show_slider] - Flexible, responsive slider

The Weaver [show_slider] shortcode is based on the FlexSlider 2 jQuery slider script, probably the best JavaScript available for showing content in sliders and slide shows. The Weaver Show Slider plugin provides an interface that allows you to easily specify content and slider layout to take full advantage of FlexSlider.

You can display standard WordPress posts in a slider, or images only in a slide show or carousel slider. You can specify a complete filter specification to choose Posts or Images. A custom post type, Slider Posts, is provided to allow you define custom slider content that won't appear on your site's blog or archive posts.

The complete help document for the Weaver Show Posts plugin can be found by clicking the document link from the "Quick Start Help" tab of the plugin admin page.

Basic Steps to Create a Posts Slider

  1. Defining Content
    You select content to be displayed in your banner by defining a Filter on the Filter tab. You can select almost any content to display depending on the complexity of your Filter. Filters are described below in the Show Posts section.

    One typical application is a Recent Posts slider that can be created by specifying "Number of Posts" to show.

  2. Define a slider
    You can create as many sliders as you want. Follow these steps:
    1. Open the Sliders tab from the Weaver Posts/Slider dashboard menu.
    2. Create a new slider by entering a name in the box next to the "Create New Slider" button, and click that button.
    3. Define options for the slider. There are some required options, clearly shown in the "Required" box. These include slider type (Single item at a time or a carousel), what kind of paging index you want, showing Posts or Images, and finally, a Filter.

  3. Display your slider with the shortcode
    Simply enter the shortcode: [show_slider name=name-of-you-slider] wherever you want the slider to be displayed.

    Getting the slider to display as a banner in your header is more complicated. See the instructions below.

Create an Image Slide Show using WordPress Media Gallery

  1. Create the Image Slider content. Open Dashboard : Slider Posts : New Slider Post to create a Slider Post to define gallery. Give that post a meaningful name - for example, Colorado.
  2. Create [gallery] for that post using "Add Media : Create Gallery". See this video tutorial on how to create a gallery. Publish that Slider Post.
  3. Open the Dashboard : Weaver Posts/Slider : Sliders tab. Create a New Slider (e.g., named "Colorado"). In the "Required Options" section, set slider type and paging options to your choice. In the "Quick Option: Slider Post Slug" box right under the"Slider Filter:" setting, enter the slug (e.g., "colorado") of the Slider Post you created in step 1. Save settings.
  4. Add shortcode [show_slider name="colorado"] wherever you want the slider (there is an insert button on the Page/Post Editor).
  5. View your slide show.

Create an Image or Post Slide Show using a Filter

  1. Create the content for your slider. Content can be regular posts, or special content created just for the slider using the "Slider Posts" custom post type. Content with images can be used for Image Sliders.

  2. Select your Slider content by creating a Filter on Filters tab (for example, a filter named "Colorado"). For a "Post" slider, the posts can contain any content. For an "Image" slider, the posts you select in the filter should contain either a [gallery] shortcode, or an image. Image Sliders will use either the [gallery], the post's "Featured Image", or the first image contained in the post. All posts selected by the filter will be included in the slider.

  3. Create a Slider on Sliders tab. (for example, named "Colorado"). Set "Slider Type", "Slider Paging", and "Slider Content" to your choice. Set Slider Filter to "Colorado". Save settings.

  4. Add shortcode [show_slider name="colorado"] (there is an insert button on the Page/Post Editor).

  5. See your slide show.

Hints For Image Sliders

  1. The easiest way to define Image Slider content is to use the [gallery] shortcode generated by the "Add Media : Create Gallery" menu available in the Post Editor. That tool allows you to edit each image's title, caption, description. You can click the Edit Gallery button on the large Gallery Icon displayed in the Visual edit mode display of the post. From there, you can edit each image's title, caption, description; you can also delete, add, and change the order of images in the slider. You can even preview which slides are included by clicking the View Post option from the Post Editor.

  2. The easiest way to define a single slider is to define a [gallery] in a Slider Posts custom post, and use the slug name of that post in the Slider Tab "Quick Option: Slider Post Slug" box.

  3. You can create individual custom Slider Posts that contain individual images (or even a [gallery] definition), and group them all together into a single slide show by adding them all to the same "Slider Group" as defined on the Slider Posts editor page. They you can specify a "Slider Group" in the Filters tab. Note that these slides will be displayed using the sort order displayed in the ordering options found in the "Basic Options" box.

Hints for both Posts and Images Sliders

  1. You can create new custom posts using the Slider Posts menu. This is a new custom post type that works just like a regular post - but intended to define slides or specialized posts. These custom posts will not appear in the same places that standard WordPress posts do - e.g., blog pages or archive pages (category, tag, dates, etc.). Slider Posts are not limited to just image sliders - you can use them however you want.

  2. You might find it helpful to maintain your sliders and filters if you give the same name to a slider and its corresponding filter.

  3. All posts selected by a filter definition will be displayed in the order set by the ordering options in the "Filter : Basic Options" box. The default is by descending date order. This is the same as the standard blog order.

  4. You can have posts displayed in a specific order by defining a set of specific posts to display by post ID using the "Filter : By Post IDs" box.  You can find a post's ID in your browser's URL address field when editing the post with the Post editor. It is the number right after the ?post=. Sorry this can't be easier, but the only way WordPress supports showing a specific set of posts is by ID. Note that images defined in a [gallery] shortcode will be displayed in the order they are specified.

Which Image is Used for the Slide?

When you define an Image Slider, Show Sliders will select which image to display using the following rules. If displaying the caption and/or the description is enabled, those values will come from the Media Library values for a given image.

  1. [gallery] Images - If the first image the post has a [gallery], Show Posts will display all the images from the [gallery], one image per slide, and displayed in the order specified in the gallery. There is an option to disable using [gallery]s as the source for images. The title will be taken from each images Media Library values, and the image link will open the image's attachment page. The Media Library thumbnail is used for Thumbnail Pagers.

  2. Post Featured Image - If no [gallery] is detected, then the Featured Image specified for a post will be used for the slide image by default. There is an option to disable using the Featured Image for the main image. The title will come from the post's title instead of the image's Media Library title, and the link will open the post. The Media Library thumbnail for the Featured Image is used for Thumbnail Pagers.

  3. First Image in Post - If there is no Featured Image (or FI's have been disabled), the first image in a post will be used as the slide image. The title and link are from the post. The Media Library thumbnail will be used for Thumbnail Pagers unless the image is not the Media Library, in which case the image itself will be used for the thumbnail.

    Alternate Link: If a slide image is defined with this method, there is an option in the Other Options: Navigation section that allows you to specify an arbitrary link for the slide: "For Image Slide from a post, use link as specified in "Add Media" link for image rather than link to post." When you use the "Add Media" button from the post editor to insert an image, you have an option to specify a link associated with that image. This link is then inserted into the post. That link is not associated with that image anywhere else. If you define that link and check this option and enable the "Add links to images" options, then this link will be used from the slide in the slider. This could be to an external site, a specific page - whatever you want.

  4. Post Content - If there is no image detected in the post, then the post will be displayed "as-is". This final fallback is how Videos are displayed. If there are no Video or other media links in the post, the text content of the post will show in the image slide. By default, a generic "content" image will be displayed in Thumbnail pagers. There is an option that will allow Videos to have custom thumbnails.

  5. Use Featured Image only for Thumbnails - If a Featured Image is defined for a post, it will always be used as the thumbnail image for a Thumbnail Pager. There also is an option that forces the Featured Image to be used only as a Thumbnail Pager image and not as the image for the slide. This option is necessary to allow the use of the Featured Image as a thumbnail for Video sides.

Paging Images

Weaver Show Sliders supports four different kinds of paging for your single item slider - No paging, Paging dots, Thumbnails, and Sliding Thumbnails. The image used for thumbnails is automatically generated from the content that generates each slide.

Thumbnails is laid out as a grid below the main slider image. Sliding Thumbnails are displayed in a Carousel pager right below the main image.

Note: there currently is a glitch in the "FlexSlider" Javascript used by Weaver Show Sliders with the Sliding Thumbnails implementation. When you "wrap around" from the last slide in the show, the pager slider does not update properly until the third slide is again displayed. This is a somewhat complex problem, and unfortunately we must wait for the FlexSlider author to fix this problem.

Carousels can be used only with no paging or paging dots, in which case, each dot represents a "page" of images - however many images are displayed at once in the carousel.

For images that originate from a [gallery], the pager thumbnail will be the Media Library thumbnail image associated with the main image. For an image slider with images contained in a Post, the Featured Image will be used as the pager image - if it is defined. Otherwise, the first image in the post is used. If no image is included, a default image is used for the pager.

For "Show Slider as Posts", the only option is to define a Featured Image for each post included in the post slider. If there is no Featured Image defined for a post, then a default image is used. The "Thumbnails" grid pager is not supported for Posts Sliders.

Videos also require a Featured Image to define a pager image, but also requires that the "Use Featured Image only for Thumbnails" option be checked. See the "Video" section below for more details.

Add Slide Show to Header

You might want to add a banner slider to your site's header area. If your theme allows you to insert shortcodes into the header area (such as Weaver Xtreme), you should use that option. Otherwise, you may have to add a PHP snippet to a file in your theme.

If you can't add a shortcode to your header area, you will have to modify a file in your theme called "header.php". This file contains the PHP code that defines the header of your site. While most anyone with a bit of experience can do this, you need to be comfortable playing with theme PHP files. But you should never edit a theme's files directly. Instead, you should always work with a child theme.

So first, we will describe how to do that with a plugin called "Orbisus Child Theme Creator". This plugin makes it easy to create a child of your parent theme (but you can't create a child of a child!). Note that this plugin presents a bit of an intrusive interface, adding excess messages to the plugins page, so you will want to deactivate it when you're done creating the child theme. Here's the steps:

  1. Install and activate Orbisus Child Theme Creator from the Plugins admin page.
  2. Under the dashboard Appearance menu, open the Orbisius Child Theme Creator tab.
  3. Find your theme in the list. Check the "Customize title, description, etc." box, and fill in appropriate values. These are for your own use, so you don't need to be too fussy.
  4. Click "Create Child Theme". This will create a child theme in the /wp-content/themes directory of your site. It will automatically create a new style.css files, plus copy some files from your parent theme, including 'header.php', which is the file you need to modify to add a slideshow to your header.
  5. You can activate the new child theme, and you should see no changes to your site at this point.
  6. You will now want to edit the child's copy of header.php as described below. To do this, now open the "Orbisius Theme Editor" on the Appearance menu. This will open up an edit page that says "Pick any two themes and copy snippets from on the the other". You only will need to open one theme - the new child you just created. So in the "Theme #1" area, select your new child theme (not the original parent!). In the "File" selector, pick "header.php".
  7. Add the code snippet as described below. Save changes. Your slider should now appear on your site.
  8. Deactivate the Orbisus Child Theme Creator.

Adding the slider code snippet to header.php

The goal is to add this PHP code:

<?php if (function_exists('atw_slider_sc')) atw_slider_sc(array('name'=>'put-your-slider-name-here')); ?>

to an appropriate place in the child theme's header.php file. Depending on where the snippets is inserted, you may or may not need the <?php and ?> wrapper.

You will likely want the slider to go just above or below the existing header image, so a good approach is to look for the code that adds the header image (but not all themes include the standard header image in the header, but they will have code that defines something that shows at the top of your site like the title, for example.) The header.php file will typically include a <!DOCTYPE html> statement, stuff for the <head> ... </head> section, and the starting <body> HTML tag. The content of the site "header" should be right after the <body> tag.

The header image is usually included using the function calls to header_image() and get_header_image(). Hopefully, the code will also include comments that can help you figure out where to put the snippet for the slider. Add the above "atw_slider_sc" snippet to the point where you want the slider to appear.

You may want to delete the code that shows the standard header if your slider is acting as a replacement. For those a bit more comfortable with coding, you may be able to take advantage of some WordPress API functions for more control of the slider. For example, it is possible to use the function is_front_page() to show the slider on just the front page:

<?php if (is_front_page() && function_exists('atw_slider_sc'))
    atw_slider_sc(array('name'=>'put-your-slider-name-here')); ?>

We hope this little tutorial will help you add a banner type slider to your theme's header. Unfortunately, because there are so many themes with so many different variants in the header.php, we really can't provide any more help with this technique. You could also consider using the Weaver Xtreme theme which makes adding a shortcode to your header trivial.

Slider Styling

The CSS Styling Weaver Show Sliders uses has been extensively tested with many WordPress Themes, and looks great with almost all themes. However, if the display isn't perfect with your theme, or you would like to customize the look of the sliders, and you know a bit of CSS, you can use the Custom CSS tab to add some custom CSS rules to tweak the slider styling. These are some of the classes used to style the slider:

You will likely have to add !important to any new rules you add to the CustomCSS tab. The default style rules for all sliders is found in the file /wp-content/plugins/show-sliders/flex/css/atwflexslider.css. The rules have been extensively commented, so you can use them as a guide for developing your own new rules. Note - do NOT edit that file directly as it will be replaced whenever the plugin is updated. In addition, that file is not used directly by the plugin (the .min minimized file is actually used).

Slider Hints

This section has some hints for using sliders.

Video in Sliders

While you can include Videos in your sliders with the free version of Weaver Show Sliders, there extra support for videos. Most significantly videos can be made to automatically re-size to optimally fit the slider, and there will be reduced conflicts with some browsers.

The process of adding strictly video sliders essentially requires using the Slider Post custom post type. For each video you want in slider, create a Slider Post, and add only the code for the slider. You can use whatever method you want to display the video in the slider - from using WordPress's default built-in video recognition (just giving the link to the video), to using more advanced video shortcodes.

Note that since it is not possible to automatically generate a pager thumbnail for videos, if you want to use a Thumbnail pager, you will need to specify a Featured Image as the thumbnail image, plus you must also click the option "Use Featured Image only for Thumbnails" in the "Thumbnail Pagers" option section.

[gallery] Shortcode

As a bonus feature, Weaver Show Sliders can also serve as an alternate way to display your [gallery] shortcodes as a slider. Using this feature requires 2 steps:

  1. First, you have to decide what kind of slider you want to use to display your [gallery] shortcodes. To do this, you need to define a Slider option set on the Sliders tab. While you can use any slider definition you want for your [gallery]s, all [gallery]s will be displayed using the same slider definition.
  2. Enable [gallery] replacement and select which Slider definition you want - this is on the [gallery] tab.

Hints for managing your galleries

The standard WordPress gallery tool is quite powerful, and quite easy to use. When used in the typical manner, you use the following general steps:

  1. Click the Add Media button from the Page/Post editor
  2. Click the Create Gallery menu item on the Gallery popup admin box.
  3. Define your gallery - you can select which images you want to include. You can add new images. You can quickly edit the Title, Caption, Alt Text, and Description of each image.
  4. Finally, click the "Create a new gallery" button, and a [gallery] shortcode will be inserted into your page or post.

Note that if you are in Visual mode, you will see a large outline icon that represents the gallery. If you click on the gallery icon, you'll see buttons to either Edit or Delete the gallery. If you are in Text mode, you'll see the [gallery] shortcode that usually include a list of the images in the gallery. Note that if you edit the gallery by clicking the edit button in the gallery icon, you have the opportunity to add new images, delete images, drag and drop images to change the sort order, as well as specifying other options.

When used in this fashion, your galleries are associated with individual pages, which may work just fine. But if you would like to maintain different galleries, and perhaps reuse them, or move them from page to page, the Slider Posts custom post type can help you do this. Slider Posts posts are not normally displayed in the standard parts of your site. These custom posts were intended mainly as a means for defining a Weaver Show Sliders image slide show. But you can also use them just to save a gallery definition. Use all the built-in WordPress tools for creating and editing a gallery on a Slider Posts post. Then, when you want to use that gallery on any other page or post, simply copy/paste the gallery from the Slider Post to where you want it to be displayed.

How To Add Shortcode to Your Content or a Sidebar

Both Weaver Show Posts and Weaver Show Sliders work through the standard WordPress Shortcode feature. To add a Show Post to your content, insert [show_posts filter=filter-name] into a page or post. To insert a slide show, add [show_slider name=slider-name]. To make this easier, there are Add [show_posts] and Add [show_slider] buttons above the Page/Post editor icon bar.

You can also add these shortcodes to a sidebar using a standard Text Widget. Simply add the shortcode (you can copy the current settings for the shortcode from the version displayed near the top of either the "Show Posts" tab or the "Sliders" tab, then paste them into a Text Widget. Many themes an plugins already add the ability to include shortcodes in the Text Widget, but if you just see the shortcode displayed in the Text Widget when you view your site, open the "Show Posts" tab, and click the option at the bottom to allow the Text Widget to include shortcodes.

 

The Weaver Show Sliders Plugin and this document are © 2014,2015 Bruce E. Wampler. Web Site - WeaverTheme.com