Post Slider by WD – Responsive Post Slider for WordPress

Description

WordPress Post Slider WD
Demo
Demo Admin
User Manual
Support Forum

Post Slider helps to display posts of your website as a slider. The plugin allows to create sliders from native WordPress posts and custom posts created by third-party plugins.
The plugin has two types of posts sliders: dynamic post slider and static post slider.

Using dynamic post slider you can display dynamically changing list of posts, e.g. featured posts, news posts, product post from ecommerce plugins and etc. As initial step you should provide filters which will allow Post Slider plugin to display posts relevant to filtered settings.

Choose specific posts and display them using static slider. In this case slides will remain unchanged unless you add/edit existing slide list. This is also relevant to custom posts like ecommerce products or events.
Post Slider is fully responsive and looks wonderful with devices of any resolution.

Using Text layer you can display any text over the slides. In addition you can choose placeholders containing information specific for that post only, e.g. Title, post content, author and etc. Placeholder content will be modified when changes are made to posts. This applies both to static post sliders and dynamic posts sliders.

Image layers (Pro) will help to add brand logo over post slides.
If you want to add text over the slide but also want to save space you should use hotspot layer (Pro). It will display hotspot icon over the slide and display text when hovered over this icon.

Looking for advanced views? Activate Carousel or Parallax views . Carousel view (Pro) displays images with a centered main large image surrounded by smaller images: upon clicking navigation buttons centered image will be shifted. Parallax view (Pro) displays images with moving layers (with mouse hover).

Post Slider WD main features include:

  • Responsive
  • Unlimited number of post sliders
  • Static Post Slider
  • Dynamic Post Slider
  • Custom Post Support
  • Text layer with post-related data
  • Detailed filters for dynamic post sliders
  • Custom CSS support
  • Autoplay/Shuffle
  • Navigation buttons/bullets/
  • Timer bar for displaying slide progress
  • Slides Sorting Options

Upgrade to Post Slider WD pro to get access to following features:

  • Slider Image Layer
  • Slider Hotspot Layer
  • Social Sharing button layer
  • Parallax effect
  • Carousel View Slider
  • Filmstrip Support
  • Navigation button/bullet styles for each slider
  • 26 Slider Transition effects
  • Social Sharing button layer
  • 38 Layer effects

WordPress Post Slider WD Step by step guide

Step 1: Installing the Post Slider WD.

Minimum requirements.

  • WordPress 3.9+
  • PHP 5.x
  • MySQL 5.x

Perform a new installation

After downloading the ZIP file of the Post Slider WD plugin,

  1. Log in to the administrator panel.
  2. Go to Plugins Add > New > Upload.
  3. Click “Choose file” (“Browse”) and select the downloaded zip file of the Post Slider plugin.
    For Mac Users
    Go to your Downloads folder and locate the folder with the Post Slider WD. Right-click on the folder and select Compress. Now you have a newly created .zip file which can be installed as described here.
  4. Click “Install Now” button.
  5. Click “Activate Plugin” button for activating the Post Slider WD.
  6. If the installation does not succeed, please contact us at info@web-dorado.com.

Step 2: Creating Posts Sliders

Go to Post Slider WordPress>Sliders>Add New. Fill in Slider title and choose the type of slider you want to create: Dynamic Post Slider or Static Posts Slider.

On the right upper corner you will see the following buttons:
Save. This will save the changes applied to the slider and redirect you to the list of all created slides.
Apply. This will save the changes applied to the slider and keep you on the same page in admin panel.
Save as Copy. Using this option you can edit post slider and save it as a copy instead of replacing the original post slider.
Cancel. You can cancel any changes made to slider hitting the button.

Creating Static Posts Slider

Press Add Posts button. New window opens displaying Search, post type and category drop-downs.

Search. Here you can input a title (full or partial) to search for relevant posts. Using follow-up select field you can narrow your search to specific post type.
Post Type. Here you will see the list of WordPress native posts and custom posts created by other plugins,e.g. Calendar plugins, Ecommerce plugins and etc. After selecting a type the list of relevant taxonomies will appear, which can be used for browsing posts, e.g. for WordPress native type posts you will see Category as taxonomy.

