Sliders: Documentation

    Installation

    1. Download and unzip the plugin package.
    2. Upload the folder 'sliders' to '/wp-content/plugins/'.
    3. Navigate to the “Plugins” page in your WordPress admin panel and Activate the plugin. A new item “Slides” would appear in your admin menu.

    slides_post_type

    Create Slider

    From your WordPress admin panel, navigate to Slides → Sliders and create a new Slider by filling out the setting fields:

    • Name – write a name for your slider. This is a required field but it serves only as a reference, so anything would work.
    • Width – set the maximum slide image width. Ideally, this should be the max width of the containing element. For example, if the default/desktop width of your site is 940px, and you want this to be a full-width slider, write ‘940’ in the field.
    • Height – set the maximum height of the slide images in pixels.
    • Effect – select the animation (transition) effect. There are two options – ‘fade’ and ‘slide’.
    • Delay – set the time interval between two slides in milliseconds (1000 milliseconds = 1 sec).
    • Animation Duration – set the speed of the transition effect in milliseconds (1000 milliseconds = 1 sec).
    • Start Automatically – if unchecked, your visitors would need to use the navigation elements to scroll between the slides.

    slider_setup

    When done, click “Add New Slider”. Your new slider will be added to the list. If you need to review and edit the slider settings, simply click on its name in the table and the “Edit Slider” screen would appear.

    Create Slides

    Next, we need to create a few slides to use in our new slider. Go to Slides → Add New Slide and fill out the following fields:

    • Title – would appear in the upper right corner of the slide. Optional.
    • Slide Image – click on “Set featured image” to upload the image you want to use for this slide. It should be wide and tall no less than the previously set slider width/height.
    • Slide Link – if you want to make the slide clickable (so it directs the user to another place if clicked), fill out this field with the respective URL. Optional field.
    • Sliders – select the slider(s) this slide belongs to in the side box.
    • Slide Order – use numbers (0, 1, 2, 3,…) to set the place of this slide within the slider sequence. This field is optional and can be used for editing/re-arranging the slides after they are already created. If omitted, the slide creation date would be used to arrange the slides order – the newest slides would appear first.

    When done, click “Publish”. Then you’d probably want to repeat these steps to create a few more slides for your slider.

    slide_edit

    How to Display the Slider on your Site

    Sliders are displayed via a shortcode, which looks like this:

    [sliders id="17"]

    That ’17’ must be replaced with the ID of the specific slider you want to display. Using it without specifying an ID is also possible – if you simply add [sliders] to your page/post/widget, ALL slides would be included, regardless of the slider they belong to.

    But how would you know the ID’s of your sliders? Go to Slides → Sliders and look at the table to the right, where all sliders are listed. For your copy-pasting pleasure, the last column contains the exact shortcode you should use. Simply copy it from there and paste where you want it displayed.

    sliders_shortcodes

    And where exactly to paste this shortcode? Here are the options:

    • In your post or page – directly paste [slider id="121"] in the post/page editor area and save.
    • In your template file – be it header.php, home.php, post.php, page.php,… Use this syntax: <?php echo do_shortcode( '[sliders id="23"]' ); ?>