Full list of the posts corresponding to filters will be visible below. You can select the posts you prefer to add to slider using the checkbox next to their title.

As a final step press Add to Slider button.

Posts will be added and displayed with their custom images below Slides section. You can change the sequence of the posts using drag and drop (4-pointed arrow). Additionally you can provide titles to slides by clicking on Slide N, which is slide sequential number and providing a title.

Hovering over the images you will see a set of three buttons: Edit Post, Duplicate Slide, Delete.

Edit Slide. Pressing the button you can replace the original post with another one.
Duplicate Slide. Pressing the button you will not only duplicate the slider but its layers. You can further edit and replace the slide keeping all of its layers.
Delete. Using the button you can remove the slide

Creating Dynamic Posts Slider

Dynamic Post slider is designed to display posts which fulfill requirements set by filters. The slider posts will be updated when new posts corresponding to filters are added to your site, e.g. if you choose to display posts corresponding to Latest Posts category, newly added posts will be displayed within the slider.

The list of filters is the following:

Period of posts to display. Set the time for the posts, e.g. if set it to 24 hours it will display the posts added within the last 24 hours.
Number of posts. Set the number of posts which will be displayed as slides. If set to 0 or left empty it will display all posts.
Choose post type. Select the type for the dynamic posts, e.g. native or custom post types.
Author. Select the author whose posts will be displayed within the slider.
Sort posts by. Select the option which will be used as a sorting basis while displaying posts.
Order posts by. Set the ordering sequence for the posts- ascending or descending.
Post taxonomies. Here all available taxonomies will be displayed relevant for that specific type of posts. You can use drop-downs to narrow the selection.

Step 3: Adding Layers to Sliders

There are 4 types of layers that can be added slides: Text, Image, Social Button and Hotspot. You can add multiple layers to each slide: layers can be of same type or different.The layers can be duplicated by pressing “Duplicate button” next to the “Close” button. In this case the duplicated layer will appear as the last positioned layer and can be further customized.

Text Layer

Text layer will allow adding custom text and all post-related parameters, e.g. author, post title, content, type and etc.

Dimensions. Provide text layer height and width.
Position. Either drag and drop the layer over the slide or use x and y axis values for positioning it.
Size. Set font size for text layer.
Color. Set font color for text layer.
Font family. Set font family for text layer. This option can be enhanced if you add font family in Settings>General Options.
Font weight. If you want to add additional styling to your text, e.g. make it bold, use this option.
Published. Choose whether to publish the layer or not.
Effect in. Select the effect which will be used when layer appears over the slide.
Effect out. Select the effect which will be used when layer disappears from the slide.
Padding. Using CSS values set padding for text within the layer.
Background Color. Set a color which will used as a background color for the text layer.
Transparency. Set transparency level for the image between 0 and 100, where 100 corresponds to full transparency.
Border. Using CSS values set a border for text layer.
Radius. Using CSS values set radius for text layer.
Shadow. Using CSS values set shadow for image layer.

Image Layer

Image layer will allow adding an image over the slider post. Please note that in case of dynamic posts you can only choose one image that will be displayed with all post slides, whereas with static post slider you can set different images.

Dimensions. Provide image layer height and width. To avoid distortion make sure those correspond to initial dimension of the image.
Alt. Fill in HTML attribute specified in the IMG tag.
Link. Fill in link to which user will be redirected upon hitting the layer, e.g. http://www.example.com.
Position. Either drag and drop the layer over the slide or use x and y axis values for positioning it.
Transparency. Set transparency level for the image between 0 and 100, where 100 corresponds to full transparency.
Published. Choose whether to publish the layer or not.
Effect in. Select the effect which will be used when layer appears over the slide.
Effect out. Select the effect which will be used when layer disappears from the slide.
Border. Using CSS values set a border for image layer.
Radius. Using CSS values set radius for image layer.
Shadow. Using CSS values set shadow for image layer.

Social Button Layer

You can select social sharing buttons which will allow sharing the slide. The list includes Facebook, Tumblr, Twitter, Pinterest and Google+.

Position. Either drag and drop the layer over the slide or use x and y axis values for positioning it.
Social button. Using drop-down choose social sharing button to use as a layer.
Size. Define the size of social sharing button.
Transparency. Set transparency level for the image between 0 and 100, where 100 corresponds to full transparency.
Published. Choose whether to publish the layer or not.
Effect in. Select the effect which will be used when layer appears over the slide.
Effect out. Select the effect which will be used when layer disappears from the slide.
Color. Choose button color for the social sharing button.
Hover color. Choose button color for the social sharing button when hovered.

HotSpot Layer

Hotspot layer will allow displaying a hotspot icon over the slide and displaying content when hovered over this icon.

Text. Provide a text which will be displayed as hotspot pop-up.
Dimensions. Provide dimensions for hotspot pop-up window.
Position. Either drag and drop the layer over the slide or use x and y axis values for positioning it.
Link. Fill in link to which user will be redirected upon hitting the layer, e.g. http://www.example.com.
Hotspot text position. Select a positioning for hotspot pop-up text.
Hotspot Width. Define the width for the hotspot icon.
Hotspot Background Color. Set a background color for hotspot icon.
Hotspot Border. Using CSS values set a border for hotspot.
Hotspot Radius. Using CSS values set radius for hotspot.
Published. Choose whether to publish the layer or not.
Effect in. Select the effect which will be used when layer appears over the slide.
Effect out. Select the effect which will be used when layer disappears from the slide.
Padding. Using CSS values set padding for text within the layer.
Size. Define font size for hotspot pop-up text.
Color. Select font color for hotspot pop-up text.
Font family. Set font family for text layer. This option can be enhanced if you add font family in Settings>General Options.
Font weight. If you want to add additional styling to your text, e.g. make it bold, use this option.
Background Color.
Transparent. Set transparency level for the image between 0 and 100, where 100 corresponds to full transparency.
Border. Using CSS values set a border for overall hotspot layer.
Radius. Using CSS values set radius for overall hotspot layer.
Shadow. Using CSS values set shadow for overall hotspot layer.

Step 4: Post Slider Settings

If you want to make major changes applicable to entire slider go to Post Slider WD>Sliders>Settings tab.

Global Settings

You can change the main settings here. The changes will affect only the current slider.

Dimensions. Here you should provide maximum dimensions of the slider. Depending on used device the dimensions might be lowered to keep responsiveness.
Full width. Post slider can be stretched for full width view. The height of the image will be based upon original image ratio, e.g. if original dimensions are 600×400 and page width is 900, the height will be 600. Alternatively you can set your own ratio.
Background fit. Image can be inserted using one of available three background fit options. The options are dependant of image and background dimensions.
Cover. Images gets cut and rescaled (enlarged) to fit the entire background.
Fill. Image gets stretched/compressed to slider dimensions.
Contain. Images keeps its dimensions using background to fill slider.
Align. With this option you can align your slider to either left, right or to the center. If your theme content area width is small i.e. if you have a column on left or right side of your webpage you may not be able to see this option at work. Also if the dimension is set to 800x300px, which is the maximum size for use with responsiveness feature, you will not see any difference while trying to align your slide to any direction.
Effect. This will be the transition effect for slide change Note: This effect is independent from layer effects.
Effect duration. Time transition effect using ms.
Time Interval. Set the time interval between slides.
Parallax effect. Parallax effect will move layers when mouse hovered creating 3D effect.
Autoplay. Activating the option you will turn on autoplay.
Shuffle. Activating the option you will remove selected original sequence and have post slides appear in random order.
Start with slide. Using the option you can select the slide, which will be first displayed. You can use 0 for randomizing the option. Default is set to first slide.
Music. Activate to enable music/audio track playback for slider.
Music URL. Provide the full link to the audio track, which will be used with the slider, e.g. http://www.example.com
Smart Load. Smart load will load first few images and will process the rest meanwhile. This will save timing on load and make the slider appear faster.
Background color. If you use views which require background set a color and transparency level for the background.
Border. Set slider border and add its parameters.
Border radius. Using CSS type values add radius to slider border.
Margin. Set a margin for the slider in pixels.
Shadow. Set a slider shadow using CSS type values.
Right click protection. Disable right click for image download protection.
Layer out on next. Choose whether to have the layer effect out regardless of the timing between the hit to the next slider or skip the effect out and get to the next image.
Text Layer Character Limit. Limit the number of characters which will appear as text layer based on post content.
Add font family. If you want to add additional font families for textual elements of the slider use this field.
Published. Choose whether to publish the mentioned slider or not.

Carousel

Carousel view displays a larger centered image with descending size images on both sides.

Carousel. Enables the view.
Number of images for carousel. Set number of visible images for view. This includes large image and surrounding images.
Carousel image ratio. Set ratio which will be applied to difference between centered image and images next to it.
Container fit. If you activate the option the distance between the images will be identical so that the images fill the container, otherwise the distance between the images will depend on the ratio.
Fixed Width. Define maximum width for carousel display.

Navigation

Navigation button styles, colors and size can be adjusted. In addition you can completely disable navigation buttons.

Next/ Previous buttons. Activates Previous and Next buttons.
Next/ Previous buttons. Activates Play and Pause buttons.
Show Navigation buttons. Choose whether to display navigation buttons by default or while hovered.
Image for Next / Previous buttons. You can use default buttons, style them or upload your own option.
Default. Choose relevant style group, colors. Reverse feature is applicable.
Custom. Upload image for each action button. You can use reverse feature.
Styled. Select styled button among available options.
Next/ Previous buttons style. Choose the style of the button you prefer to have as navigation buttons.
Next/ Previous buttons size. Set the dimensions for the right/left buttons.
Play/Pause button. Activate Play and Pause buttons.
Image for Play / Pause buttons. You can use default buttons, style them or upload your own option.
Default. Choose relevant style group, colors. Reverse feature is applicable.
Custom. Upload image for each action button. You can use reverse feature.
Styled. Select styled button among available options.
Play / Pause buttons style. Choose the style of the button you prefer to have as navigation buttons.
Play / Pause button size. Set the dimensions for play/pause buttons.
Buttons color (for Styled only). Choose color for navigation buttons.
Hover color (for Styled only). Choose hover color for navigation buttons.
Border. Set navigation button border and add its parameters.
Border radius. Set border radius for navigation buttons using CSS type values.
Background color. Select the background color for navigation buttons.

Bullets

Bullets can also be used as navigation option. Clicking bullet you will open up the slider in corresponding position.

Position. Set position for navigation bullets using available options.
Bullet style. You can use default bullets, style them or upload your own option.
Default. Choose relevant style group, colors.
Custom. Upload your own bullet image.
Styled. Select styled button among available options.
Size. Define navigation bullet dimensions.
Color (for Styled only). Select navigation bullet color.
Active color (for Styled only). Choose the color for the bullet, which is currently displaying an active slide.
Margin. Set margin for navigation bullets in pixels.

Filmstrip

You can add a filmstrip which will display featured images of those posts used with slider.

Position. Choose filmstrip position between 4 possible options.
Thumbnail dimensions. Set filmstrip thumbnail dimensions.
Background color. Choose background color for the filmstrip.
Thumbnail margin. Set margin for filmstrip thumbnails in pixels.
Active border. The thumbnail for the currently displayed image will have a border. You can set its size, type and color.
Deactive transparency. You can set a transparency level for the inactive filmstrip items.

Timer Bar

You can add a bar displaying the timing left to switching to the next slide. This is commonly used when using autoplay option.

Type. Define timer bar type.
Size. Define timer bar dimensions in pixels.
Color. Choose color and the transparency level for timer bar.

CSS

If you want to add additional styling to sliders you can write down CSS within the box below. These changes will overwrite the original styles.

Step 4: Inserting Post Slider

Inserting post slider into a Page or a Post:
You can insert post sliders into pages or posts. Open the post/page. Here you will see “Insert Slider” button with a Slider icon. Press the button, Select the slider and press Insert.
In addition, you can insert the shortcode manually. The corresponding shortcode is displayed next to the created slider in Post Slider WD>Sliders section under Shortcode column.

Adding post slider to theme using PHP function:
This feature is commonly used while displaying slider within header/footer position. The function can be found at Post Slider WD>Sliders section within PHP function column.

Adding post slider as a widget:
Go to Appearance>Widgets>Post Slider. Select a position for post slider widget and press Save button. Provide a title for the slider and choose post slider using drop-down list.

Screenshots

  • Post Slider WD - Add Slides
  • Post Slider WD - Slider Settings
  • Post Slider WD - Slider 1
  • Post Slider WD - Slider 2
  • Post Slider WD - Slider 3

Installation

Thank you for your interest in Post Slider WD.

Minimum requirements.

  • WordPress 3.9+
  • PHP 5.x
  • MySQL 5.x

Perform a new installation

After downloading the ZIP file of the Post Slider WD plugin,

  1. Log in to the administrator panel.
  2. Go to Plugins Add > New > Upload.
  3. Click “Choose file” (“Browse”) and select the downloaded zip file of the Post Slider plugin.
    For Mac Users
    Go to your Downloads folder and locate the folder with the Post Slider WD. Right-click on the folder and select Compress. Now you have a newly created .zip file which can be installed as described here.
  4. Click “Install Now” button.
  5. Click “Activate Plugin” button for activating the Post Slider WD.
  6. If the installation does not succeed, please contact us at info@web-dorado.com.

FAQ

Installation Instructions

Thank you for your interest in Post Slider WD.

Minimum requirements.

  • WordPress 3.9+
  • PHP 5.x
  • MySQL 5.x

Perform a new installation

After downloading the ZIP file of the Post Slider WD plugin,

  1. Log in to the administrator panel.
  2. Go to Plugins Add > New > Upload.
  3. Click “Choose file” (“Browse”) and select the downloaded zip file of the Post Slider plugin.
    For Mac Users
    Go to your Downloads folder and locate the folder with the Post Slider WD. Right-click on the folder and select Compress. Now you have a newly created .zip file which can be installed as described here.
  4. Click “Install Now” button.
  5. Click “Activate Plugin” button for activating the Post Slider WD.
  6. If the installation does not succeed, please contact us at info@web-dorado.com.

Reviews

Clean & Simple Plugin!

Clean & simple plugin as i always looking for it.. although have to paid for text layer adjustment.. it’s ok for me to paid it.. good job!

False Advertising – Waste My Time

UPDATED REVIEW:

This plugin is actually pretty great, but the ‘text layer’ feature was a little confusing, since it says it comes with the free version, but then in the backend it’s settings are disabled and it says it is only good with the paid version. However, even though it says this, the slider still does pull in the post excerpt along w/ the title. I guess the ‘text layer’ that is disabled in the backend allows for some additional text. Not sure. Before I saw that the [title] box also included the excerpt, it seemed like a bait and switch, but its just not well labeled imo. Very happy w/ the plugin now.

ORIGINAL REVIEW: This plugin looks wonderful, at the outset. As I downloaded and worked with it, I also found it very intuitive and user friendly in the backend.

However, I specifically needed the feature of the ‘text layer’ that was shown in the plugins page. There, it says in one of the bullet points …

Post Slider WD main features include:
– Text layer with post-related data

‘Main Features’, as in, what should be available with the free version. Underneath those ‘Main Features’ bullets, is a separate bullet list for what all else is included with the upgraded Pro version. Thus, it was clearly advertised that the ‘text layer’ was part of the main (free) features.

However, this is NOT the case. As I only learned after 20 minutes of time spent in installing and setting up a test slider.

Perhaps the author of this plugin at one time had the ‘text layers’ option as part of the free version but since changed their mind and clawed it back. I’m not sure, so I won’t go as far as accusing them of bad motives in the false advertising. However I can then accuse them of being careless in not bothering to update their plugin description so that it is misleading and wasted my time. I’m already behind on this project, so it’s just frustrating when this happens.

I wrote this review to hopefully save others the trouble. If the authors will update their page description to honestly reflect the features, then it will be a great plugin, no doubt.

Glad I found this slider!

The default slider for my Genesis theme wasn’t acting right. And, it didn’t show any text as far as the title, etc. on mobile devices. I was pulling my hair out trying to fix it. So after testing many slider plugins, this is absolutely a life saver. It is fully customizable so takes time and work, but the slider looks and operates EXACTLY how I need it to. On desktop and mobile devices. Life Saver!!

Read all 28 reviews

Contributors & Developers

“Post Slider by WD – Responsive Post Slider for WordPress” is open source software. The following people have contributed to this plugin.

Contributors

Changelog

1.0.45

  • Fixed: Do not insert a shortcode if no slider is selected.

1.0.44

  • Fixed: HTML attribute validation improvement.

1.0.43

  • Fixed: Uninstall.
  • Fixed: Dynamic slide update.

1.0.42

  • Fixed: Slider direction with two slides.

1.0.41

  • Changed: Minimum font size validation.

1.0.40

  • Changed: Removed support forum link.

1.0.39

  • Added: Minimum font size for text layers.

1.0.38

  • Changed: Notices.

1.0.37

  • Added: Open post on slider click (optional).
  • Added: Text layer hover color.
  • Added: Support forum link.

1.0.36

  • Fixed: Post date format.
  • Added: Overview page.

1.0.35

  • Added: Global options page.
  • Added: “Include scripts/styles only on necessary pages” option.
  • Changed: Move “Add font family” to global options.

1.0.34

  • Fixed: Required field validation.

1.0.33

  • Added: Static slides order direction (optional).

1.0.32

  • Added: Animation iteration count.
  • Fixed: Save as copy.
  • Fixed: Date format in layers.

1.0.31

  • Added: Full width slider on small screens.

1.0.30

  • Changed: Text layer “More” three dots with its character.

1.0.29

  • Added: Option to hide on mobile.
  • Added: Slider loop option.
  • Fixed: Removed empty line breaks from inline javascipt to prevent conflict with some themes.

1.0.28

  • Fixed: Swedish frontend translation (thanks to Mikael Winterkvist).
  • Fixed: Layer styles conflict with some themes.
  • Added: Two way slideshow. Slideshow can go backwards if someone switch to a previous slide.

1.0.27

  • Added: Mouse wheel, mouse swipe and keyboard navigation methods.

1.0.26

  • Fixed: Post meta field in dynamic slider.

1.0.25

  • Improved: Decrease slider load time.
  • Improved: Close unclosed tags in text layer.

1.0.24

  • Changed: Distinguish free and pro styles/scripts versions.
  • Fixed: One slide cuts the other in some cases.

1.0.23

  • Changed: Slider reset button position.

1.0.22

  • Fixed: Strip whitespace and line breaks from the beginning and end of the text layer.
  • Fixed: Text layer character limit.

1.0.21

  • Added: Remove shortcodes from layers (optional).

1.0.20

  • Added: Alignment for text layer.
  • Fixed: Image, Video layers.

1.0.19

  • Added: Three fixed layer positions.
  • Fixed: Layer RotatInDownRight effect saving.

1.0.18

  • Added: Show thumbnail on bullet hover.

1.0.17

  • Changed: Featured themes page.

1.0.16

  • Fixed: Don’t show layer if content is empty.

1.0.15

  • Changed: Bulk actions for sliders.
  • Fixed: Resetting layer positions on parallax sliders on touch leave.

1.0.14

  • Changed: Support for new version of Google Fonts.
  • Added: Possibility to add font family to google fonts.
  • Fixed: Slides count in sliders list.

1.0.13

  • Changed: Updated Font Awesome to 4.6.3 version.
  • Fixed: Backend stlyes.

1.0.12

  • Changed: Increase post type length in database.

1.0.11

  • Fixed: Dynamic post slides options styles.
  • Added: Option for adding posts which do not contain featured image.

1.0.10

  • Changed: Featured plugins page.

1.0.9

  • Fixed: Posts count.
  • Fixed: Increase post taxanomies field length.

1.0.8

  • Added: Multiple taxanomies

1.0.7

  • Added: No sliders found message.
  • Fixed: Styles.

1.0.6

  • Added: Characters limit for text layer.

1.0.5

  • Fixed: Add post page styles on WordPress 4.5
  • Fixed: Undefined iframes in frontend.
  • Fixed: Filmstrip responsiveness.

1.0.4

  • Fixed: Featured image depend on dynamic post slider filter.
  • Fixed: Order by publishing date.

1.0.3

  • Added: Text bullets.
  • Added: Smart crop.

1.0.2

  • Fixed: Conflict with some themes.

1.0.1

  • Added: Notices.
  • Fixed: Preview image for sliders with dynamic posts.

1.0.0

  • Initial version